mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-08 10:56:15 -08:00
Add artplayer-plugin-ambilight package and demo
This commit is contained in:
Harvey Zack committed
1 parent
406d71b53c
commit
5dfe50c719
10 files changed
+501
No files matched your search
@@ -108,6 +108,7 @@ var art = new Artplayer({
|
||||
- [artplayer-plugin-vast](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-vast/index.js&example=vast)
|
||||
- [artplayer-plugin-chapter](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-chapter/index.js&example=chapter)
|
||||
- [artplayer-plugin-auto-thumbnail](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-auto-thumbnail/index.js&example=auto.thumbnail)
|
||||
- [artplayer-plugin-ambilight](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-ambilight/index.js&example=ambilight)
|
||||
|
||||
## Libraries
|
||||
|
||||
|
||||
@@ -0,0 +1,16 @@
|
||||
// npm i artplayer-plugin-ambilight
|
||||
// import artplayerPluginAmbilight from 'artplayer-plugin-ambilight';
|
||||
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
autoSize: true,
|
||||
plugins: [
|
||||
artplayerPluginAmbilight({
|
||||
blur: '50px',
|
||||
opacity: 1,
|
||||
frequency: 10,
|
||||
duration: 0.3,
|
||||
}),
|
||||
],
|
||||
});
|
||||
@@ -103,6 +103,10 @@
|
||||
<a
|
||||
href="/?libs=./uncompiled/artplayer-plugin-auto-thumbnail/index.js&example=auto.thumbnail">artplayer-plugin-auto-thumbnail</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="/?libs=./uncompiled/artplayer-plugin-ambilight/index.js&example=ambilight">artplayer-plugin-ambilight</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li class="title">Proxys</li>
|
||||
|
||||
@@ -0,0 +1,303 @@
|
||||
// modules are defined as an array
|
||||
// [ module function, map of requires ]
|
||||
//
|
||||
// map of requires is short require name -> numeric require
|
||||
//
|
||||
// anything defined in a previous bundle is accessed via the
|
||||
// orig method which is the require for previous bundles
|
||||
|
||||
(function (modules, entry, mainEntry, parcelRequireName, globalName) {
|
||||
/* eslint-disable no-undef */
|
||||
var globalObject =
|
||||
typeof globalThis !== 'undefined'
|
||||
? globalThis
|
||||
: typeof self !== 'undefined'
|
||||
? self
|
||||
: typeof window !== 'undefined'
|
||||
? window
|
||||
: typeof global !== 'undefined'
|
||||
? global
|
||||
: {};
|
||||
/* eslint-enable no-undef */
|
||||
|
||||
// Save the require from previous bundle to this closure if any
|
||||
var previousRequire =
|
||||
typeof globalObject[parcelRequireName] === 'function' &&
|
||||
globalObject[parcelRequireName];
|
||||
|
||||
var cache = previousRequire.cache || {};
|
||||
// Do not use `require` to prevent Webpack from trying to bundle this call
|
||||
var nodeRequire =
|
||||
typeof module !== 'undefined' &&
|
||||
typeof module.require === 'function' &&
|
||||
module.require.bind(module);
|
||||
|
||||
function newRequire(name, jumped) {
|
||||
if (!cache[name]) {
|
||||
if (!modules[name]) {
|
||||
// if we cannot find the module within our internal map or
|
||||
// cache jump to the current global require ie. the last bundle
|
||||
// that was added to the page.
|
||||
var currentRequire =
|
||||
typeof globalObject[parcelRequireName] === 'function' &&
|
||||
globalObject[parcelRequireName];
|
||||
if (!jumped && currentRequire) {
|
||||
return currentRequire(name, true);
|
||||
}
|
||||
|
||||
// If there are other bundles on this page the require from the
|
||||
// previous one is saved to 'previousRequire'. Repeat this as
|
||||
// many times as there are bundles until the module is found or
|
||||
// we exhaust the require chain.
|
||||
if (previousRequire) {
|
||||
return previousRequire(name, true);
|
||||
}
|
||||
|
||||
// Try the node require function if it exists.
|
||||
if (nodeRequire && typeof name === 'string') {
|
||||
return nodeRequire(name);
|
||||
}
|
||||
|
||||
var err = new Error("Cannot find module '" + name + "'");
|
||||
err.code = 'MODULE_NOT_FOUND';
|
||||
throw err;
|
||||
}
|
||||
|
||||
localRequire.resolve = resolve;
|
||||
localRequire.cache = {};
|
||||
|
||||
var module = (cache[name] = new newRequire.Module(name));
|
||||
|
||||
modules[name][0].call(
|
||||
module.exports,
|
||||
localRequire,
|
||||
module,
|
||||
module.exports,
|
||||
this
|
||||
);
|
||||
}
|
||||
|
||||
return cache[name].exports;
|
||||
|
||||
function localRequire(x) {
|
||||
var res = localRequire.resolve(x);
|
||||
return res === false ? {} : newRequire(res);
|
||||
}
|
||||
|
||||
function resolve(x) {
|
||||
var id = modules[name][1][x];
|
||||
return id != null ? id : x;
|
||||
}
|
||||
}
|
||||
|
||||
function Module(moduleName) {
|
||||
this.id = moduleName;
|
||||
this.bundle = newRequire;
|
||||
this.exports = {};
|
||||
}
|
||||
|
||||
newRequire.isParcelRequire = true;
|
||||
newRequire.Module = Module;
|
||||
newRequire.modules = modules;
|
||||
newRequire.cache = cache;
|
||||
newRequire.parent = previousRequire;
|
||||
newRequire.register = function (id, exports) {
|
||||
modules[id] = [
|
||||
function (require, module) {
|
||||
module.exports = exports;
|
||||
},
|
||||
{},
|
||||
];
|
||||
};
|
||||
|
||||
Object.defineProperty(newRequire, 'root', {
|
||||
get: function () {
|
||||
return globalObject[parcelRequireName];
|
||||
},
|
||||
});
|
||||
|
||||
globalObject[parcelRequireName] = newRequire;
|
||||
|
||||
for (var i = 0; i < entry.length; i++) {
|
||||
newRequire(entry[i]);
|
||||
}
|
||||
|
||||
if (mainEntry) {
|
||||
// Expose entry point to Node, AMD or browser globals
|
||||
// Based on https://github.com/ForbesLindesay/umd/blob/master/template.js
|
||||
var mainExports = newRequire(mainEntry);
|
||||
|
||||
// CommonJS
|
||||
if (typeof exports === 'object' && typeof module !== 'undefined') {
|
||||
module.exports = mainExports;
|
||||
|
||||
// RequireJS
|
||||
} else if (typeof define === 'function' && define.amd) {
|
||||
define(function () {
|
||||
return mainExports;
|
||||
});
|
||||
|
||||
// <script>
|
||||
} else if (globalName) {
|
||||
this[globalName] = mainExports;
|
||||
}
|
||||
}
|
||||
})({"ica5N":[function(require,module,exports) {
|
||||
var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
|
||||
parcelHelpers.defineInteropFlag(exports);
|
||||
parcelHelpers.export(exports, "default", ()=>artplayerPluginAmbilight);
|
||||
function artplayerPluginAmbilight(option = {}) {
|
||||
return (art)=>{
|
||||
const { $video } = art.template;
|
||||
const { createElement, addClass, setStyles } = art.constructor.utils;
|
||||
const { blur = "50px", opacity = 0.5, frequency = 10, duration = 0.3 } = option;
|
||||
const $ambilight = createElement("div");
|
||||
const gridItems = createGridItems($ambilight);
|
||||
setupAmbilight($ambilight, $video);
|
||||
setupGridItems(gridItems, blur, opacity, duration);
|
||||
const updateColors = createColorUpdater($video, gridItems, frequency);
|
||||
let animationFrameId = null;
|
||||
function start() {
|
||||
if (!animationFrameId) updateColors();
|
||||
}
|
||||
function stop() {
|
||||
if (animationFrameId) {
|
||||
cancelAnimationFrame(animationFrameId);
|
||||
animationFrameId = null;
|
||||
}
|
||||
}
|
||||
art.on("ready", start);
|
||||
art.on("destroy", stop);
|
||||
return {
|
||||
name: "artplayerPluginAmbilight",
|
||||
start,
|
||||
stop
|
||||
};
|
||||
function createGridItems($ambilight) {
|
||||
$ambilight.innerHTML = Array(9).fill("<div></div>").join("");
|
||||
return Array.from($ambilight.children);
|
||||
}
|
||||
function setupAmbilight($ambilight, $video) {
|
||||
addClass($ambilight, "artplayer-plugin-ambilight");
|
||||
$video.parentNode.insertBefore($ambilight, $video);
|
||||
setStyles($ambilight, {
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
zIndex: 9,
|
||||
inset: 0,
|
||||
display: "grid",
|
||||
gridTemplateColumns: "1fr 1fr 1fr",
|
||||
gridTemplateRows: "1fr 1fr 1fr"
|
||||
});
|
||||
}
|
||||
function setupGridItems(gridItems, blur, opacity, duration) {
|
||||
gridItems.forEach(($item)=>{
|
||||
setStyles($item, {
|
||||
opacity,
|
||||
filter: `blur(${blur})`,
|
||||
transition: `background-color ${duration}s ease`
|
||||
});
|
||||
});
|
||||
}
|
||||
function createColorUpdater($video, gridItems, frequency) {
|
||||
const canvas = createElement("canvas");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = 3;
|
||||
canvas.height = 3;
|
||||
function getAverageColor(x, y, w, h) {
|
||||
ctx.drawImage($video, x, y, w, h, 0, 0, 1, 1);
|
||||
const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data;
|
||||
return `rgb(${r}, ${g}, ${b})`;
|
||||
}
|
||||
let lastUpdateTime = 0;
|
||||
return function updateColors() {
|
||||
const now = performance.now();
|
||||
if (now - lastUpdateTime < 1000 / frequency || !art.playing) {
|
||||
animationFrameId = requestAnimationFrame(updateColors);
|
||||
return;
|
||||
}
|
||||
lastUpdateTime = now;
|
||||
const w = $video.videoWidth / 3;
|
||||
const h = $video.videoHeight / 3;
|
||||
const colors = [
|
||||
[
|
||||
0,
|
||||
0
|
||||
],
|
||||
[
|
||||
w,
|
||||
0
|
||||
],
|
||||
[
|
||||
2 * w,
|
||||
0
|
||||
],
|
||||
[
|
||||
0,
|
||||
h
|
||||
],
|
||||
[
|
||||
w,
|
||||
h
|
||||
],
|
||||
[
|
||||
2 * w,
|
||||
h
|
||||
],
|
||||
[
|
||||
0,
|
||||
2 * h
|
||||
],
|
||||
[
|
||||
w,
|
||||
2 * h
|
||||
],
|
||||
[
|
||||
2 * w,
|
||||
2 * h
|
||||
]
|
||||
].map(([x, y])=>getAverageColor(x, y, w, h));
|
||||
gridItems.forEach(($item, index)=>{
|
||||
$item.style.backgroundColor = colors[index];
|
||||
});
|
||||
animationFrameId = requestAnimationFrame(updateColors);
|
||||
};
|
||||
}
|
||||
};
|
||||
}
|
||||
if (typeof window !== "undefined") window["artplayerPluginAmbilight"] = artplayerPluginAmbilight;
|
||||
|
||||
},{"@parcel/transformer-js/src/esmodule-helpers.js":"5dUr6"}],"5dUr6":[function(require,module,exports) {
|
||||
exports.interopDefault = function(a) {
|
||||
return a && a.__esModule ? a : {
|
||||
default: a
|
||||
};
|
||||
};
|
||||
exports.defineInteropFlag = function(a) {
|
||||
Object.defineProperty(a, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
};
|
||||
exports.exportAll = function(source, dest) {
|
||||
Object.keys(source).forEach(function(key) {
|
||||
if (key === "default" || key === "__esModule" || Object.prototype.hasOwnProperty.call(dest, key)) return;
|
||||
Object.defineProperty(dest, key, {
|
||||
enumerable: true,
|
||||
get: function() {
|
||||
return source[key];
|
||||
}
|
||||
});
|
||||
});
|
||||
return dest;
|
||||
};
|
||||
exports.export = function(dest, destName, get) {
|
||||
Object.defineProperty(dest, destName, {
|
||||
enumerable: true,
|
||||
get: get
|
||||
});
|
||||
};
|
||||
|
||||
},{}]},["ica5N"], "ica5N", "parcelRequire4dc0")
|
||||
|
||||
//# sourceMappingURL=index.js.map
|
||||
@@ -0,0 +1 @@
|
||||
{"mappings":"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","sources":["packages/artplayer-plugin-ambilight/src/index.js","node_modules/@parcel/transformer-js/src/esmodule-helpers.js"],"sourcesContent":["export default function artplayerPluginAmbilight(option = {}) {\n return (art) => {\n const { $video } = art.template;\n const { createElement, addClass, setStyles } = art.constructor.utils;\n const { blur = '50px', opacity = 0.5, frequency = 10, duration = 0.3 } = option;\n\n const $ambilight = createElement('div');\n const gridItems = createGridItems($ambilight);\n\n setupAmbilight($ambilight, $video);\n setupGridItems(gridItems, blur, opacity, duration);\n\n const updateColors = createColorUpdater($video, gridItems, frequency);\n\n let animationFrameId = null;\n\n function start() {\n if (!animationFrameId) {\n updateColors();\n }\n }\n\n function stop() {\n if (animationFrameId) {\n cancelAnimationFrame(animationFrameId);\n animationFrameId = null;\n }\n }\n\n art.on('ready', start);\n art.on('destroy', stop);\n\n return {\n name: 'artplayerPluginAmbilight',\n start,\n stop,\n };\n\n function createGridItems($ambilight) {\n $ambilight.innerHTML = Array(9).fill('<div></div>').join('');\n return Array.from($ambilight.children);\n }\n\n function setupAmbilight($ambilight, $video) {\n addClass($ambilight, 'artplayer-plugin-ambilight');\n $video.parentNode.insertBefore($ambilight, $video);\n setStyles($ambilight, {\n position: 'absolute',\n top: 0,\n left: 0,\n zIndex: 9,\n inset: 0,\n display: 'grid',\n gridTemplateColumns: '1fr 1fr 1fr',\n gridTemplateRows: '1fr 1fr 1fr',\n });\n }\n\n function setupGridItems(griLine truncated
|
||||
@@ -0,0 +1,11 @@
|
||||
# artplayer-plugin-ambilight
|
||||
|
||||
ambilight plugin for ArtPlayer
|
||||
|
||||
## Demo
|
||||
|
||||
[https://artplayer.org](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-ambilight/index.js&example=ambilight)
|
||||
|
||||
## License
|
||||
|
||||
MIT © Harvey Zack
|
||||
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"license": "MIT",
|
||||
"version": "1.0.0",
|
||||
"name": "artplayer-plugin-ambilight",
|
||||
"types": "types/artplayer-plugin-ambilight.d.ts",
|
||||
"description": "ambilight plugin for ArtPlayer",
|
||||
"main": "dist/artplayer-plugin-ambilight.js",
|
||||
"legacy": "dist/artplayer-plugin-ambilight.legacy.js",
|
||||
"author": "Harvey Zack <laozhaochaguan@gmail.com>",
|
||||
"browserslist": "last 1 Chrome version",
|
||||
"homepage": "https://artplayer.org",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/zhw2590582/ArtPlayer.git"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/zhw2590582/ArtPlayer/issues"
|
||||
},
|
||||
"keywords": [
|
||||
"html5",
|
||||
"video",
|
||||
"player"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,119 @@
|
||||
export default function artplayerPluginAmbilight(option = {}) {
|
||||
return (art) => {
|
||||
const { $video } = art.template;
|
||||
const { createElement, addClass, setStyles } = art.constructor.utils;
|
||||
const { blur = '50px', opacity = 0.5, frequency = 10, duration = 0.3 } = option;
|
||||
|
||||
const $ambilight = createElement('div');
|
||||
const gridItems = createGridItems($ambilight);
|
||||
|
||||
setupAmbilight($ambilight, $video);
|
||||
setupGridItems(gridItems, blur, opacity, duration);
|
||||
|
||||
const updateColors = createColorUpdater($video, gridItems, frequency);
|
||||
|
||||
let animationFrameId = null;
|
||||
|
||||
function start() {
|
||||
if (!animationFrameId) {
|
||||
updateColors();
|
||||
}
|
||||
}
|
||||
|
||||
function stop() {
|
||||
if (animationFrameId) {
|
||||
cancelAnimationFrame(animationFrameId);
|
||||
animationFrameId = null;
|
||||
}
|
||||
}
|
||||
|
||||
art.on('ready', start);
|
||||
art.on('destroy', stop);
|
||||
|
||||
return {
|
||||
name: 'artplayerPluginAmbilight',
|
||||
start,
|
||||
stop,
|
||||
};
|
||||
|
||||
function createGridItems($ambilight) {
|
||||
$ambilight.innerHTML = Array(9).fill('<div></div>').join('');
|
||||
return Array.from($ambilight.children);
|
||||
}
|
||||
|
||||
function setupAmbilight($ambilight, $video) {
|
||||
addClass($ambilight, 'artplayer-plugin-ambilight');
|
||||
$video.parentNode.insertBefore($ambilight, $video);
|
||||
setStyles($ambilight, {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
zIndex: 9,
|
||||
inset: 0,
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '1fr 1fr 1fr',
|
||||
gridTemplateRows: '1fr 1fr 1fr',
|
||||
});
|
||||
}
|
||||
|
||||
function setupGridItems(gridItems, blur, opacity, duration) {
|
||||
gridItems.forEach(($item) => {
|
||||
setStyles($item, {
|
||||
opacity,
|
||||
filter: `blur(${blur})`,
|
||||
transition: `background-color ${duration}s ease`,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function createColorUpdater($video, gridItems, frequency) {
|
||||
const canvas = createElement('canvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
canvas.width = 3;
|
||||
canvas.height = 3;
|
||||
|
||||
function getAverageColor(x, y, w, h) {
|
||||
ctx.drawImage($video, x, y, w, h, 0, 0, 1, 1);
|
||||
const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data;
|
||||
return `rgb(${r}, ${g}, ${b})`;
|
||||
}
|
||||
|
||||
let lastUpdateTime = 0;
|
||||
|
||||
return function updateColors() {
|
||||
const now = performance.now();
|
||||
if (now - lastUpdateTime < 1000 / frequency || !art.playing) {
|
||||
animationFrameId = requestAnimationFrame(updateColors);
|
||||
return;
|
||||
}
|
||||
|
||||
lastUpdateTime = now;
|
||||
|
||||
const w = $video.videoWidth / 3;
|
||||
const h = $video.videoHeight / 3;
|
||||
|
||||
const colors = [
|
||||
[0, 0],
|
||||
[w, 0],
|
||||
[2 * w, 0],
|
||||
[0, h],
|
||||
[w, h],
|
||||
[2 * w, h],
|
||||
[0, 2 * h],
|
||||
[w, 2 * h],
|
||||
[2 * w, 2 * h],
|
||||
].map(([x, y]) => getAverageColor(x, y, w, h));
|
||||
|
||||
gridItems.forEach(($item, index) => {
|
||||
$item.style.backgroundColor = colors[index];
|
||||
});
|
||||
|
||||
animationFrameId = requestAnimationFrame(updateColors);
|
||||
};
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
if (typeof window !== 'undefined') {
|
||||
window['artplayerPluginAmbilight'] = artplayerPluginAmbilight;
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
import type Artplayer from 'artplayer';
|
||||
|
||||
export = artplayerPluginAmbilight;
|
||||
export as namespace artplayerPluginAmbilight;
|
||||
|
||||
type Option = {
|
||||
blur: string;
|
||||
opacity: number;
|
||||
frequency: number;
|
||||
zIndex: number;
|
||||
duration: number;
|
||||
};
|
||||
|
||||
type Result = {
|
||||
name: 'artplayerPluginAmbilight';
|
||||
start: () => void;
|
||||
stop: () => void;
|
||||
};
|
||||
|
||||
declare const artplayerPluginAmbilight: (option: Option) => (art: Artplayer) => Result;
|
||||
@@ -77,6 +77,7 @@ const config = {
|
||||
{ text: 'Chromecast', link: 'https://artplayer.org/?libs=./uncompiled/artplayer-plugin-chromecast/index.js&example=chromecast'},
|
||||
{ text: 'Vast 广告', link: 'https://artplayer.org/?libs=./uncompiled/artplayer-plugin-vast/index.js&example=vast'},
|
||||
{ text: '视频章节', link: 'https://artplayer.org/?libs=./uncompiled/artplayer-plugin-chapter/index.js&example=chapter'},
|
||||
{ text: '视频背光', link: 'https://artplayer.org/?libs=./uncompiled/artplayer-plugin-ambilight/index.js&example=ambilight'},
|
||||
]
|
||||
},
|
||||
{
|
||||
@@ -144,6 +145,7 @@ const config = {
|
||||
{ text: 'Chromecast', link: 'https://artplayer.org/?libs=./uncompiled/artplayer-plugin-chromecast/index.js&example=chromecast'},
|
||||
{ text: 'Vast', link: 'https://artplayer.org/?libs=./uncompiled/artplayer-plugin-vast/index.js&example=vast'},
|
||||
{ text: 'Video Chapters', link: 'https://artplayer.org/?libs=./uncompiled/artplayer-plugin-chapter/index.js&example=chapter'},
|
||||
{ text: 'Video Ambilight', link: 'https://artplayer.org/?libs=./uncompiled/artplayer-plugin-ambilight/index.js&example=ambilight'},
|
||||
]
|
||||
},
|
||||
{
|
||||
|
||||
Reference in new issue
Block a user