mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-24 14:41:20 -08:00
添加背景模糊特效
This commit is contained in:
Harvey committed
1 parent
da69b19b63
commit
18ca81e2ed
19 files changed
+18
-292
No files matched your search
@@ -1,9 +0,0 @@
|
||||
node_modules
|
||||
.DS_Store
|
||||
yarn.lock
|
||||
package-lock.json
|
||||
test
|
||||
coverage
|
||||
.nyc_output
|
||||
.cache
|
||||
docs
|
||||
@@ -1 +0,0 @@
|
||||
package-lock=false
|
||||
@@ -1,62 +0,0 @@
|
||||
# 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`
|
||||
|
||||
```bash
|
||||
$ npm install artplayer-plugin-blur
|
||||
```
|
||||
|
||||
Or install with `yarn`
|
||||
|
||||
```bash
|
||||
$ 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/)
|
||||
@@ -1,8 +0,0 @@
|
||||
/*!
|
||||
* artplayer-plugin-blur.js v3.1.14
|
||||
* Github: https://github.com/zhw2590582/ArtPlayer#readme
|
||||
* (c) 2017-2019 Harvey Zack
|
||||
* Released under the MIT License.
|
||||
*/
|
||||
|
||||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).artplayerPluginBlur=t()}(this,function(){"use strict";"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;var e,u=(function(e,t){e.exports=function(e,r){return new Promise(function(a){var i=new Image;i.onload=function(){var e=i.naturalWidth,t=i.naturalHeight,n=document.createElement("canvas");n.style.width=e+"px",n.style.height=t+"px",n.width=e,n.height=t;var o=n.getContext("2d");o.filter="blur("+r+"px)",o.drawImage(i,-r,-r,e+2*r,t+2*r),n.toBlob(function(e){a(URL.createObjectURL(e)),i.onload=null})},i.src=e})}}(e={exports:{}},e.exports),e.exports);return function(n){var e=n.constructor.utils,o=e.errorHandle,l=e.clamp;o(CanvasRenderingContext2D&&Object.prototype.hasOwnProperty.call(CanvasRenderingContext2D.prototype,"filter"),"artplayerPluginBlur: Your browser does not support canvas blur");var s=n.player,c="";return{name:"artplayerPluginBlur",attach:function(a,e){var i=1<arguments.length&&void 0!==e?e:15;function r(){window.URL.revokeObjectURL(c),a.classList.remove("artplayer-blur-show"),a.style.visibility="hidden",a.style.opacity="0",a.style.backgroundImage="none"}function t(){var e=a.getBoundingClientRect(),t=e.left,n=e.top;a.style.backgroundImage="none",a.style.backgroundSize="".concat(s.width,"px ").concat(s.height,"px"),a.style.backgroundPosition="".concat(s.left-t,"px ").concat(s.top-n,"px");var o=s.currentTime;s.getScreenshotBlobUrl().then(function(t){u(t,l(i,0,50)).then(function(e){window.URL.revokeObjectURL(t),s.playing||o!==s.currentTime?r():(c=e,a.classList.add("artplayer-blur-show"),a.style.visibility="visible",a.style.opacity="1",a.style.backgroundImage="url(".concat(e,")"))})})}o(a instanceof Element,"The attach element is not a dom element"),a.style.backgroundRepeat="no-repeat",a.style.transition="all .2s ease",r(),n.on("video:pause",t),n.on("video:seeked",t),n.on("video:playing",r),n.on("video:seeking",r),n.on("video:timeupdate",r)}}}});
|
||||
@@ -1,27 +0,0 @@
|
||||
{
|
||||
"name": "artplayer-plugin-blur",
|
||||
"version": "3.1.14",
|
||||
"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.1"
|
||||
}
|
||||
}
|
||||
@@ -1,58 +0,0 @@
|
||||
import blurImageUrl from 'blur-image-url';
|
||||
|
||||
function artplayerPluginBlur(art) {
|
||||
const { errorHandle, clamp } = art.constructor.utils;
|
||||
errorHandle(
|
||||
CanvasRenderingContext2D && Object.prototype.hasOwnProperty.call(CanvasRenderingContext2D.prototype, 'filter'),
|
||||
'artplayerPluginBlur: Your browser does not support canvas blur',
|
||||
);
|
||||
const { player } = art;
|
||||
let blurUrlCache = '';
|
||||
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 hide() {
|
||||
window.URL.revokeObjectURL(blurUrlCache);
|
||||
$ref.classList.remove('artplayer-blur-show');
|
||||
$ref.style.visibility = 'hidden';
|
||||
$ref.style.opacity = '0';
|
||||
$ref.style.backgroundImage = 'none';
|
||||
}
|
||||
|
||||
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`;
|
||||
const time = player.currentTime;
|
||||
player.getScreenshotBlobUrl().then(screenshotBlobUrl => {
|
||||
blurImageUrl(screenshotBlobUrl, clamp(radius, 0, 50)).then(blurUrl => {
|
||||
window.URL.revokeObjectURL(screenshotBlobUrl);
|
||||
if (!player.playing && time === player.currentTime) {
|
||||
blurUrlCache = blurUrl;
|
||||
$ref.classList.add('artplayer-blur-show');
|
||||
$ref.style.visibility = 'visible';
|
||||
$ref.style.opacity = '1';
|
||||
$ref.style.backgroundImage = `url(${blurUrl})`;
|
||||
} else {
|
||||
hide();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
hide();
|
||||
art.on('video:pause', show);
|
||||
art.on('video:seeked', show);
|
||||
art.on('video:playing', hide);
|
||||
art.on('video:seeking', hide);
|
||||
art.on('video:timeupdate', hide);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default artplayerPluginBlur;
|
||||
@@ -15,7 +15,7 @@ function artplayerPluginPlaylist(list) {
|
||||
$player,
|
||||
`
|
||||
<div class="artplayer-playlist">
|
||||
<div class="artplayer-playlist-inner"></div>
|
||||
<div class="artplayer-playlist-inner artplayer-backdrop-filter"></div>
|
||||
</div>
|
||||
`,
|
||||
);
|
||||
|
||||
@@ -45,4 +45,12 @@
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
@supports ((-webkit-backdrop-filter: initial) or (backdrop-filter: initial)) {
|
||||
.artplayer-backdrop-filter {
|
||||
-webkit-backdrop-filter: saturate(180%) blur(20px);
|
||||
backdrop-filter: saturate(180%) blur(20px);
|
||||
background-color: rgba(0, 0, 0, 0.7) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -41,11 +41,11 @@ export default class Template {
|
||||
<div class="artplayer-notice-inner"></div>
|
||||
</div>
|
||||
<div class="artplayer-setting">
|
||||
<div class="artplayer-setting-inner">
|
||||
<div class="artplayer-setting-inner artplayer-backdrop-filter">
|
||||
<div class="artplayer-setting-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="artplayer-info">
|
||||
<div class="artplayer-info artplayer-backdrop-filter">
|
||||
<div class="artplayer-info-panel"></div>
|
||||
<div class="artplayer-info-close">[x]</div>
|
||||
</div>
|
||||
@@ -53,7 +53,7 @@ export default class Template {
|
||||
<div class="artplayer-pip-title"></div>
|
||||
<div class="artplayer-pip-close">×</div>
|
||||
</div>
|
||||
<div class="artplayer-contextmenu"></div>
|
||||
<div class="artplayer-contextmenu artplayer-backdrop-filter"></div>
|
||||
</div>
|
||||
`;
|
||||
this.$player = this.$container.querySelector('.artplayer-video-player');
|
||||
|
||||
Reference in new issue
Block a user