x15904151985/ArtPlayer
1
0 Fork 0
mirror of https://github.com/zhw2590582/ArtPlayer.git synced 2026-10-11 05:18:44 -08:00
Code Issues Packages Projects Releases Wiki Activity

修正模糊插件的时间差问题

Browse Source
This commit is contained in:
Harvey Zack committed 2019-05-08 12:12:43 +08:00
1 parent dac68903c5
commit 22f2b4714f
3 files changed
+44 -34
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/uncompiled/artplayer-plugin-blur.js
+23 -18
View File
@@ -60,24 +60,6 @@
$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 = 'auto';
});
});
}
function hide() {
$ref.style.visibility = 'hidden';
$ref.style.opacity = '0';
@@ -85,6 +67,29 @@
$ref.style.backgroundImage = 'none';
}
function show() {
var _$ref$getBoundingClie = $ref.getBoundingClientRect(),
left = _$ref$getBoundingClie.left,
top = _$ref$getBoundingClie.top;
var time = player.currentTime;
$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) {
if (time === player.currentTime) {
$ref.style.backgroundImage = "url(".concat(img, ")");
$ref.style.visibility = 'visible';
$ref.style.opacity = '1';
$ref.style.pointerEvents = 'auto';
} else {
hide();
}
});
});
}
hide();
art.on('video:pause', show);
art.on('video:ended', show);
docs/uncompiled/artplayer-plugin-blur.js.map
+1 -1
View File
@@ -1 +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 '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 = 'auto';\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,OAAO,GAAG,MAAM,GAAG,KAAK,CAAC;SAC1C,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,KAAL,CAAWC,gBAAX,GAA8Line truncated
{"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 '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 hide() {\n $ref.style.visibility = 'hidden';\n $ref.style.opacity = '0';\n $ref.style.pointerEvents = 'none';\n $ref.style.backgroundImage = 'none';\n }\n\n function show() {\n const { left, top } = $ref.getBoundingClientRect();\n const time = player.currentTime;\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 if (time === player.currentTime) {\n $ref.style.backgroundImage = `url(${img})`;\n $ref.style.visibility = 'visible';\n $ref.style.opacity = '1';\n $ref.style.pointerEvents = 'auto';\n } else {\n hide();\n }\n });\n });\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","hide","visibility","opacity","pointerEvents","backgroundImage","show","getBoundingClientRect","left","top","time","currentTime","backgroundSize","width","height","backgroundPosition","getScreenshotBlobUrl","then","url","blurImageUrl","img","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,OAAO,GAAG,MAAM,GAAG,KAAK,CAAC;SAC1C,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;CLine truncated
packages/artplayer-plugin-blur/src/index.js
+20 -15
View File
@@ -10,21 +10,6 @@ function artplayerPluginBlur(art) {
$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 = 'auto';
});
});
}
function hide() {
$ref.style.visibility = 'hidden';
$ref.style.opacity = '0';
@@ -32,6 +17,26 @@ function artplayerPluginBlur(art) {
$ref.style.backgroundImage = 'none';
}
function show() {
const { left, top } = $ref.getBoundingClientRect();
const time = player.currentTime;
$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 => {
if (time === player.currentTime) {
$ref.style.backgroundImage = `url(${img})`;
$ref.style.visibility = 'visible';
$ref.style.opacity = '1';
$ref.style.pointerEvents = 'auto';
} else {
hide();
}
});
});
}
hide();
art.on('video:pause', show);
art.on('video:ended', show);