x15904151985/ArtPlayer
1
0 Fork 0
mirror of https://github.com/zhw2590582/ArtPlayer.git synced 2026-10-26 17:01:20 -08:00
Code Issues Packages Projects Releases Wiki Activity

Update index.js

Browse Source
This commit is contained in:
Harvey Zack authored and GitHub committed 2019-04-18 21:48:24 +08:00
1 parent 662531b35f
commit b787a3bb99
1 file changed
+12 -17
Download Patch File Download Diff File Expand all files Collapse all files
packages/artplayer-plugin-backlight/src/index.js
+12 -17
View File
@@ -12,12 +12,12 @@ function matrixCallback(callback) {
return result; return result;
} }
function getColors($img, width, height) { function getColors($video, width, height) {
const canvas = document.createElement('canvas'); const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
canvas.width = width; canvas.width = width;
canvas.height = height; canvas.height = height;
ctx.drawImage($img, 0, 0); ctx.drawImage($video, 0, 0);
return matrixCallback((xIndex, yIndex, x, y) => { return matrixCallback((xIndex, yIndex, x, y) => {
const itemW = width / x; const itemW = width / x;
const itemH = height / y; const itemH = height / y;
@@ -87,24 +87,19 @@ function artplayerPluginBacklight(art) {
art.on('firstCanplay', () => { art.on('firstCanplay', () => {
const { clientWidth, clientHeight } = $video; const { clientWidth, clientHeight } = $video;
const matrix = creatMatrix($backlight, clientWidth, clientHeight); const matrix = creatMatrix($backlight, clientWidth, clientHeight);
const $img = document.createElement('img');
(function loop() { (function loop() {
window.requestAnimationFrame(() => { window.requestAnimationFrame(() => {
if (player.playing) { if (player.playing) {
const dataUri = player.getScreenshotDataURL(); const colors = getColors($video, clientWidth, clientHeight);
$img.onload = () => { colors.forEach(({ r, g, b }, index) => {
const colors = getColors($img, clientWidth, clientHeight); const { $box, left, right, top, bottom } = matrix[index];
colors.forEach(({ r, g, b }, index) => { // eslint-disable-next-line no-nested-ternary
const { $box, left, right, top, bottom } = matrix[index]; const x = left ? '-64px' : right ? '64px' : '0';
// eslint-disable-next-line no-nested-ternary // eslint-disable-next-line no-nested-ternary
const x = left ? '-64px' : right ? '64px' : '0'; const y = top ? '-64px' : bottom ? '64px' : '0';
// eslint-disable-next-line no-nested-ternary $box.style.webkitBoxShadow = `rgb(${r}, ${g}, ${b}) ${x} ${y} 128px`;
const y = top ? '-64px' : bottom ? '64px' : '0'; $box.style.boxShadow = `rgb(${r}, ${g}, ${b}) ${x} ${y} 128px`;
$box.style.webkitBoxShadow = `rgb(${r}, ${g}, ${b}) ${x} ${y} 128px`; });
$box.style.boxShadow = `rgb(${r}, ${g}, ${b}) ${x} ${y} 128px`;
});
};
$img.src = dataUri;
}; };
loop(); loop();
}); });