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

优化gif demo

Browse Source
This commit is contained in:
Harvey Zack committed 2018-12-06 20:19:43 +08:00
1 parent 02c63e55e8
commit b42e9b99c7
8 files changed
+95 -31
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/gif/css/common.css
+33 -7
View File
@@ -11,17 +11,43 @@ body,
.part-top {
display: flex;
align-items: center;
justify-content: center;
height: 70%;
}
.part-top .artplayer {
width: 500px;
height: 500px;
}
.part-bottom {
position: relative;
height: 30%;
}
.part-left {
width: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.part-right {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.part-left .artplayer {
width: 500px;
height: 500px;
background: #fff;
}
.part-right .preview {
display: flex;
align-items: center;
justify-content: center;
width: 500px;
height: 500px;
background: #f3f3f3;
}
.part-right .preview img {
max-width: 100%;
}
docs/gif/index.html
+6 -1
View File
@@ -18,7 +18,12 @@
<body>
<div class="container">
<div class="part-top">
<div class="artplayer"></div>
<div class="part-left">
<div class="artplayer"></div>
</div>
<div class="part-right">
<div class="preview"></div>
</div>
</div>
<div class="part-bottom"></div>
</div>
docs/gif/js/common.js
+6
View File
@@ -31,4 +31,10 @@
],
plugins: [artplayerPluginGif]
});
art.on('artplayerPluginGif', image => {
var animatedImage = document.createElement('img');
animatedImage.src = image;
document.querySelector('.preview').appendChild(animatedImage);
});
})();
docs/uncompiled/artplayer-plugin-gif.js
+19 -7
View File
@@ -2724,7 +2724,7 @@
'zh-cn': {
'Long press, gif length is between 1 second and 5 seconds': '长按，gif 长度为 1 ~ 5 秒',
'Gif time is too short': 'Gif 时间太短',
'Start creating gif, please wait': '开始创建 gif，请稍等',
'Start creating gif...': '开始创建 gif...',
'Create gif successfully': '创建 gif 成功',
'There is another gif in the processing': '正有另一个 gif 在创建中',
'Release the mouse to start': '放开鼠标即可开始'
@@ -2732,7 +2732,7 @@
'zh-tw': {
'Long press, gif length is between 1 second and 5 seconds': '長按，gif 長度為 1 ~ 5 秒',
'Gif time is too short': 'Gif 時間太短',
'Start creating gif, please wait': '開始創建 gif，請稍等',
'Start creating gif...': '開始創建 gif...',
'Create gif successfully': '創建 gif 成功',
'There is another gif in the processing': '正有另一個 gif 在創建中',
'Release the mouse to start': '放開鼠標即可開始'
@@ -2744,12 +2744,14 @@
var _art$constructor$util = art.constructor.utils,
errorHandle = _art$constructor$util.errorHandle,
clamp = _art$constructor$util.clamp,
downloadImage = _art$constructor$util.downloadImage;
downloadImage = _art$constructor$util.downloadImage,
sleep = _art$constructor$util.sleep;
var i18n = art.i18n,
notice = art.notice,
layers = art.layers,
controls = art.controls,
player = art.player,
loading = art.loading,
_art$option = art.option,
theme = _art$option.theme,
title = _art$option.title,
@@ -2773,6 +2775,7 @@
var pressStartTime = 0;
var progressTimer = null;
var isPress = false;
var offset = 0;
function cleanTimer() {
$progress.style.width = '0%';
@@ -2794,10 +2797,13 @@
videoHeight = $video.videoHeight;
art.plugins.artplayerPluginGif.create({
numFrames: numFrames,
offset: Math.floor(offset),
gifHeight: 200,
gifWidth: videoWidth / videoHeight * 200
}, function (image) {
downloadImage(image, "".concat(title || 'unnamed', ".gif"));
sleep(100).then(function () {
downloadImage(image, "".concat(title || 'unnamed', ".gif"));
});
});
}
}
@@ -2810,6 +2816,7 @@
proxy($gif, 'mousedown', function () {
isPress = true;
cleanTimer();
offset = player.currentTime;
pressStartTime = new Date();
notice.show(i18n.get('Long press, gif length is between 1 second and 5 seconds'));
@@ -2830,6 +2837,7 @@
if (isPress) {
isPress = false;
createGif();
offset = 0;
}
});
}
@@ -2841,11 +2849,13 @@
var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var callback = arguments.length > 1 ? arguments[1] : undefined;
isProcessing = true;
loading.show();
art.emit('artplayerPluginGif:create:start');
notice.show("".concat(i18n.get('Start creating gif, please wait'), ": ").concat(config.numFrames / 10 || 1, " s"), false, 5000);
notice.show(i18n.get('Start creating gif...'), false, 5000);
console.log("Start time: ".concat(config.offset || 0, " s, Duration: ").concat(config.numFrames / 10 || 1));
gifshot.createGIF(objectSpread({}, config, {
offset: player.currentTime,
video: [$video.src]
video: [$video.src],
crossOrigin: 'Anonymous'
}), function (obj) {
if (obj.error) {
notice.show(obj.errorMsg);
@@ -2853,9 +2863,11 @@
} else if (typeof callback === 'function') {
callback(obj.image);
notice.show(i18n.get('Create gif successfully'));
art.emit('artplayerPluginGif', obj.image);
}
isProcessing = false;
loading.hide();
art.emit('artplayerPluginGif:create:end');
});
}
docs/uncompiled/artplayer.css
+4 -4
View File
@@ -1,6 +1,6 @@
.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-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{position:relative;width:100%;height:100%;overflow:hidden;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);touch-action:manipulation;-ms-high-contrast-adjust:none}.artplayer-video-player *{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-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%;pointer-events:none}.artplayer-video-player .artplayer-layers .art-layer{pointer-events:all}
.artplayer-video-player .artplayer-mask{display:none;position:absolute;z-index:40;left:0;top:0;right:0;bottom:0;width:100%;height:100%;pointer-events:none}.artplayer-video-player .artplayer-mask .art-playBig{position:absolute;right:30px;bottom:65px;opacity:.6}
.artplayer-video-player .artplayer-loading{display:none;position:absolute;z-index:60;left:0;top:0;right:0;bottom:0;width:100%;height:100%;align-items:center;justify-content:center;pointer-events:none}
@@ -8,11 +8,11 @@
.artplayer-video-player .artplayer-notice{display:none;font-size:14px;position:absolute;z-index:70;left:0;top:0;padding:10px;width:100%;pointer-events:none}.artplayer-video-player .artplayer-notice .artplayer-notice-inner{display:inline-block;padding:5px 10px;color:#fff;background:rgba(0,0,0,.6);border-radius:3px}
.artplayer-video-player .artplayer-contextmenu{display:none;position:absolute;z-index:110;left:0;top:0;min-width:200px;padding:5px 0;background:rgba(0,0,0,.8);border-radius:3px}.artplayer-video-player .artplayer-contextmenu .art-contextmenu{cursor:pointer;font-size:13px;display:block;color:#fff;padding:7px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 0 2px rgba(0,0,0,.5);border-bottom:1px solid hsla(0,0%,100%,.1)}.artplayer-video-player .artplayer-contextmenu .art-contextmenu a{color:#fff;text-decoration:none}.artplayer-video-player .artplayer-contextmenu .art-contextmenu span{display:inline-block;padding:0 7px}.artplayer-video-player .artplayer-contextmenu .art-contextmenu span.current,.artplayer-video-player .artplayer-contextmenu .art-contextmenu span:hover{color:#00c9ff}.artplayer-video-player .artplayer-contextmenu .art-contextmenu:hover{background-color:hsla(0,0%,100%,.1)}.artplayer-video-player .artplayer-contextmenu .art-contextmenu:last-child{border-bottom:none}
.artplayer-video-player.artplayer-hide-cursor *{cursor:none!important}
.artplayer-video-player .artplayer-setting{display:none;position:absolute;z-index:80;left:0;top:0;height:100%;width:100%;align-items:center;justify-content:center;pointer-events:none}.artplayer-video-player .artplayer-setting .artplayer-setting-inner{position:relative;width:300px;height:250px;font-size:12px;background:rgba(0,0,0,.8);border-radius:3px;pointer-events:all;overflow:hidden}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body{overflow-y:auto;width:100%;height:100%}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body .art-setting{border-bottom:1px solid hsla(0,0%,100%,.1);padding:12px 20px}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body .art-setting .art-setting-header{color:#fff;margin-bottom:10px}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body .art-setting .art-setting-body{color:hsla(0,0%,100%,.8)}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-close{position:absolute;top:0;right:0;width:20px;height:20px;line-height:20px;text-align:center;color:hsla(0,0%,100%,.8);background:rgba(0,0,0,.5);font-size:20px;cursor:pointer}.artplayer-video-player .artplayer-setting .art-setting-btns{display:flex;margin-left:-4px;margin-right:-4px}.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn{flex:1;padding:0 4px}.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn span{display:block;height:20px;line-height:20px;text-align:center;color:#fff;background:hsla(0,0%,100%,.3);border-radius:2px;cursor:pointer}.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn.current span,.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn:hover span{color:#fff;background:#00a1d6}
.artplayer-video-player .artplayer-info{display:none;position:absolute;left:10px;top:10px;z-index:90;width:350px;min-height:150px;padding:10px;color:#fff;font-size:12px;font-family:Noto Sans CJK SC DemiLight,Roboto,Segoe UI,Tahoma,Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;background:rgba(0,0,0,.7)}.artplayer-video-player .artplayer-info .art-info-item{display:flex;margin-bottom:5px}.artplayer-video-player .artplayer-info .art-info-item .art-info-title{width:100px;text-align:right}.artplayer-video-player .artplayer-info .art-info-item .art-info-content{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:5px}.artplayer-video-player .artplayer-info .artplayer-info-close{position:absolute;top:5px;right:5px;cursor:pointer}
.artplayer-video-player.artplayer-web-fullscreen{position:fixed;z-index:9999;width:100%;height:100%;left:0;top:0;right:0;bottom:0}
.artplayer-video-player .artplayer-setting{display:none;position:absolute;z-index:80;left:0;top:0;height:100%;width:100%;align-items:center;justify-content:center;pointer-events:none}.artplayer-video-player .artplayer-setting .artplayer-setting-inner{position:relative;width:300px;height:250px;font-size:12px;background:rgba(0,0,0,.8);border-radius:3px;pointer-events:all;overflow:hidden}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body{overflow-y:auto;width:100%;height:100%}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body .art-setting{border-bottom:1px solid hsla(0,0%,100%,.1);padding:12px 20px}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body .art-setting .art-setting-header{color:#fff;margin-bottom:10px}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body .art-setting .art-setting-body{color:hsla(0,0%,100%,.8)}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-close{position:absolute;top:0;right:0;width:20px;height:20px;line-height:20px;text-align:center;color:hsla(0,0%,100%,.8);background:rgba(0,0,0,.5);font-size:20px;cursor:pointer}.artplayer-video-player .artplayer-setting .art-setting-btns{display:flex;margin-left:-4px;margin-right:-4px}.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn{flex:1;padding:0 4px}.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn span{display:block;height:20px;line-height:20px;text-align:center;color:#fff;background:hsla(0,0%,100%,.3);border-radius:2px;cursor:pointer}.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn.current span,.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn:hover span{color:#fff;background:#00a1d6}
.artplayer-video-player[data-aspect-ratio] video{box-sizing:content-box;-o-object-fit:fill;object-fit:fill}
.artplayer-video-player.artplayer-web-fullscreen{position:fixed;z-index:9999;width:100%;height:100%;left:0;top:0;right:0;bottom:0}
.artplayer-video-player .artplayer-pip-header{display:none;position:absolute;z-index:100;left:0;top:0;right:0;height:35px;line-height:35px;color:#fff;background:rgba(0,0,0,.5);align-items:center;justify-content:space-between;opacity:0;visibility:hidden;transition:all .2s ease-in-out}.artplayer-video-player .artplayer-pip-header .artplayer-pip-title{flex:1;padding:0 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:move}.artplayer-video-player .artplayer-pip-header .artplayer-pip-close{width:35px;text-align:center;font-size:22px;cursor:pointer}.artplayer-video-player.is-dragging{opacity:.7}.artplayer-video-player.artplayer-pip{position:fixed;z-index:9999;right:20px;bottom:20px;width:400px;height:225px;box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 3px 6px 0 rgba(0,0,0,.2)}.artplayer-video-player.artplayer-pip .artplayer-pip-header{display:flex}.artplayer-video-player.artplayer-pip.artplayer-hover .artplayer-pip-header{opacity:1;visibility:visible}.artplayer-video-player.artplayer-pip .artplayer-mask{display:flex;align-items:center;justify-content:center}.artplayer-video-player.artplayer-pip .artplayer-mask .art-playBig{position:static}.artplayer-video-player.artplayer-pip .artplayer-bottom,.artplayer-video-player.artplayer-pip .artplayer-contextmenu,.artplayer-video-player.artplayer-pip .artplayer-danmu,.artplayer-video-player.artplayer-pip .artplayer-info,.artplayer-video-player.artplayer-pip .artplayer-layers,.artplayer-video-player.artplayer-pip .artplayer-notice,.artplayer-video-player.artplayer-pip .artplayer-setting,.artplayer-video-player.artplayer-pip .artplayer-subtitle{display:none!important}
.artplayer-video-player[data-flip=horizontal] .artplayer-video{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.artplayer-video-player[data-flip=vertical] .artplayer-video{-webkit-transform:scaleY(-1);transform:scaleY(-1)}
.artplayer-auto-size{display:flex;align-items:center;justify-content:center}
.artplayer-video-player[data-flip=horizontal] .artplayer-video{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.artplayer-video-player[data-flip=vertical] .artplayer-video{-webkit-transform:scaleY(-1);transform:scaleY(-1)}
button[data-balloon]{overflow:visible}[data-balloon]{position:relative;cursor:pointer}[data-balloon]:after{font-family:sans-serif!important;font-weight:400!important;font-style:normal!important;text-shadow:none!important;font-size:12px!important;background:rgba(17,17,17,.9);border-radius:4px;color:#fff;content:attr(data-balloon);padding:.5em 1em;white-space:nowrap}[data-balloon]:after,[data-balloon]:before{filter:alpha(opactiy=0);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";-moz-opacity:0;-khtml-opacity:0;opacity:0;pointer-events:none;transition:all .18s ease-out .18s;position:absolute;z-index:10}[data-balloon]:before{background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17,17,17,0.9)' d='M2.658 0h32.004c-6 0-11.627 12.002-16.002 12.002C14.285 12.002 8.594 0 2.658 0z'/%3E%3C/svg%3E");background-size:100% auto;width:18px;height:6px;content:""}[data-balloon]:hover:after,[data-balloon]:hover:before,[data-balloon][data-balloon-visible]:after,[data-balloon][data-balloon-visible]:before{filter:alpha(opactiy=100);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";-moz-opacity:1;-khtml-opacity:1;opacity:1;pointer-events:auto}[data-balloon].font-awesome:after{font-family:FontAwesome}[data-balloon][data-balloon-break]:after{white-space:pre}[data-balloon][data-balloon-blunt]:after,[data-balloon][data-balloon-blunt]:before{transition:none}[data-balloon][data-balloon-pos=up]:after{margin-bottom:11px}[data-balloon][data-balloon-pos=up]:after,[data-balloon][data-balloon-pos=up]:before{bottom:100%;left:50%;-webkit-transform:translate(-50%,10px);transform:translate(-50%,10px);-webkit-transform-origin:top;transform-origin:top}[data-balloon][data-balloon-pos=up]:before{margin-bottom:5px}[data-balloon][data-balloon-pos=up]:hover:after,[data-balloon][data-balloon-pos=up]:hover:before,[data-balloon][data-balloon-pos=up][data-balloon-visible]:after,[data-balloon][data-balloon-pos=up][data-balloon-visible]:before{-webkit-transform:translate(-50%);transform:translate(-50%)}[data-balloon][data-balloon-pos=up-left]:after{left:0;margin-bottom:11px}[data-balloon][data-balloon-pos=up-left]:after,[data-balloon][data-balloon-pos=up-left]:before{bottom:100%;-webkit-transform:translateY(10px);transform:translateY(10px);-webkit-transform-origin:top;transform-origin:top}[data-balloon][data-balloon-pos=up-left]:before{left:5px;margin-bottom:5px}[data-balloon][data-balloon-pos=up-left]:hover:after,[data-balloon][data-balloon-pos=up-left]:hover:before,[data-balloon][data-balloon-pos=up-left][data-balloon-visible]:after,[data-balloon][data-balloon-pos=up-left][data-balloon-visible]:before{-webkit-transform:translate(0);transform:translate(0)}[data-balloon][data-balloon-pos=up-right]:after{right:0;margin-bottom:11px}[data-balloon][data-balloon-pos=up-right]:after,[data-balloon][data-balloon-pos=up-right]:before{bottom:100%;-webkit-transform:translateY(10px);transform:translateY(10px);-webkit-transform-origin:top;transform-origin:top}[data-balloon][data-balloon-pos=up-right]:before{right:5px;margin-bottom:5px}[data-balloon][data-balloon-pos=up-right]:hover:after,[data-balloon][data-balloon-pos=up-right]:hover:before,[data-balloon][data-balloon-pos=up-right][data-balloon-visible]:after,[data-balloon][data-balloon-pos=up-right][data-balloon-visible]:before{-webkit-transform:translate(0);transform:translate(0)}[data-balloon][data-balloon-pos=down]:after{margin-top:11px}[data-balloon][data-balloon-pos=down]:after,[data-balloon][data-balloon-pos=down]:before{left:50%;top:100%;-webkit-transform:translate(-50%,-10px);transform:translate(-50%,-10px)}[data-balloon][data-balloon-pos=down]:before{background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17,17,17,0.9)' d='M33.342 12H1.338c6 0 11.627-12.002 16.002-12.002C21.715-.002 27.406 12 33.342 12z'/%3E%3C/svg%3E");background-size:100% auto;width:18px;height:6px;margin-top:5px}[data-balloon][data-balloon-pos=down]:hover:after,[data-balloon][data-balloon-pos=down]:hover:before,[data-balloon][data-balloon-pos=down][data-balloon-visible]:after,[data-balloon][data-balloon-pos=down][data-balloon-visible]:before{-webkit-transform:translate(-50%);transform:translate(-50%)}[data-balloon][data-balloon-pos=down-left]:after{left:0;margin-top:11px;top:100%;-webkit-transform:translateY(-10px);transform:translateY(-10px)}[data-balloon][data-balloon-pos=down-left]:before{background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17,17,17,0.9)' d='M33.342 12H1.338c6 0 11.627-12.002 16.002-12.002C21.715-.002 27.406 12 33.342 12z'/%3E%3C/svg%3E");background-size:100% auto;width:18px;height:6px;left:5px;margin-top:5px;top:100%;-webkit-transform:translateY(-10px);transform:translateY(-10px)}[data-balloon][data-balloon-pos=down-left]Line truncated
docs/uncompiled/artplayer.js
+5 -3
View File
@@ -627,9 +627,11 @@
setStyle(elink, 'display', 'none');
elink.href = url;
elink.download = name;
document.body.appendChild(elink);
elink.click();
document.body.removeChild(elink);
sleep(100).then(function () {
document.body.appendChild(elink);
elink.click();
document.body.removeChild(elink);
});
}
var utils = /*#__PURE__*/Object.freeze({
packages/artplayer-plugin-gif/src/index.js
+17 -6
View File
@@ -5,7 +5,7 @@ function i18nMix(i18n) {
'zh-cn': {
'Long press, gif length is between 1 second and 5 seconds': '长按，gif 长度为 1 ~ 5 秒',
'Gif time is too short': 'Gif 时间太短',
'Start creating gif, please wait': '开始创建 gif，请稍等',
'Start creating gif...': '开始创建 gif...',
'Create gif successfully': '创建 gif 成功',
'There is another gif in the processing': '正有另一个 gif 在创建中',
'Release the mouse to start': '放开鼠标即可开始',
@@ -13,7 +13,7 @@ function i18nMix(i18n) {
'zh-tw': {
'Long press, gif length is between 1 second and 5 seconds': '長按，gif 長度為 1 ~ 5 秒',
'Gif time is too short': 'Gif 時間太短',
'Start creating gif, please wait': '開始創建 gif，請稍等',
'Start creating gif...': '開始創建 gif...',
'Create gif successfully': '創建 gif 成功',
'There is another gif in the processing': '正有另一個 gif 在創建中',
'Release the mouse to start': '放開鼠標即可開始',
@@ -22,13 +22,14 @@ function i18nMix(i18n) {
}
function artplayerPluginGif(art) {
const { errorHandle, clamp, downloadImage } = art.constructor.utils;
const { errorHandle, clamp, downloadImage, sleep } = art.constructor.utils;
const {
i18n,
notice,
layers,
controls,
player,
loading,
option: { theme, title },
events: { proxy },
template: { $video },
@@ -54,6 +55,7 @@ function artplayerPluginGif(art) {
let pressStartTime = 0;
let progressTimer = null;
let isPress = false;
let offset = 0;
function cleanTimer() {
$progress.style.width = '0%';
@@ -74,11 +76,14 @@ function artplayerPluginGif(art) {
art.plugins.artplayerPluginGif.create(
{
numFrames,
offset: Math.floor(offset),
gifHeight: 200,
gifWidth: (videoWidth / videoHeight) * 200,
},
image => {
downloadImage(image, `${title || 'unnamed'}.gif`);
sleep(100).then(() => {
downloadImage(image, `${title || 'unnamed'}.gif`);
});
},
);
}
@@ -92,6 +97,7 @@ function artplayerPluginGif(art) {
proxy($gif, 'mousedown', () => {
isPress = true;
cleanTimer();
offset = player.currentTime;
pressStartTime = new Date();
notice.show(i18n.get('Long press, gif length is between 1 second and 5 seconds'));
(function loop() {
@@ -111,6 +117,7 @@ function artplayerPluginGif(art) {
if (isPress) {
isPress = false;
createGif();
offset = 0;
}
});
},
@@ -121,13 +128,15 @@ function artplayerPluginGif(art) {
isProcessing,
create(config = {}, callback) {
isProcessing = true;
loading.show();
art.emit('artplayerPluginGif:create:start');
notice.show(`${i18n.get('Start creating gif, please wait')}: ${config.numFrames / 10 || 1} s`, false, 5000);
notice.show(i18n.get('Start creating gif...'), false, 5000);
console.log(`Start time: ${config.offset || 0} s, Duration: ${config.numFrames / 10 || 1}`);
gifshot.createGIF(
{
...config,
offset: player.currentTime,
video: [$video.src],
crossOrigin: 'Anonymous',
},
obj => {
if (obj.error) {
@@ -136,9 +145,11 @@ function artplayerPluginGif(art) {
} else if (typeof callback === 'function') {
callback(obj.image);
notice.show(i18n.get('Create gif successfully'));
art.emit('artplayerPluginGif', obj.image);
}
isProcessing = false;
loading.hide();
art.emit('artplayerPluginGif:create:end');
},
);
packages/artplayer/src/utils/index.js
+5 -3
View File
@@ -176,7 +176,9 @@ export function downloadImage(url, name) {
setStyle(elink, 'display', 'none');
elink.href = url;
elink.download = name;
document.body.appendChild(elink);
elink.click();
document.body.removeChild(elink);
sleep(100).then(() => {
document.body.appendChild(elink);
elink.click();
document.body.removeChild(elink);
});
}