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

Merge pull request #24 from zhw2590582/blur

Browse Source 
add artplayer-plugin-blur
This commit is contained in:
Harvey Zack authored and GitHub committed 2019-05-08 11:20:51 +08:00
2 parents e26f43e243 950d6a3b3a
commit f82d6e85c8
12 files changed
+1714 -1418
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

README.md
+2 -1
View File
@@ -35,8 +35,9 @@
| [artplayer-plugin-gif](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-plugin-gif) | Gif plugin for ArtPlayer | [demo](https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-plugin-gif.js&example=gif) | | [artplayer-plugin-gif](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-plugin-gif) | Gif plugin for ArtPlayer | [demo](https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-plugin-gif.js&example=gif) |
| [artplayer-plugin-backlight](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-plugin-backlight) | Backlight plugin for ArtPlayer | [demo](https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-plugin-backlight.js&example=backlight) | | [artplayer-plugin-backlight](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-plugin-backlight) | Backlight plugin for ArtPlayer | [demo](https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-plugin-backlight.js&example=backlight) |
| [artplayer-plugin-playlist](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-plugin-playlist) | Playlist plugin for ArtPlayer | [demo](https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-plugin-playlist.js%0A.%2Funcompiled%2Fartplayer-plugin-playlist.css&example=playlist) | | [artplayer-plugin-playlist](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-plugin-playlist) | Playlist plugin for ArtPlayer | [demo](https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-plugin-playlist.js%0A.%2Funcompiled%2Fartplayer-plugin-playlist.css&example=playlist) |
| [artplayer-plugin-blur](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-plugin-blur) | Blur plugin for ArtPlayer | [demo](https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-plugin-blur.js&example=blur) |
| [artplayer-tool-thumbnail](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-tool-thumbnail) | Thumbnail tool for ArtPlayer | [demo](https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-tool-thumbnail.js&example=thumbnail) | | [artplayer-tool-thumbnail](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-tool-thumbnail) | Thumbnail tool for ArtPlayer | [demo](https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-tool-thumbnail.js&example=thumbnail) |
| [artplayer-tool-github](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-tool-github) | Github api tool for ArtPlayer | [demo](https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-tool-github.js%0A.%2Funcompiled%2Fartplayer-plugin-danmuku.js&example=github) | | [artplayer-tool-github](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-tool-github) | Github api tool for ArtPlayer | [demo](https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-tool-github.js%0A.%2Funcompiled%2Fartplayer-plugin-danmuku.js&example=github) | |
| [artplayer-react](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-react) | React Component for Artplayer | [demo](https://codesandbox.io/s/n74859y9rl) | | [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) | | [artplayer-vue](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-vue) | Vue Component for Artplayer | [demo](https://codesandbox.io/s/6z76lm109n) |
docs/assets/example/blur.js
+25
View File
@@ -0,0 +1,25 @@
var url = 'https://zhw2590582.github.io/assets-cdn';
var art = new Artplayer({
container: '.artplayer-app',
url: url + '/video/you-name.mp4',
autoSize: true,
moreVideoAttr: {
crossOrigin: 'anonymous',
},
layers: [
{
style: {
position: 'absolute',
top: '50%',
left: '50%',
width: '200px',
height: '200px',
margin: '-100px 0 0 -100px',
},
mounted($layer) {
art.plugins.artplayerPluginBlur.attach($layer);
},
},
],
plugins: [artplayerPluginBlur],
});
docs/index.html
+110 -91
View File
@@ -1,101 +1,120 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="UTF-8" />
<title>Artplayer.js</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="keywords" content="artplayer, player, js, html5, video" />
<meta name="description" content="ArtPlayer is a modern HTML5 video player" />
<link rel="shortcut icon" href="./assets/img/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="./assets/css/normalize.css" />
<link rel="stylesheet" href="./assets/css/codemirror.css" />
<link rel="stylesheet" href="./assets/css/dracula.css" />
<link rel="stylesheet" href="./assets/css/consola.css" />
<link rel="stylesheet" href="./assets/css/style.css" />
<link rel="stylesheet" href="./uncompiled/artplayer.css" />
</head>
<head> <body>
<meta charset="UTF-8" /> <section class="main">
<title>Artplayer.js</title> <div class="part-left">
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <header class="header">
<meta http-equiv="X-UA-Compatible" content="ie=edge" /> <a href="./" class="logo">Artplayer.js</a>
<meta name="keywords" content="artplayer, player, js, html5, video" /> <div class="menus">
<meta name="description" content="ArtPlayer is a modern HTML5 video player" /> <div class="item ecosystem">
<link rel="shortcut icon" href="./assets/img/favicon.ico" type="image/x-icon" /> Ecosystem
<link rel="stylesheet" href="./assets/css/normalize.css" /> <div class="sub-menu">
<link rel="stylesheet" href="./assets/css/codemirror.css" /> <ul>
<link rel="stylesheet" href="./assets/css/dracula.css" /> <li class="title">Plugins</li>
<link rel="stylesheet" href="./assets/css/consola.css" /> <li>
<link rel="stylesheet" href="./assets/css/style.css" /> <a href="./?libs=.%2Funcompiled%2Fartplayer-plugin-gif.js&example=gif"
<link rel="stylesheet" href="./uncompiled/artplayer.css" /> >artplayer-plugin-gif</a
</head> >
</li>
<body> <li>
<section class="main"> <a
<div class="part-left"> href="./?libs=.%2Funcompiled%2Fartplayer-plugin-backlight.js&example=backlight"
<header class="header"> >artplayer-plugin-backlight</a
<a href="./" class="logo">Artplayer.js</a> >
<div class="menus"> </li>
<div class="item ecosystem"> <li>
Ecosystem <a href="./?libs=.%2Funcompiled%2Fartplayer-plugin-danmuku.js&example=danmuku"
<div class="sub-menu"> >artplayer-plugin-danmuku</a
<ul> >
<li class="title">Plugins</li> </li>
<li><a <li>
href="./?libs=.%2Funcompiled%2Fartplayer-plugin-gif.js&example=gif">artplayer-plugin-gif</a> <a
</li> href="./?libs=.%2Funcompiled%2Fartplayer-plugin-playlist.js%0A.%2Funcompiled%2Fartplayer-plugin-playlist.css&example=playlist"
<li><a >artplayer-plugin-playlist</a
href="./?libs=.%2Funcompiled%2Fartplayer-plugin-backlight.js&example=backlight">artplayer-plugin-backlight</a> >
</li> </li>
<li><a <li>
href="./?libs=.%2Funcompiled%2Fartplayer-plugin-danmuku.js&example=danmuku">artplayer-plugin-danmuku</a> <a href="./?libs=.%2Funcompiled%2Fartplayer-plugin-blur.js&example=blur"
</li> >artplayer-plugin-blur</a
<li><a >
href="./?libs=.%2Funcompiled%2Fartplayer-plugin-playlist.js%0A.%2Funcompiled%2Fartplayer-plugin-playlist.css&example=playlist">artplayer-plugin-playlist</a> </li>
</li> </ul>
</ul> <ul>
<ul> <li class="title">Tools</li>
<li class="title">Tools</li> <li>
<li><a <a href="./?libs=.%2Funcompiled%2Fartplayer-tool-thumbnail.js&example=thumbnail"
href="./?libs=.%2Funcompiled%2Fartplayer-tool-thumbnail.js&example=thumbnail">artplayer-tool-thumbnail</a> >artplayer-tool-thumbnail</a
</li> >
<li><a </li>
href="./?libs=.%2Funcompiled%2Fartplayer-tool-github.js%0A.%2Funcompiled%2Fartplayer-plugin-danmuku.js&example=github">artplayer-tool-github</a> <li>
</li> <a
</ul> href="./?libs=.%2Funcompiled%2Fartplayer-tool-github.js%0A.%2Funcompiled%2Fartplayer-plugin-danmuku.js&example=github"
<ul> >artplayer-tool-github</a
<li class="title">Component</li> >
<li><a href="https://codesandbox.io/s/n74859y9rl">artplayer-react</a></li> </li>
<li><a href="https://codesandbox.io/s/6z76lm109n">artplayer-vue</a></li> </ul>
</ul> <ul>
<li class="title">Component</li>
<li><a href="https://codesandbox.io/s/n74859y9rl">artplayer-react</a></li>
<li><a href="https://codesandbox.io/s/6z76lm109n">artplayer-vue</a></li>
</ul>
</div>
</div> </div>
<a class="item" href="./document/">Document</a>
<a class="item" href="https://github.com/zhw2590582/ArtPlayer">Github</a>
</div> </div>
<a class="item" href="./document/">Document</a> <div class="run">Run Code</div>
<a class="item" href="https://github.com/zhw2590582/ArtPlayer">Github</a> </header>
<div class="libs">
<textarea
class="libsInput"
placeholder="Other dependencies, support for js and css, multiple line breaks"
spellcheck="false"
></textarea>
</div>
<div class="code">
<div class="codeMirrorWrap"></div>
</div> </div>
<div class="run">Run Code</div>
</header>
<div class="libs">
<textarea class="libsInput"
placeholder="Other dependencies, support for js and css, multiple line breaks"
spellcheck="false"></textarea>
</div> </div>
<div class="code"> <div class="part-right">
<div class="codeMirrorWrap"></div> <div class="video-wrap">
<div class="artplayer-app"></div>
</div>
<div class="console"></div>
</div> </div>
</section>
<div class="popups">
<div class="popinner"></div>
</div> </div>
<div class="part-right"> <script src="./assets/js/codemirror.js"></script>
<div class="video-wrap"> <script src="./assets/js/javascript.js"></script>
<div class="artplayer-app"></div> <script src="./assets/js/consola.js"></script>
</div> <script src="./uncompiled/artplayer.js"></script>
<div class="console"></div> <script src="./assets/js/common.js"></script>
</div> <script>
</section> var _hmt = _hmt || [];
<div class="popups"> (function() {
<div class="popinner"></div> var hm = document.createElement('script');
</div> hm.src = 'https://hm.baidu.com/hm.js?b6c9b8bafbf5fe7225160101dafbbc7d';
<script src="./assets/js/codemirror.js"></script> var s = document.getElementsByTagName('script')[0];
<script src="./assets/js/javascript.js"></script> s.parentNode.insertBefore(hm, s);
<script src="./assets/js/consola.js"></script> })();
<script src="./uncompiled/artplayer.js"></script> </script>
<script src="./assets/js/common.js"></script> </body>
<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> </html>
docs/uncompiled/artplayer-plugin-blur.js
+101
View File
@@ -0,0 +1,101 @@
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global = global || self, global.artplayerPluginBlur = factory());
}(this, function () { 'use strict';
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
function createCommonjsModule(fn, module) {
return module = { exports: {} }, fn(module, module.exports), module.exports;
}
var blurImageUrl = createCommonjsModule(function (module, exports) {
(function(window, factory) {
{
module.exports = factory();
}
})(commonjsGlobal, function() {
return function blurImageUrl(url, radius) {
return new Promise(function(resolve) {
var img = new Image();
img.onload = function() {
var w = img.naturalWidth;
var h = img.naturalHeight;
var canvas = document.createElement('canvas');
canvas.style.width = w + 'px';
canvas.style.height = h + 'px';
canvas.width = w;
canvas.height = h;
var context = canvas.getContext('2d');
context.filter = `blur(${radius}px)`;
context.drawImage(
img,
-radius,
-radius,
w + radius * 2,
h + radius * 2
);
canvas.toBlob(function(blob) {
resolve(URL.createObjectURL(blob));
img.onload = null;
});
};
img.src = url;
});
};
});
});
function artplayerPluginBlur(art) {
var _art$constructor$util = art.constructor.utils,
errorHandle = _art$constructor$util.errorHandle,
clamp = _art$constructor$util.clamp;
var player = art.player;
return {
name: 'artplayerPluginBlur',
attach: function attach($ref) {
var radius = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 15;
errorHandle($ref instanceof Element, 'The attach element is not a dom element');
$ref.style.backgroundRepeat = 'no-repeat';
$ref.style.transition = 'all .2s ease';
function show() {
var _$ref$getBoundingClie = $ref.getBoundingClientRect(),
left = _$ref$getBoundingClie.left,
top = _$ref$getBoundingClie.top;
$ref.style.backgroundImage = 'none';
$ref.style.backgroundSize = "".concat(player.width, "px ").concat(player.height, "px");
$ref.style.backgroundPosition = "".concat(player.left - left, "px ").concat(player.top - top, "px");
player.getScreenshotBlobUrl().then(function (url) {
blurImageUrl(url, clamp(radius, 0, 50)).then(function (img) {
$ref.style.backgroundImage = "url(".concat(img, ")");
$ref.style.visibility = 'visible';
$ref.style.opacity = '1';
$ref.style.pointerEvents = 'all';
});
});
}
function hide() {
$ref.style.visibility = 'hidden';
$ref.style.opacity = '0';
$ref.style.pointerEvents = 'none';
$ref.style.backgroundImage = 'none';
}
hide();
art.on('video:pause', show);
art.on('video:ended', show);
art.on('video:seeked', show);
art.on('video:playing', hide);
art.on('video:timeupdate', hide);
}
};
}
return artplayerPluginBlur;
}));
//# sourceMappingURL=artplayer-plugin-blur.js.map
docs/uncompiled/artplayer-plugin-blur.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"artplayer-plugin-blur.js","sources":["../../packages/artplayer-plugin-blur/node_modules/blur-image-url/index.js","../../packages/artplayer-plugin-blur/src/index.js"],"sourcesContent":["(function(window, factory) {\n if (typeof exports === 'object') {\n module.exports = factory();\n } else if (typeof define === 'function' && define.amd) {\n define(factory);\n } else {\n window.blurImageUrl = factory();\n }\n})(this, function() {\n return function blurImageUrl(url, radius) {\n return new Promise(function(resolve) {\n var img = new Image();\n img.onload = function() {\n var w = img.naturalWidth;\n var h = img.naturalHeight;\n var canvas = document.createElement('canvas');\n canvas.style.width = w + 'px';\n canvas.style.height = h + 'px';\n canvas.width = w;\n canvas.height = h;\n var context = canvas.getContext('2d');\n context.filter = `blur(${radius}px)`;\n context.drawImage(\n img,\n -radius,\n -radius,\n w + radius * 2,\n h + radius * 2\n );\n canvas.toBlob(function(blob) {\n resolve(URL.createObjectURL(blob));\n img.onload = null;\n });\n };\n img.src = url;\n });\n };\n});\n","import blurImageUrl from '../node_modules/blur-image-url';\n\nfunction artplayerPluginBlur(art) {\n const { errorHandle, clamp } = art.constructor.utils;\n const { player } = art;\n return {\n name: 'artplayerPluginBlur',\n attach($ref, radius = 15) {\n errorHandle($ref instanceof Element, 'The attach element is not a dom element');\n $ref.style.backgroundRepeat = 'no-repeat';\n $ref.style.transition = 'all .2s ease';\n\n function show() {\n const { left, top } = $ref.getBoundingClientRect();\n $ref.style.backgroundImage = 'none';\n $ref.style.backgroundSize = `${player.width}px ${player.height}px`;\n $ref.style.backgroundPosition = `${player.left - left}px ${player.top - top}px`;\n player.getScreenshotBlobUrl().then(url => {\n blurImageUrl(url, clamp(radius, 0, 50)).then(img => {\n $ref.style.backgroundImage = `url(${img})`;\n $ref.style.visibility = 'visible';\n $ref.style.opacity = '1';\n $ref.style.pointerEvents = 'all';\n });\n });\n }\n\n function hide() {\n $ref.style.visibility = 'hidden';\n $ref.style.opacity = '0';\n $ref.style.pointerEvents = 'none';\n $ref.style.backgroundImage = 'none';\n }\n\n hide();\n art.on('video:pause', show);\n art.on('video:ended', show);\n art.on('video:seeked', show);\n art.on('video:playing', hide);\n art.on('video:timeupdate', hide);\n },\n };\n}\n\nexport default artplayerPluginBlur;\n"],"names":["this","artplayerPluginBlur","art","constructor","utils","errorHandle","clamp","player","name","attach","$ref","radius","Element","style","backgroundRepeat","transition","show","getBoundingClientRect","left","top","backgroundImage","backgroundSize","width","height","backgroundPosition","getScreenshotBlobUrl","then","url","blurImageUrl","img","visibility","opacity","pointerEvents","hide","on"],"mappings":";;;;;;;;;;;;;CAAA,CAAC,SAAS,MAAM,EAAE,OAAO,EAAE;GACzB,AAAiC;KAC/B,cAAc,GAAG,OAAO,EAAE,CAAC;IAC5B,AAIA;EACF,EAAEA,cAAI,EAAE,WAAW;GAClB,OAAO,SAAS,YAAY,CAAC,GAAG,EAAE,MAAM,EAAE;KACxC,OAAO,IAAI,OAAO,CAAC,SAAS,OAAO,EAAE;OACnC,IAAI,GAAG,GAAG,IAAI,KAAK,EAAE,CAAC;OACtB,GAAG,CAAC,MAAM,GAAG,WAAW;SACtB,IAAI,CAAC,GAAG,GAAG,CAAC,YAAY,CAAC;SACzB,IAAI,CAAC,GAAG,GAAG,CAAC,aAAa,CAAC;SAC1B,IAAI,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;SAC9C,MAAM,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC;SAC9B,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC;SAC/B,MAAM,CAAC,KAAK,GAAG,CAAC,CAAC;SACjB,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;SAClB,IAAI,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;SACtC,OAAO,CAAC,MAAM,GAAG,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC;SACrC,OAAO,CAAC,SAAS;WACf,GAAG;WACH,CAAC,MAAM;WACP,CAAC,MAAM;WACP,CAAC,GAAG,MAAM,GAAG,CAAC;WACd,CAAC,GAAG,MAAM,GAAG,CAAC;UACf,CAAC;SACF,MAAM,CAAC,MAAM,CAAC,SAAS,IAAI,EAAE;WAC3B,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC;WACnC,GAAG,CAAC,MAAM,GAAG,IAAI,CAAC;UACnB,CAAC,CAAC;QACJ,CAAC;OACF,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC;MACf,CAAC,CAAC;IACJ,CAAC;EACH,CAAC,CAAC;;;CCnCH,SAASC,mBAAT,CAA6BC,GAA7B,EAAkC;CAAA,8BACCA,GAAG,CAACC,WAAJ,CAAgBC,KADjB;CAAA,MACtBC,WADsB,yBACtBA,WADsB;CAAA,MACTC,KADS,yBACTA,KADS;CAAA,MAEtBC,MAFsB,GAEXL,GAFW,CAEtBK,MAFsB;CAG9B,SAAO;CACHC,IAAAA,IAAI,EAAE,qBADH;CAEHC,IAAAA,MAFG,kBAEIC,IAFJ,EAEuB;CAAA,UAAbC,MAAa,uEAAJ,EAAI;CACtBN,MAAAA,WAAW,CAACK,IAAI,YAAYE,OAAjB,EAA0B,yCAA1B,CAAX;CACAF,MAAAA,IAAI,CAACG,KLine truncated
docs/uncompiled/artplayer.js
+1330 -1325
View File
File diff suppressed because it is too large. Load diff
docs/uncompiled/artplayer.js.map
+1 -1
View File
@@ -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/arrayWithoutHoles.js","../../node_modules/@babel/runtime/helpers/iterableToArray.js","../../node_modules/@babel/runtime/helpers/nonIterableSpread.js","../../node_modules/@babel/runtime/helpers/toConsumableArray.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/ArtPlayerError.js","../../packages/artplayer/src/utils/index.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/index.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/switchMix.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/rectMix.js","../../packages/artplayer/src/player/flipMix.js","../../packages/artplayer/src/player/index.js","../../packages/artplayer/src/utils/component.js","../../node_modules/@babel/runtime/helpers/defineProperty.js","../../node_modules/@babel/runtime/helpers/objectSpread.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/artpLine 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/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/node_modules/option-validator/dist/option-validator.js","../../node_modules/@babel/runtime/helpers/arrayWithoutHoles.js","../../node_modules/@babel/runtime/helpers/iterableToArray.js","../../node_modules/@babel/runtime/helpers/nonIterableSpread.js","../../node_modules/@babel/runtime/helpers/toConsumableArray.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/ArtPlayerError.js","../../packages/artplayer/src/utils/index.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/index.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/switchMix.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/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/rectMix.js","../../packages/artplayer/src/player/flipMix.js","../../packages/artplayer/src/player/index.js","../../packages/artplayer/src/utils/component.js","../../node_modules/@babel/runtime/helpers/defineProperty.js","../../node_modules/@babel/runtime/helpers/objectSpread.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/artpLine truncated
packages/artplayer-plugin-blur/.npmignore
+9
View File
@@ -0,0 +1,9 @@
node_modules
.DS_Store
yarn.lock
package-lock.json
test
coverage
.nyc_output
.cache
docs
packages/artplayer-plugin-blur/.npmrc
+1
View File
@@ -0,0 +1 @@
package-lock=false
packages/artplayer-plugin-blur/README.md
+62
View File
@@ -0,0 +1,62 @@
# artplayer-plugin-blur
Blur plugin for ArtPlayer
## Demo
[Checkout the demo](https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-plugin-blur.js&example=blur) from Github Pages
## Install
Install with `npm`
```
$ npm install artplayer-plugin-blur
```
Or install with `yarn`
```
$ yarn add artplayer-plugin-blur
```
```js
import artplayerPluginBlur from 'artplayer-plugin-blur';
```
Or umd builds are also available
```html
<script src="artplayer-plugin-blur.js"></script>
```
Will expose the global variable to `window.artplayerPluginBlur`.
## Usage
```js
var art = new Artplayer({
container: '.artplayer-app',
url: 'path/to/video.mp4',
layers: [
{
style: {
position: 'absolute',
top: '50%',
left: '50%',
width: '200px',
height: '200px',
margin: '-100px 0 0 -100px',
},
mounted($layer) {
art.plugins.artplayerPluginBlur.attach($layer);
},
},
],
plugins: [artplayerPluginBlur],
});
```
## License
MIT © [Harvey Zack](https://sleepy.im/)
packages/artplayer-plugin-blur/package.json
+27
View File
@@ -0,0 +1,27 @@
{
"name": "artplayer-plugin-blur",
"version": "3.1.8",
"expose": "artplayerPluginBlur",
"description": "Blur plugin for ArtPlayer",
"main": "dist/artplayer-tool-blur.js",
"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",
"dependencies": {
"blur-image-url": "^1.0.0"
}
}
packages/artplayer-plugin-blur/src/index.js
+45
View File
@@ -0,0 +1,45 @@
import blurImageUrl from '../node_modules/blur-image-url';
function artplayerPluginBlur(art) {
const { errorHandle, clamp } = art.constructor.utils;
const { player } = art;
return {
name: 'artplayerPluginBlur',
attach($ref, radius = 15) {
errorHandle($ref instanceof Element, 'The attach element is not a dom element');
$ref.style.backgroundRepeat = 'no-repeat';
$ref.style.transition = 'all .2s ease';
function show() {
const { left, top } = $ref.getBoundingClientRect();
$ref.style.backgroundImage = 'none';
$ref.style.backgroundSize = `${player.width}px ${player.height}px`;
$ref.style.backgroundPosition = `${player.left - left}px ${player.top - top}px`;
player.getScreenshotBlobUrl().then(url => {
blurImageUrl(url, clamp(radius, 0, 50)).then(img => {
$ref.style.backgroundImage = `url(${img})`;
$ref.style.visibility = 'visible';
$ref.style.opacity = '1';
$ref.style.pointerEvents = 'all';
});
});
}
function hide() {
$ref.style.visibility = 'hidden';
$ref.style.opacity = '0';
$ref.style.pointerEvents = 'none';
$ref.style.backgroundImage = 'none';
}
hide();
art.on('video:pause', show);
art.on('video:ended', show);
art.on('video:seeked', show);
art.on('video:playing', hide);
art.on('video:timeupdate', hide);
},
};
}
export default artplayerPluginBlur;