mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-11 13:56:15 -08:00
add artplayerPluginBacklight
This commit is contained in:
Harvey Zack committed
1 parent
80e04f7a4b
commit
a2c3e0d019
18 files changed
+461
-40
No files matched your search
@@ -29,14 +29,15 @@
|
||||
|
||||
## Ecosystem
|
||||
|
||||
| Project | Description | Demo |
|
||||
| ----------------------------------------------------------------------------------------------------------------- | ----------------------------- | ------------------------------------------- |
|
||||
| [artplayer-plugin-danmu](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-plugin-danmu) | Danmu plugin for ArtPlayer | `WIP` |
|
||||
| [artplayer-plugin-flv](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-plugin-flv) | Flv plugin for ArtPlayer | `WIP` |
|
||||
| [artplayer-plugin-gif](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-plugin-gif) | Gif plugin for ArtPlayer | [demo](https://artplayer.org/gif/) |
|
||||
| [artplayer-tool-thumbnail](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-tool-thumbnail) | Thumbnail tool for ArtPlayer | [demo](https://artplayer.org/thumbnail/) |
|
||||
| [artplayer-react](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-react) | React Component for Artplayer | [demo](https://codesandbox.io/s/n74859y9rl) |
|
||||
| [artplayer-vue](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-vue) | Vue Component for Artplayer | [demo](https://codesandbox.io/s/6z76lm109n) |
|
||||
| Project | Description | Demo |
|
||||
| --------------------------------------------------------------------------------------------------------------------- | ------------------------------ | ------------------------------------------- |
|
||||
| [artplayer-plugin-danmu](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-plugin-danmu) | Danmu plugin for ArtPlayer | `WIP` |
|
||||
| [artplayer-plugin-flv](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-plugin-flv) | Flv plugin for ArtPlayer | `WIP` |
|
||||
| [artplayer-plugin-gif](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-plugin-gif) | Gif plugin for ArtPlayer | [demo](https://artplayer.org/gif/) |
|
||||
| [artplayer-plugin-backlight](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-plugin-backlight) | Backlight plugin for ArtPlayer | [demo](https://artplayer.org/backlight/) |
|
||||
| [artplayer-tool-thumbnail](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-tool-thumbnail) | Thumbnail tool for ArtPlayer | [demo](https://artplayer.org/thumbnail/) |
|
||||
| [artplayer-react](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-react) | React Component for Artplayer | [demo](https://codesandbox.io/s/n74859y9rl) |
|
||||
| [artplayer-vue](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-vue) | Vue Component for Artplayer | [demo](https://codesandbox.io/s/6z76lm109n) |
|
||||
|
||||
## Demo
|
||||
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
html,
|
||||
body,
|
||||
.container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.artplayer {
|
||||
width: 600px;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.artplayer-video {
|
||||
border: 2px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Backlight plugin for ArtPlayer</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<meta name="keywords" content="artplayer,html5,video,player,backlight">
|
||||
<meta name="description" content="Backlight plugin for ArtPlayer">
|
||||
<link rel="shortcut icon" href="../assets/img/favicon.ico">
|
||||
<link rel="stylesheet" href="../assets/css/normalize.css">
|
||||
<link rel="stylesheet" href="./css/common.css">
|
||||
<link rel="stylesheet" href="../uncompiled/artplayer.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="artplayer"></div>
|
||||
</div>
|
||||
<script src="../uncompiled/artplayer.js"></script>
|
||||
<script src="../uncompiled/artplayer-plugin-backlight.js"></script>
|
||||
<script src="./js/common.js"></script>
|
||||
<script>
|
||||
var _hmt = _hmt || [];
|
||||
(function() {
|
||||
var hm = document.createElement("script");
|
||||
hm.src = "https://hm.baidu.com/hm.js?b6c9b8bafbf5fe7225160101dafbbc7d";
|
||||
var s = document.getElementsByTagName("script")[0];
|
||||
s.parentNode.insertBefore(hm, s);
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,13 @@
|
||||
'use strict';
|
||||
|
||||
(function() {
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer',
|
||||
url: 'https://zhw2590582.github.io/assets-cdn/video/one-more-time-one-more-chance-480p.mp4',
|
||||
autoSize: true,
|
||||
moreVideoAttr: {
|
||||
crossOrigin: 'anonymous'
|
||||
},
|
||||
plugins: [artplayerPluginBacklight]
|
||||
});
|
||||
})();
|
||||
@@ -0,0 +1,141 @@
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
||||
typeof define === 'function' && define.amd ? define(factory) :
|
||||
(global = global || self, global['artplayer-plugin-backlight'] = factory());
|
||||
}(this, function () { 'use strict';
|
||||
|
||||
function getAverageColor(img, left, top, width, height) {
|
||||
var canvas = document.createElement('canvas');
|
||||
var ctx = canvas.getContext('2d');
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
ctx.drawImage(img, -left, -top);
|
||||
var imageData = ctx.getImageData(0, 0, width, height);
|
||||
var data = imageData.data;
|
||||
var r = 0;
|
||||
var g = 0;
|
||||
var b = 0;
|
||||
|
||||
for (var i = 0, l = data.length; i < l; i += 4) {
|
||||
r += data[i];
|
||||
g += data[i + 1];
|
||||
b += data[i + 2];
|
||||
}
|
||||
|
||||
r = Math.floor(r / (data.length / 4));
|
||||
g = Math.floor(g / (data.length / 4));
|
||||
b = Math.floor(b / (data.length / 4));
|
||||
return {
|
||||
r: r,
|
||||
g: g,
|
||||
b: b
|
||||
};
|
||||
}
|
||||
|
||||
function matrixCallback(callback) {
|
||||
var result = [];
|
||||
var x = 10;
|
||||
var y = 5;
|
||||
|
||||
for (var xIndex = 0; xIndex < x; xIndex += 1) {
|
||||
for (var yIndex = 0; yIndex < y; yIndex += 1) {
|
||||
if (xIndex === 0 || xIndex === x - 1 || yIndex === 0 || yIndex === y - 1) {
|
||||
result.push(callback(xIndex, yIndex, x, y));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
function getColors($img, width, height) {
|
||||
return matrixCallback(function (xIndex, yIndex, x, y) {
|
||||
return getAverageColor($img, xIndex * width / x, yIndex * height / y, width / x, height / y);
|
||||
});
|
||||
}
|
||||
|
||||
function creatMatrix(parent, width, height) {
|
||||
return matrixCallback(function (xIndex, yIndex, x, y) {
|
||||
var $box = document.createElement('div');
|
||||
$box.style.position = 'absolute';
|
||||
$box.style.left = "".concat(xIndex * width / x, "px");
|
||||
$box.style.top = "".concat(yIndex * height / y, "px");
|
||||
$box.style.width = "".concat(100 / x, "%");
|
||||
$box.style.height = "".concat(100 / y, "%");
|
||||
$box.style['-webkit-transition'] = 'all .2s ease';
|
||||
$box.style.transition = 'all .2s ease';
|
||||
parent.appendChild($box);
|
||||
return {
|
||||
$box: $box,
|
||||
left: xIndex === 0,
|
||||
right: xIndex === x - 1,
|
||||
top: yIndex === 0,
|
||||
bottom: yIndex === y - 1
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function artplayerPluginBacklight(art) {
|
||||
var setStyles = art.constructor.utils.setStyles;
|
||||
var _art$template = art.template,
|
||||
$player = _art$template.$player,
|
||||
$video = _art$template.$video,
|
||||
player = art.player;
|
||||
var $backlight = document.createElement('div');
|
||||
$backlight.classList.add('artplayer-backlight');
|
||||
setStyles($backlight, {
|
||||
position: 'absolute',
|
||||
zIndex: 9,
|
||||
left: 0,
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
});
|
||||
$player.insertBefore($backlight, $video);
|
||||
art.on('firstCanplay', function () {
|
||||
var clientWidth = $video.clientWidth,
|
||||
clientHeight = $video.clientHeight;
|
||||
var matrix = creatMatrix($backlight, clientWidth, clientHeight);
|
||||
art.on('video:timeupdate', function () {
|
||||
var dataUri = player.getScreenshotDataURL();
|
||||
var $img = document.createElement('img');
|
||||
|
||||
$img.onload = function () {
|
||||
var width = $img.naturalWidth;
|
||||
var height = $img.naturalHeight;
|
||||
var colors = getColors($img, width, height);
|
||||
colors.forEach(function (_ref, index) {
|
||||
var r = _ref.r,
|
||||
g = _ref.g,
|
||||
b = _ref.b;
|
||||
var _matrix$index = matrix[index],
|
||||
$box = _matrix$index.$box,
|
||||
left = _matrix$index.left,
|
||||
right = _matrix$index.right,
|
||||
top = _matrix$index.top,
|
||||
bottom = _matrix$index.bottom; // eslint-disable-next-line no-nested-ternary
|
||||
|
||||
var x = left ? '-60px' : right ? '60px' : '0'; // eslint-disable-next-line no-nested-ternary
|
||||
|
||||
var y = top ? '-60px' : bottom ? '60px' : '0';
|
||||
$box.style['-webkit-box-shadow'] = "rgb(".concat(r, ", ").concat(g, ", ").concat(b, ") ").concat(x, " ").concat(y, " 120px");
|
||||
$box.style.boxShadow = "rgb(".concat(r, ", ").concat(g, ", ").concat(b, ") ").concat(x, " ").concat(y, " 120px");
|
||||
});
|
||||
};
|
||||
|
||||
$img.src = dataUri;
|
||||
});
|
||||
});
|
||||
return {
|
||||
name: 'artplayerPluginBacklight'
|
||||
};
|
||||
}
|
||||
|
||||
window.artplayerPluginBacklight = artplayerPluginBacklight;
|
||||
|
||||
return artplayerPluginBacklight;
|
||||
|
||||
}));
|
||||
//# sourceMappingURL=artplayer-plugin-backlight.js.map
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"artplayer-plugin-backlight.js","sources":["../../packages/artplayer-plugin-backlight/src/index.js"],"sourcesContent":["function getAverageColor(img, left, top, width, height) {\n const canvas = document.createElement('canvas');\n const ctx = canvas.getContext('2d');\n canvas.width = width;\n canvas.height = height;\n ctx.drawImage(img, -left, -top);\n const imageData = ctx.getImageData(0, 0, width, height);\n const { data } = imageData;\n let r = 0;\n let g = 0;\n let b = 0;\n for (let i = 0, l = data.length; i < l; i += 4) {\n r += data[i];\n g += data[i + 1];\n b += data[i + 2];\n }\n\n r = Math.floor(r / (data.length / 4));\n g = Math.floor(g / (data.length / 4));\n b = Math.floor(b / (data.length / 4));\n\n return { r, g, b };\n}\n\nfunction matrixCallback(callback) {\n const result = [];\n const x = 10;\n const y = 5;\n for (let xIndex = 0; xIndex < x; xIndex += 1) {\n for (let yIndex = 0; yIndex < y; yIndex += 1) {\n if (xIndex === 0 || xIndex === x - 1 || yIndex === 0 || yIndex === y - 1) {\n result.push(callback(xIndex, yIndex, x, y));\n }\n }\n }\n return result;\n}\n\nfunction getColors($img, width, height) {\n return matrixCallback((xIndex, yIndex, x, y) => {\n return getAverageColor($img, (xIndex * width) / x, (yIndex * height) / y, width / x, height / y);\n });\n}\n\nfunction creatMatrix(parent, width, height) {\n return matrixCallback((xIndex, yIndex, x, y) => {\n const $box = document.createElement('div');\n $box.style.position = 'absolute';\n $box.style.left = `${(xIndex * width) / x}px`;\n $box.style.top = `${(yIndex * height) / y}px`;\n $box.style.width = `${100 / x}%`;\n $box.style.height = `${100 / y}%`;\n $box.style['-webkit-transition'] = 'all .2s ease';\n $box.style.transition = 'all .2s ease';\n parent.appendChild($box);\n return {\n $box,\n left: xIndex === 0,\n right: xIndex === x - 1,\n top: yIndex === 0,\n bottom: yIndex === y - 1,\n };\n });\n}\n\nfunction artplayerPluginBacklight(art) {\n const { setStyles } = art.constructor.utils;\n const {\n template: { $player, $video },\n player,\n } = art;\n\n const $backlight = document.createElement('div');\n $backlight.classList.add('artplayer-backlight');\n setStyles($backlight, {\n position: 'absolute',\n zIndex: 9,\n left: 0,\n top: 0,\n right: 0,\n bottom: 0,\n width: '100%',\n height: '100%',\n });\n\n $player.insertBefore($backlight, $video);\n\n art.on('firstCanplay', () => {\n const { clientWidth, clientHeight } = $video;\n const matrix = creatMatrix($backlight, clientWidth, clientHeight);\n art.on('video:timeupdate', () => {\n const dataUri = player.getScreenshotDataURL();\n const $img = document.createElement('img');\n $img.onload = () => {\n const width = $img.naturalWidth;\n const height = $img.naturalHeight;\n const colors = getColors($img, width, height);\n colors.forEach(({ r, g, b }, index) => {\n const { $box, left, right, top, bottom } = matrix[index];\n // eslint-disable-next-line no-nested-ternary\n const x = left ? '-60px' : right ? '60px' : '0';\n // eslint-disable-next-line no-nested-ternary\n const y = top ? '-60px' : bottom ? '60px' : '0';\n $box.style['-webkit-box-shadow'] = `rgb(${r}, ${g}, ${b}) ${x} ${y} 120px`;\n $box.style.boxShadow = `rgb(${r}, ${g}, ${b}) ${x} ${y} 120px`;\n });\n };\n $img.src = dataUri;\n });\n });\n\n return {\n name: 'artplayerPluginBacklight',\n };\n}\n\nwindow.artplayerPluginBacklight = artplayerPluginBacklight;\nexport default artplayerPluginBacklight;\n"],"names":["getAverageColor","img","left","top","width","height","canvas","document","createElement","ctx","getContext","drawImage","imageData","getImageData","data","r","g","b","i","l","length","Math","floor","matrixCallback","callback","result","x","y","xIndex","yIndex","push","getColors","$img","creatMatrix","parent","$box","style","position","transition","appendChild","right","bottom","artplayerPluginBacklight","art","setStyles","constructor","utils","template","$player","$video","player","$backlight","classList","add","zIndex","insertBefore","on","clientWidth","clientHeight","matrix","dataUri","getScreenshotDataURL","onload","naturalWidth","naturalHeight","colors","forEach","index","boxShadow","src","name","window"],"mappings":";;;;;;IAAA,SAASA,eAAT,CAAyBC,GAAzB,EAA8BC,IAA9B,EAAoCC,GAApC,EAAyCC,KAAzC,EAAgDC,MAAhD,EAAwD;IACpLine truncated
|
||||
@@ -1,4 +1,4 @@
|
||||
.artplayer-video-player{position:relative;width:100%;height:100%;outline:0;font-family:Roboto,Arial,Helvetica,sans-serif;color:#eee;text-align:left;direction:ltr;font-size:14px;line-height:1.3;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-touch-action:manipulation;touch-action:manipulation;-ms-high-contrast-adjust:none}.artplayer-video-player *{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}.artplayer-video-player .art-icon{display:inline-block;line-height:1.5}.artplayer-video-player .art-icon svg{fill:#fff}
|
||||
.artplayer-video-player{position:relative;z-index:10;width:100%;height:100%;outline:0;font-family:Roboto,Arial,Helvetica,sans-serif;color:#eee;text-align:left;direction:ltr;font-size:14px;line-height:1.3;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-touch-action:manipulation;touch-action:manipulation;-ms-high-contrast-adjust:none}.artplayer-video-player *{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}.artplayer-video-player .art-icon{display:inline-block;line-height:1.5}.artplayer-video-player .art-icon svg{fill:#fff}
|
||||
.artplayer-video-player .artplayer-video{position:absolute;z-index:10;left:0;top:0;right:0;bottom:0;width:100%;height:100%;background-color:#000;outline:0;cursor:pointer}
|
||||
.artplayer-video-player .artplayer-subtitle{position:absolute;z-index:20;bottom:40px;width:100%;padding:0 20px;text-align:center;color:#fff;text-shadow:.5px .5px .5px rgba(0,0,0,.5);font-size:20px;pointer-events:none}.artplayer-video-player .artplayer-subtitle p{margin:5px 0}
|
||||
.artplayer-video-player .artplayer-layers{position:absolute;z-index:30;left:0;top:0;right:0;bottom:0;width:100%;height:100%;overflow:hidden;pointer-events:none}.artplayer-video-player .artplayer-layers .art-layer{pointer-events:all}
|
||||
|
||||
@@ -1 +1 @@
|
||||
{"version":3,"sources":["artplayer.scss","video.scss","subtitle.scss","layers.scss","mask.scss","loading.scss","bottom.scss","notice.scss","contextmenu.scss","setting.scss","info.scss","hideCursor.scss","aspectRatio.scss","fullscreenWeb.scss","pip.scss","autoSize.scss","flip.scss","balloon.min.css"],"names":[],"mappings":"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 truncated
|
||||
{"version":3,"sources":["artplayer.scss","video.scss","subtitle.scss","layers.scss","mask.scss","loading.scss","bottom.scss","notice.scss","contextmenu.scss","setting.scss","info.scss","hideCursor.scss","aspectRatio.scss","fullscreenWeb.scss","pip.scss","autoSize.scss","flip.scss","balloon.min.css"],"names":[],"mappings":"AAAA,wBACE,iBAAkB,CAClB,UAAW,CACX,UAAW,CACX,WAAY,CACZ,SAAU,CACV,6CAA8C,CAC9C,UAAW,CACX,eAAgB,CAChB,aAAc,CACd,cAAe,CACf,eAAgB,CAChB,wBAAiB,CAAjB,qBAAiB,CAAjB,oBAAiB,CAAjB,gBAAiB,CACjB,yCAA6C,CAC7C,6BAA0B,CAA1B,yBAA0B,CAC1B,6BAAgC,CAChC,0BACE,QAAS,CACT,SAAU,CACV,6BAAsB,CAAtB,qBAAwB,CAC1B,kCACE,oBAAqB,CACrB,eAAkB,CAClB,sCACE,SAAY;ACxBlB,yCACE,iBAAkB,CAClB,UAAW,CACX,MAAO,CACP,KAAM,CACN,OAAQ,CACR,QAAS,CACT,UAAW,CACX,WAAY,CACZ,qBAAsB,CACtB,SAAU,CACV,cAAiB;ACXnB,4CACE,iBAAkB,CAClB,UAAW,CACX,WAAY,CACZ,UAAW,CACX,cAAe,CACf,iBAAkB,CAClB,UAAW,CACX,yCAAiD,CACjD,cAAe,CACf,mBAAsB,CACtB,8CACE,YAAe;ACZnB,0CACE,iBAAkB,CAClB,UAAW,CACX,MAAO,CACP,KAAM,CACN,OAAQ,CACR,QAAS,CACT,UAAW,CACX,WAAY,CACZ,eAAgB,CAChB,mBAAsB,CACtB,qDACE,kBAAqB;ACZzB,wCACE,YAAa,CACb,iBAAkB,CAClB,UAAW,CACX,MAAO,CACP,KAAM,CACN,OAAQ,CACR,QAAS,CACT,UAAW,CACX,WAAY,CACZ,eAAgB,CAChB,mBAAsB,CACtB,qDACE,iBAAkB,CAClB,UAAW,CACX,WAAY,CACZ,UAAa;AChBjB,2CACE,YAAa,CACb,iBAAkB,CAClB,UAAW,CACX,MAAO,CACP,KAAM,CACN,OAAQ,CACR,QAAS,CACT,UAAW,CACX,WAAY,CACZ,wBAAmB,CAAnB,qBAAmB,CAAnB,kBAAmB,CACnB,uBAAuB,CAAvB,oBAAuB,CAAvB,sBAAuB,CACvB,mBAAsB;ACZxB,0CACE,iBAAkB,CAClB,UAAW,CACX,MAAO,CACP,OAAQ,CACR,QAAS,CACT,YAAa,CACb,mBAAoB,CACpB,SAAU,CACV,iBAAkB,CAClB,eAAgB,CAChB,sCAA+B,CAA/B,8BAA+B,CAC/B,mBAAoB,CACpB,kSAAqS,CACrS,8DACE,iBAAkB,CAClB,kBAAqB,CACrB,oFACE,iBAAkB,CAClB,UAAW,CACX,aAAc,CACd,cAAiB,CACjB,gHACE,iBAAkB,CAClB,WAAY,CACZ,6BAAsC,CACtC,qIACE,iBAAkB,CAClB,UAAW,CACX,MAAO,CACP,KAAM,CACN,OAAQ,CACR,QAAS,CACT,WAAY,CACZ,OAAQ,CACR,6BAAsC,CACxC,qIACE,iBAAkB,CAClB,UAAW,CACX,MAAO,CACP,KAAM,CACN,OAAQ,CACR,QAAS,CACT,WAAY,CACZ,OAAU,CACZ,wIACE,iBAAkB,CAClB,UAAW,CACX,MAAO,CACP,KAAM,CACN,OAAQ,CACR,QAAS,CACT,QAAW,CACX,6IACE,oBAAqB,CACrB,iBAAkB,CAClB,MAAO,CACP,KAAM,CACN,SAAU,CACV,UAAW,CACX,eAAgB,CAChB,iBAAoB,CACxB,wIACE,YAAa,CACb,iBAAkB,CAClB,UAAW,CACX,QAAS,CACT,WAAY,CACZ,UAAW,CACX,WAAY,CACZ,iBAAoB,CACpB,2JACE,aAAgB,CACpB,kIACE,YAAa,CACb,iBAAkB,CAClB,UAAW,CACX,SAAU,CACV,MAAO,CACP,WAAY,CACZ,aAAc,CACd,gBAAiB,CACjB,UAAW,CACX,cAAe,CACf,iBAAkB,CAClB,yBAA8B,CAC9B,iBAAkB,CAClB,eAAmB,CACvB,8NACE,aAAgB,CACpB,sFACE,YAAa,CACb,iBAAkB,CAClB,UAAW,CACX,MAAO,CACP,mBAAoB,CACpB,+BAAsC,CAC1C,8DACE,iBAAkB,CAClB,kBAAmB,CACnB,mBAAa,CAAb,mBAAa,CAAb,YAAa,CACb,wBAAmB,CAAnB,qBAAmB,CAAnB,kBAAmB,CACnB,wBAA8B,CAA9B,qBAA8B,CAA9B,6BAA8B,CAC9B,WAAc,CACd,+KACE,mBAAa,CAAb,mBAAa,CAAb,YAAe,CACjB,2EACE,UAAW,CACX,cAAe,CACf,WAAY,CACZ,cAAe,CACf,gBAAiB,CACjB,iBAAkB,CAClB,cAAiB,CACjB,qFACE,mBAAa,CAAb,mBAAa,CAAb,YAAa,CACb,wBAAmB,CAAnB,qBAAmB,CAAnB,kBAAmB,CACnB,uBAAuB,CAAvB,oBAAuB,CAAvB,sBAAuB,CACvB,UAAW,CACX,WAAY,CACZ,UAAa,CACf,iFACE,SAAY,CAChB,oGACE,iBAAkB,CAClB,UAAW,CACX,OAAQ,CACR,WAAY,CACZ,qFAAyF,CAAzF,6EAAyF,CACzF,eAAkB,CAClB,8HACE,iBAAkB,CAClB,OAAQ,CACR,MAAO,CACP,UAAW,CACX,WAAY,CACZ,kBAAmB,CACnB,eAAgB,CAChB,eAAkB,CAClB,qIACE,UAAW,CACX,eAAkB,CACpB,oIACE,QAAS,CACT,6BAAsC,CACxC,yQACE,UAAW,CACX,iBAAkB,CAClB,aAAc,CACd,OAAQ,CACR,UAAW,CACX,eAAgB,CAChB,UAAa,CACnB,0GACE,UAAa,CACf,gFACE,cAAiB,CACnB,mFACE,iBAAkB,CAClB,UAAW,CACX,cAAiB,CACjB,iGACE,YAAa,CACb,iBAAkB,CAClB,UAAW,CACX,WAAY,CACZ,WAAY,CACZ,aAAc,CACd,iBAAkB,CAClB,UAAW,CACX,yBAA8B,CAC9B,iBAAoB,CACpB,mHACE,WAAY,CACZ,gBAAiB,CACjB,eAAgB,CAChB,sBAAuB,CACvB,kBAAmB,CACnB,kCAAyC,CACzC,yHACE,mCAA4C,CAClD,uGACE,aAAgB,CAExB,4HACE,SAAU,CACV,kBAAqB,CAEvB,wPACE,sBAA0B;AC7L5B,0CACE,YAAa,CACb,cAAe,CACf,iBAAkB,CAClB,UAAW,CACX,MAAO,CACP,KAAM,CACN,YAAa,CACb,UAAW,CACX,mBAAsB,CACtB,kEACE,oBAAqB,CACrB,gBAAiB,CACjB,UAAW,CACX,yBAA8B,CAC9B,iBAAoB;ACfxB,+CACE,YAAa,CACb,iBAAkB,CAClB,WAAY,CACZ,MAAO,CACP,KAAM,CACN,eAAgB,CAChB,aAAc,CACd,yBAA8B,CAC9B,iBAAoB,CACpB,gEACE,cAAe,CACf,cAAe,CACf,aAAc,CACd,UAAW,CACX,gBAAiB,CACjB,eAAgB,CAChB,sBAAuB,CACvB,kBAAmB,CACnB,kCAAuC,CACvC,0CAAmD,CACnD,kEACE,UAAW,CACX,oBAAuB,CACzB,qEACE,oBAAqB,CACrB,aAAgB,CAChB,wJACE,aAAgB,CACpB,sEACE,mCAA4C,CAC9C,2EACE,kBAAqB;AChC3B,2CACE,YAAa,CACb,iBAAkB,CAClB,UAAW,CACX,MAAO,CACP,KAAM,CACN,WAAY,CACZ,UAAW,CACX,wBAAmB,CAAnB,qBAAmB,CAAnB,kBAAmB,CACnB,uBAAuB,CAAvB,oBAAuB,CAAvB,sBAAuB,CACvB,mBAAsB,CACtB,oEACE,iBAAkB,CAClB,WAAY,CACZ,YAAa,CACb,cAAe,CACf,yBAA8B,CAC9B,iBAAkB,CAClB,kBAAmB,CACnB,eAAkB,CAClB,4FACE,eAAgB,CAChB,UAAW,CACX,WAAc,CACd,yGACE,0CAAiD,CACjD,iBAA8B,CAC9B,6HACE,UAAW,CACX,kBAAqB,CACvB,2HACE,wBAAiC,CACvC,6FACE,iBAAkB,CAClB,KAAM,CACN,OAAQ,CACR,UAAW,CACX,WAAY,CACZ,gBAAiB,CACjB,iBAAkB,CAClB,wBAA+B,CAC/B,yBAA8B,CAC9B,cAAe,CACf,cAAiB,CACrB,6DACE,mBAAa,CAAb,mBAAa,CAAb,YAAa,CACb,gBAAiB,CACjB,iBAAoB,CACpB,8EACE,kBAAO,CAAP,UAAO,CAAP,MAAO,CACP,aAAgB,CAChB,mFACE,aAAc,CACd,WAAY,CACZ,gBAAiB,CACjB,iBAAkB,CAClB,UAAW,CACX,6BAAoC,CACpC,iBAAkB,CAClB,cAAiB,CACnB,oLACE,UAAW,CACX,kBAAqB;AC9D7B,wCACE,YAAa,CACb,iBAAkB,CAClB,SAAU,CACV,QAAS,CACT,UAAW,CACX,WAAY,CACZ,gBAAiB,CACjB,YAAa,CACb,UAAW,CACX,cAAe,CACf,wFAAyF,CACzF,kCAAmC,CACnC,yBAAgC,CAChC,uDACLine truncated
|
||||
@@ -1336,25 +1336,28 @@
|
||||
var option = art.option,
|
||||
notice = art.notice,
|
||||
$video = art.template.$video;
|
||||
|
||||
function captureFrame() {
|
||||
var canvas = document.createElement('canvas');
|
||||
canvas.width = $video.videoWidth;
|
||||
canvas.height = $video.videoHeight;
|
||||
canvas.getContext('2d').drawImage($video, 0, 0);
|
||||
var dataUri = canvas.toDataURL('image/png');
|
||||
downloadImage(dataUri, "".concat(option.title || 'artplayer', "_").concat(secondToTime($video.currentTime), ".png"));
|
||||
return dataUri;
|
||||
}
|
||||
|
||||
Object.defineProperty(player, 'screenshot', {
|
||||
Object.defineProperty(player, 'getScreenshotDataURL', {
|
||||
value: function value() {
|
||||
try {
|
||||
var dataUri = captureFrame();
|
||||
art.emit('screenshot', dataUri);
|
||||
var canvas = document.createElement('canvas');
|
||||
canvas.width = $video.videoWidth;
|
||||
canvas.height = $video.videoHeight;
|
||||
canvas.getContext('2d').drawImage($video, 0, 0);
|
||||
return canvas.toDataURL('image/png');
|
||||
} catch (error) {
|
||||
notice.show(error);
|
||||
console.warn(error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
});
|
||||
Object.defineProperty(player, 'downloadScreenshot', {
|
||||
value: function value() {
|
||||
var dataUri = player.getScreenshotDataURL();
|
||||
|
||||
if (dataUri) {
|
||||
downloadImage(dataUri, "".concat(option.title || 'artplayer', "_").concat(secondToTime($video.currentTime), ".png"));
|
||||
art.emit('screenshot', dataUri);
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -3815,7 +3818,7 @@
|
||||
var $screenshot = append($control, icons.screenshot);
|
||||
tooltip($screenshot, i18n.get('Screenshot'));
|
||||
proxy($screenshot, 'click', function () {
|
||||
player.screenshot();
|
||||
player.downloadScreenshot();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
@@ -1 +1 @@
|
||||
{"version":3,"file":"artplayer.js","sources":["../../node_modules/@babel/runtime/helpers/classCallCheck.js","../../node_modules/@babel/runtime/helpers/createClass.js","../../node_modules/@babel/runtime/helpers/typeof.js","../../node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/@babel/runtime/helpers/inherits.js","../../packages/artplayer/node_modules/tiny-emitter/index.js","../../packages/artplayer/node_modules/option-validator/dist/option-validator.js","../../node_modules/@babel/runtime/helpers/defineProperty.js","../../node_modules/@babel/runtime/helpers/isNativeFunction.js","../../node_modules/@babel/runtime/helpers/construct.js","../../node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../packages/artplayer/src/utils/index.js","../../packages/artplayer/src/scheme/validElement.js","../../packages/artplayer/src/scheme/index.js","../../packages/artplayer/src/config/mimeCodec.js","../../packages/artplayer/src/config/mse.js","../../packages/artplayer/src/config/video.js","../../packages/artplayer/src/config/index.js","../../packages/artplayer/src/whitelist.js","../../packages/artplayer/src/template.js","../../packages/artplayer/src/i18n.js","../../packages/artplayer/src/player/attachUrlMix.js","../../packages/artplayer/src/player/attrInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/playMix.js","../../packages/artplayer/src/player/pauseMin.js","../../packages/artplayer/src/player/toggleMix.js","../../packages/artplayer/src/player/seekMix.js","../../packages/artplayer/src/player/volumeMix.js","../../packages/artplayer/src/player/currentTimeMix.js","../../packages/artplayer/src/player/durationMix.js","../../packages/artplayer/src/player/switchQualityMix.js","../../packages/artplayer/src/player/playbackRateMix.js","../../packages/artplayer/src/player/aspectRatioMix.js","../../packages/artplayer/src/player/screenshotMix.js","../../packages/artplayer/node_modules/screenfull/dist/screenfull.js","../../packages/artplayer/src/player/fullscreenMix.js","../../packages/artplayer/src/player/fullscreenWebMix.js","../../packages/artplayer/node_modules/get-size/get-size.js","../../packages/artplayer/node_modules/ev-emitter/ev-emitter.js","../../packages/artplayer/node_modules/unipointer/unipointer.js","../../packages/artplayer/node_modules/unidragger/unidragger.js","../../packages/artplayer/node_modules/draggabilly/draggabilly.js","../../packages/artplayer/src/player/pipMix.js","../../packages/artplayer/src/player/loadedMix.js","../../packages/artplayer/src/player/playedMix.js","../../packages/artplayer/src/player/playingMix.js","../../packages/artplayer/src/player/autoSizeMix.js","../../packages/artplayer/src/player/flipMix.js","../../packages/artplayer/src/player/index.js","../../packages/artplayer/src/utils/component.js","../../node_modules/@babel/runtime/helpers/objectSpread.js","../../packages/artplayer/src/icons/index.js","../../packages/artplayer/src/controls/fullscreen.js","../../packages/artplayer/src/controls/fullscreenWeb.js","../../packages/artplayer/src/controls/pip.js","../../packages/artplayer/src/controls/playAndPause.js","../../packages/artplayer/src/controls/progress.js","../../packages/artplayer/src/controls/subtitle.js","../../packages/artplayer/src/controls/time.js","../../packages/artplayer/src/controls/volume.js","../../packages/artplayer/src/controls/setting.js","../../packages/artplayer/src/controls/thumbnails.js","../../packages/artplayer/src/controls/screenshot.js","../../packages/artplayer/src/controls/quality.js","../../packages/artplayer/src/controls/index.js","../../packages/artplayer/src/contextmenu/playbackRate.js","../../packages/artplayer/src/contextmenu/aspectRatio.js","../../packages/artplayer/src/contextmenu/info.js","../../packages/artplayer/src/contextmenu/version.js","../../packages/artplayer/src/contextmenu/close.js","../../packages/artplayer/src/contextmenu/index.js","../../packages/artplayer/src/info.js","../../node_modules/@babel/runtime/helpers/arrayWithHoles.js","../../node_modules/@babel/runtime/helpers/iterableToArrayLimit.js","../../node_modules/@babel/runtime/helpers/nonIterableRest.js","../../node_modules/@babel/runtime/helpers/slicedToArray.js","../../packages/artplayer/src/subtitle.js","../../packages/artplayer/src/events/clickInit.js","../../packages/artplayer/src/events/hoverInit.js","../../packages/artplayer/src/events/mousemoveInit.js","../../packages/artplayer/node_modules/resize-observer/lib/ContentRect.js","../../packages/artplayer/node_modules/resize-observer/lib/ResizeObservation.js","../../packages/artplayer/node_modules/resize-observer/lib/ResizeObserverEntry.js","../../packages/artplayer/node_modules/resize-observer/lib/ResizeObserver.js","../../packages/artplayer/src/events/reLine truncated
|
||||
{"version":3,"file":"artplayer.js","sources":["../../node_modules/@babel/runtime/helpers/classCallCheck.js","../../node_modules/@babel/runtime/helpers/createClass.js","../../node_modules/@babel/runtime/helpers/typeof.js","../../node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/@babel/runtime/helpers/inherits.js","../../packages/artplayer/node_modules/tiny-emitter/index.js","../../packages/artplayer/node_modules/option-validator/dist/option-validator.js","../../node_modules/@babel/runtime/helpers/defineProperty.js","../../node_modules/@babel/runtime/helpers/isNativeFunction.js","../../node_modules/@babel/runtime/helpers/construct.js","../../node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../packages/artplayer/src/utils/index.js","../../packages/artplayer/src/scheme/validElement.js","../../packages/artplayer/src/scheme/index.js","../../packages/artplayer/src/config/mimeCodec.js","../../packages/artplayer/src/config/mse.js","../../packages/artplayer/src/config/video.js","../../packages/artplayer/src/config/index.js","../../packages/artplayer/src/whitelist.js","../../packages/artplayer/src/template.js","../../packages/artplayer/src/i18n.js","../../packages/artplayer/src/player/attachUrlMix.js","../../packages/artplayer/src/player/attrInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/playMix.js","../../packages/artplayer/src/player/pauseMin.js","../../packages/artplayer/src/player/toggleMix.js","../../packages/artplayer/src/player/seekMix.js","../../packages/artplayer/src/player/volumeMix.js","../../packages/artplayer/src/player/currentTimeMix.js","../../packages/artplayer/src/player/durationMix.js","../../packages/artplayer/src/player/switchQualityMix.js","../../packages/artplayer/src/player/playbackRateMix.js","../../packages/artplayer/src/player/aspectRatioMix.js","../../packages/artplayer/src/player/screenshotMix.js","../../packages/artplayer/node_modules/screenfull/dist/screenfull.js","../../packages/artplayer/src/player/fullscreenMix.js","../../packages/artplayer/src/player/fullscreenWebMix.js","../../packages/artplayer/node_modules/get-size/get-size.js","../../packages/artplayer/node_modules/ev-emitter/ev-emitter.js","../../packages/artplayer/node_modules/unipointer/unipointer.js","../../packages/artplayer/node_modules/unidragger/unidragger.js","../../packages/artplayer/node_modules/draggabilly/draggabilly.js","../../packages/artplayer/src/player/pipMix.js","../../packages/artplayer/src/player/loadedMix.js","../../packages/artplayer/src/player/playedMix.js","../../packages/artplayer/src/player/playingMix.js","../../packages/artplayer/src/player/autoSizeMix.js","../../packages/artplayer/src/player/flipMix.js","../../packages/artplayer/src/player/index.js","../../packages/artplayer/src/utils/component.js","../../node_modules/@babel/runtime/helpers/objectSpread.js","../../packages/artplayer/src/icons/index.js","../../packages/artplayer/src/controls/fullscreen.js","../../packages/artplayer/src/controls/fullscreenWeb.js","../../packages/artplayer/src/controls/pip.js","../../packages/artplayer/src/controls/playAndPause.js","../../packages/artplayer/src/controls/progress.js","../../packages/artplayer/src/controls/subtitle.js","../../packages/artplayer/src/controls/time.js","../../packages/artplayer/src/controls/volume.js","../../packages/artplayer/src/controls/setting.js","../../packages/artplayer/src/controls/thumbnails.js","../../packages/artplayer/src/controls/screenshot.js","../../packages/artplayer/src/controls/quality.js","../../packages/artplayer/src/controls/index.js","../../packages/artplayer/src/contextmenu/playbackRate.js","../../packages/artplayer/src/contextmenu/aspectRatio.js","../../packages/artplayer/src/contextmenu/info.js","../../packages/artplayer/src/contextmenu/version.js","../../packages/artplayer/src/contextmenu/close.js","../../packages/artplayer/src/contextmenu/index.js","../../packages/artplayer/src/info.js","../../node_modules/@babel/runtime/helpers/arrayWithHoles.js","../../node_modules/@babel/runtime/helpers/iterableToArrayLimit.js","../../node_modules/@babel/runtime/helpers/nonIterableRest.js","../../node_modules/@babel/runtime/helpers/slicedToArray.js","../../packages/artplayer/src/subtitle.js","../../packages/artplayer/src/events/clickInit.js","../../packages/artplayer/src/events/hoverInit.js","../../packages/artplayer/src/events/mousemoveInit.js","../../packages/artplayer/node_modules/resize-observer/lib/ContentRect.js","../../packages/artplayer/node_modules/resize-observer/lib/ResizeObservation.js","../../packages/artplayer/node_modules/resize-observer/lib/ResizeObserverEntry.js","../../packages/artplayer/node_modules/resize-observer/lib/ResizeObserver.js","../../packages/artplayer/src/events/reLine truncated
|
||||
@@ -0,0 +1,9 @@
|
||||
node_modules
|
||||
.DS_Store
|
||||
yarn.lock
|
||||
package-lock.json
|
||||
test
|
||||
coverage
|
||||
.nyc_output
|
||||
.cache
|
||||
docs
|
||||
@@ -0,0 +1 @@
|
||||
package-lock=false
|
||||
@@ -0,0 +1,49 @@
|
||||
# artplayer-plugin-gif
|
||||
|
||||
Backlight plugin for ArtPlayer
|
||||
|
||||
## Demo
|
||||
|
||||
[Checkout the demo](https://artplayer.org/backlight/) from Github Pages
|
||||
|
||||
## Install
|
||||
|
||||
Install with `npm`
|
||||
|
||||
```
|
||||
$ npm install artplayer-plugin-backlight
|
||||
```
|
||||
|
||||
Or install with `yarn`
|
||||
|
||||
```
|
||||
$ yarn add artplayer-plugin-backlight
|
||||
```
|
||||
|
||||
```js
|
||||
import artplayerPluginBacklight from 'artplayer-plugin-backlight';
|
||||
```
|
||||
|
||||
Or umd builds are also available
|
||||
|
||||
```html
|
||||
<script src="artplayer-plugin-backlight.js"></script>
|
||||
```
|
||||
|
||||
Will expose the global variable to `window.artplayerPluginBacklight`.
|
||||
|
||||
## Usage
|
||||
|
||||
This will add a button called "GIF" in the bottom control bar.
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: 'path/to/video.mp4',
|
||||
plugins: [artplayerPluginBacklight],
|
||||
});
|
||||
```
|
||||
|
||||
## License
|
||||
|
||||
MIT © [Harvey Zack](https://sleepy.im/)
|
||||
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"name": "artplayer-plugin-backlight",
|
||||
"version": "3.1.5",
|
||||
"description": "Backlight plugin for ArtPlayer",
|
||||
"main": "dist/artplayer-plugin-backlight.js",
|
||||
"style": "dist/artplayer-plugin-backlight.css",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/zhw2590582/ArtPlayer.git"
|
||||
},
|
||||
"keywords": [
|
||||
"video",
|
||||
"player"
|
||||
],
|
||||
"author": "Harvey Zack <laozhaochaguan@gmail.com>",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/zhw2590582/ArtPlayer/issues"
|
||||
},
|
||||
"homepage": "https://github.com/zhw2590582/ArtPlayer#readme"
|
||||
}
|
||||
@@ -0,0 +1,118 @@
|
||||
function getAverageColor(img, left, top, width, height) {
|
||||
const canvas = document.createElement('canvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
ctx.drawImage(img, -left, -top);
|
||||
const imageData = ctx.getImageData(0, 0, width, height);
|
||||
const { data } = imageData;
|
||||
let r = 0;
|
||||
let g = 0;
|
||||
let b = 0;
|
||||
for (let i = 0, l = data.length; i < l; i += 4) {
|
||||
r += data[i];
|
||||
g += data[i + 1];
|
||||
b += data[i + 2];
|
||||
}
|
||||
|
||||
r = Math.floor(r / (data.length / 4));
|
||||
g = Math.floor(g / (data.length / 4));
|
||||
b = Math.floor(b / (data.length / 4));
|
||||
|
||||
return { r, g, b };
|
||||
}
|
||||
|
||||
function matrixCallback(callback) {
|
||||
const result = [];
|
||||
const x = 10;
|
||||
const y = 5;
|
||||
for (let xIndex = 0; xIndex < x; xIndex += 1) {
|
||||
for (let yIndex = 0; yIndex < y; yIndex += 1) {
|
||||
if (xIndex === 0 || xIndex === x - 1 || yIndex === 0 || yIndex === y - 1) {
|
||||
result.push(callback(xIndex, yIndex, x, y));
|
||||
}
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
function getColors($img, width, height) {
|
||||
return matrixCallback((xIndex, yIndex, x, y) => {
|
||||
return getAverageColor($img, (xIndex * width) / x, (yIndex * height) / y, width / x, height / y);
|
||||
});
|
||||
}
|
||||
|
||||
function creatMatrix(parent, width, height) {
|
||||
return matrixCallback((xIndex, yIndex, x, y) => {
|
||||
const $box = document.createElement('div');
|
||||
$box.style.position = 'absolute';
|
||||
$box.style.left = `${(xIndex * width) / x}px`;
|
||||
$box.style.top = `${(yIndex * height) / y}px`;
|
||||
$box.style.width = `${100 / x}%`;
|
||||
$box.style.height = `${100 / y}%`;
|
||||
$box.style['-webkit-transition'] = 'all .2s ease';
|
||||
$box.style.transition = 'all .2s ease';
|
||||
parent.appendChild($box);
|
||||
return {
|
||||
$box,
|
||||
left: xIndex === 0,
|
||||
right: xIndex === x - 1,
|
||||
top: yIndex === 0,
|
||||
bottom: yIndex === y - 1,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function artplayerPluginBacklight(art) {
|
||||
const { setStyles } = art.constructor.utils;
|
||||
const {
|
||||
template: { $player, $video },
|
||||
player,
|
||||
} = art;
|
||||
|
||||
const $backlight = document.createElement('div');
|
||||
$backlight.classList.add('artplayer-backlight');
|
||||
setStyles($backlight, {
|
||||
position: 'absolute',
|
||||
zIndex: 9,
|
||||
left: 0,
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
});
|
||||
|
||||
$player.insertBefore($backlight, $video);
|
||||
|
||||
art.on('firstCanplay', () => {
|
||||
const { clientWidth, clientHeight } = $video;
|
||||
const matrix = creatMatrix($backlight, clientWidth, clientHeight);
|
||||
art.on('video:timeupdate', () => {
|
||||
const dataUri = player.getScreenshotDataURL();
|
||||
const $img = document.createElement('img');
|
||||
$img.onload = () => {
|
||||
const width = $img.naturalWidth;
|
||||
const height = $img.naturalHeight;
|
||||
const colors = getColors($img, width, height);
|
||||
colors.forEach(({ r, g, b }, index) => {
|
||||
const { $box, left, right, top, bottom } = matrix[index];
|
||||
// eslint-disable-next-line no-nested-ternary
|
||||
const x = left ? '-60px' : right ? '60px' : '0';
|
||||
// eslint-disable-next-line no-nested-ternary
|
||||
const y = top ? '-60px' : bottom ? '60px' : '0';
|
||||
$box.style['-webkit-box-shadow'] = `rgb(${r}, ${g}, ${b}) ${x} ${y} 120px`;
|
||||
$box.style.boxShadow = `rgb(${r}, ${g}, ${b}) ${x} ${y} 120px`;
|
||||
});
|
||||
};
|
||||
$img.src = dataUri;
|
||||
});
|
||||
});
|
||||
|
||||
return {
|
||||
name: 'artplayerPluginBacklight',
|
||||
};
|
||||
}
|
||||
|
||||
window.artplayerPluginBacklight = artplayerPluginBacklight;
|
||||
export default artplayerPluginBacklight;
|
||||
@@ -14,7 +14,7 @@ export default function screenshot(controlOption) {
|
||||
const $screenshot = append($control, icons.screenshot);
|
||||
tooltip($screenshot, i18n.get('Screenshot'));
|
||||
proxy($screenshot, 'click', () => {
|
||||
player.screenshot();
|
||||
player.downloadScreenshot();
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
@@ -7,24 +7,28 @@ export default function screenshotMix(art, player) {
|
||||
template: { $video },
|
||||
} = art;
|
||||
|
||||
function captureFrame() {
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = $video.videoWidth;
|
||||
canvas.height = $video.videoHeight;
|
||||
canvas.getContext('2d').drawImage($video, 0, 0);
|
||||
const dataUri = canvas.toDataURL('image/png');
|
||||
downloadImage(dataUri, `${option.title || 'artplayer'}_${secondToTime($video.currentTime)}.png`);
|
||||
return dataUri;
|
||||
}
|
||||
|
||||
Object.defineProperty(player, 'screenshot', {
|
||||
Object.defineProperty(player, 'getScreenshotDataURL', {
|
||||
value: () => {
|
||||
try {
|
||||
const dataUri = captureFrame();
|
||||
art.emit('screenshot', dataUri);
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = $video.videoWidth;
|
||||
canvas.height = $video.videoHeight;
|
||||
canvas.getContext('2d').drawImage($video, 0, 0);
|
||||
return canvas.toDataURL('image/png');;
|
||||
} catch (error) {
|
||||
notice.show(error);
|
||||
console.warn(error);
|
||||
return null;
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
Object.defineProperty(player, 'downloadScreenshot', {
|
||||
value: () => {
|
||||
const dataUri = player.getScreenshotDataURL();
|
||||
if (dataUri) {
|
||||
downloadImage(dataUri, `${option.title || 'artplayer'}_${secondToTime($video.currentTime)}.png`);
|
||||
art.emit('screenshot', dataUri);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
.artplayer-video-player {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
outline: 0;
|
||||
|
||||
Reference in new issue
Block a user