完成gif插件

docs/gif/css/common.css

@@ -38,12 +38,14 @@ html, body, .container {
 }
 
 .part-right .preview {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     width: 500px;
     height: 500px;
     background: #f3f3f3;
 }
 
 .part-right .preview img {
-    width: 100%;
     max-width: 100%;
 }

docs/gif/js/common.js

@@ -17,24 +17,18 @@
     var art = new Artplayer({
         container: '.artplayer',
         url: 'https://blog.zhw-island.com/assets-cdn/video/one-more-time-one-more-chance-480p.mp4',
+        title: '【新海诚动画】『秒速5センチメートル』',
         autoSize: true,
         controls: [
             {
                 name: 'preview',
                 position: 'right',
-                html: '打开'
+                html: '打开',
+                mounted: $preview => {
+                    art.plugins.localPreview.attach($preview);
+                },
             },
         ],
         plugins: [artplayerPluginGif]
     });
-
-    art.on('firstCanplay', () => {
-        var preview = document.querySelector('.art-control-preview');
-        art.plugins.localPreview.attach(preview);
-        art.plugins.artplayerPluginGif.create({}, image => {
-            var animatedImage = document.createElement('img');
-            animatedImage.src = image;
-            document.querySelector('.preview').appendChild(animatedImage);
-        });
-    });
 })();

docs/lab/js/example.js

@@ -98,8 +98,10 @@ var art = new Artplayer({
         {
             name: 'preview',
             position: 'right',
-            index: 1,
-            html: '打开'
+            html: '打开',
+            mounted: $preview => {
+                art.plugins.localPreview.attach($preview);
+            },
         },
     ],
     icons: {
@@ -108,9 +110,6 @@ var art = new Artplayer({
 });
 
 art.on('firstCanplay', () => {
-    var preview = document.querySelector('.art-control-preview');
-    art.plugins.localPreview.attach(preview);
-
     art.on('resize', $player => {
         art.controls.quality.show();
         art.controls.setting.show();

docs/uncompiled/artplayer-plugin-gif.js

@@ -2719,22 +2719,137 @@
     }, typeof window !== "undefined" ? window.navigator : {});
   });
 
+  function i18nMix(i18n) {
+    i18n.update({
+      '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，请稍等',
+        'Create gif successfully': '创建 gif 成功',
+        'There is another gif in the processing': '正有另一个 gif 在创建中'
+      },
+      '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，請稍等',
+        'Create gif successfully': '創建 gif 成功',
+        'There is another gif in the processing': '正有另一個 gif 在創建中'
+      }
+    });
+  }
+
   function artplayerPluginGif(art) {
+    var _art$constructor$util = art.constructor.utils,
+        errorHandle = _art$constructor$util.errorHandle,
+        clamp = _art$constructor$util.clamp,
+        downloadImage = _art$constructor$util.downloadImage;
+    var i18n = art.i18n,
+        notice = art.notice,
+        layers = art.layers,
+        controls = art.controls,
+        player = art.player,
+        _art$option = art.option,
+        theme = _art$option.theme,
+        title = _art$option.title,
+        proxy = art.events.proxy,
+        $video = art.template.$video;
+    i18nMix(i18n);
+    layers.add({
+      name: 'artplayer-plugin-gif-progress',
+      html: '<div class="artplayer-plugin-gif-progress"></div>',
+      style: {
+        position: 'absolute',
+        top: '0',
+        left: '0',
+        height: '3px',
+        width: '0%',
+        'background-color': theme
+      }
+    });
+    var $progress = layers['artplayer-plugin-gif-progress'].$ref;
+    var isProcessing = false;
+    var pressStartTime = 0;
+    var progressTimer = null;
+
+    function cleanTimer() {
+      $progress.style.width = '0%';
+      clearTimeout(progressTimer);
+      progressTimer = null;
+    }
+
+    function createGif() {
+      cleanTimer();
+      var pressTime = new Date() - pressStartTime;
+
+      if (isProcessing) {
+        notice.show(i18n.get('There is another gif in the processing'));
+      } else if (pressTime < 1000) {
+        notice.show(i18n.get('Gif time is too short'));
+      } else {
+        var numFrames = Math.floor(clamp(pressTime, 1000, 5000) / 100);
+        var videoWidth = $video.videoWidth,
+            videoHeight = $video.videoHeight;
+        art.plugins.artplayerPluginGif.create({
+          numFrames: numFrames,
+          gifHeight: 200,
+          gifWidth: videoWidth / videoHeight * 200
+        }, function (image) {
+          downloadImage(image, "".concat(title || 'unnamed', ".gif"));
+        });
+      }
+    }
+
+    controls.add({
+      name: 'artplayer-plugin-gif',
+      position: 'right',
+      html: 'GIF',
+      mounted: function mounted($gif) {
+        proxy($gif, 'mousedown', function () {
+          cleanTimer();
+          pressStartTime = new Date();
+          notice.show(i18n.get('Long press, gif length is between 1 second and 5 seconds'));
+
+          (function loop() {
+            progressTimer = setTimeout(function () {
+              var width = parseInt($progress.style.width, 10);
+
+              if (width <= 100) {
+                $progress.style.width = "".concat(width + 1, "%");
+                loop();
+              } else {
+                createGif();
+              }
+            }, 50);
+          })();
+        });
+        proxy($gif, 'mouseup', function () {
+          createGif();
+        });
+      }
+    });
     return {
       name: 'artplayerPluginGif',
+      isProcessing: isProcessing,
       create: function create() {
         var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
         var callback = arguments.length > 1 ? arguments[1] : undefined;
+        isProcessing = true;
+        art.emit('artplayerPluginGif:create:start');
+        notice.show("".concat(i18n.get('Start creating gif, please wait'), ": ").concat(config.numFrames / 10 || 1, " s"), false, 5000);
         gifshot.createGIF(objectSpread({}, config, {
-          video: [art.template.$video.src]
+          offset: player.currentTime,
+          video: [$video.src]
         }), function (obj) {
-          if (!obj.error) {
-            if (callback) {
-              callback(obj.image);
-            }
-          } else {
-            console.log(obj.error);
+          if (obj.error) {
+            notice.show(obj.errorMsg);
+            errorHandle(false, obj.errorMsg);
+          } else if (typeof callback === 'function') {
+            callback(obj.image);
+            notice.show(i18n.get('Create gif successfully'));
           }
+
+          isProcessing = false;
+          art.emit('artplayerPluginGif:create:end');
         });
       }
     };

docs/uncompiled/artplayer.css

@@ -1,18 +1,18 @@
-.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-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-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-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}
 .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-bottom{position:absolute;z-index:50;left:0;right:0;bottom:0;height:100px;padding:60px 10px 0;opacity:0;visibility:hidden;transition:all .2s ease-in-out;pointer-events:none;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom}.artplayer-video-player .artplayer-bottom .artplayer-progress{position:relative;pointer-events:all}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress{position:relative;height:5px;padding:1px 0;cursor:pointer}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner{position:relative;height:100%;background:hsla(0,0%,100%,.2)}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-loaded{position:absolute;z-index:10;left:0;top:0;right:0;bottom:0;height:100%;width:0;background:hsla(0,0%,100%,.4)}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-played{position:absolute;z-index:20;left:0;top:0;right:0;bottom:0;height:100%;width:0}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-highlight{position:absolute;z-index:30;left:0;top:0;right:0;bottom:0;height:0}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-highlight span{display:inline-block;position:absolute;left:0;top:0;width:7px;height:3px;background:#fff;border-radius:3px}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-indicator{display:none;position:absolute;z-index:40;top:-5px;left:-6.5px;width:13px;height:13px;border-radius:50%}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-indicator.art-show-indicator{display:block}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-tip{display:none;position:absolute;z-index:50;top:-25px;left:0;height:20px;padding:0 5px;line-height:20px;color:#fff;font-size:12px;text-align:center;background:rgba(0,0,0,.7);border-radius:3px;font-weight:700}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress:hover .art-progress-indicator,.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress:hover .art-progress-tip{display:block}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-thumbnails{display:none;position:absolute;bottom:8px;left:0;pointer-events:none;background-color:rgba(0,0,0,.7)}.artplayer-video-player .artplayer-bottom .artplayer-controls{position:relative;pointer-events:all;display:flex;align-items:center;justify-content:space-between;height:36px}.artplayer-video-player .artplayer-bottom .artplayer-controls .artplayer-controls-left,.artplayer-video-player .artplayer-bottom .artplayer-controls .artplayer-controls-right{display:flex}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control{opacity:.9;font-size:12px;height:36px;line-height:36px;cursor:pointer}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control .art-icon{display:flex;align-items:center;justify-content:center;float:left;height:36px;width:36px}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control:hover{opacity:1}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel{position:relative;float:left;width:0;height:100%;transition:margin .2s cubic-bezier(.4,0,1,1),width .2s cubic-bezier(.4,0,1,1);overflow:hidden}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle{position:absolute;top:50%;left:0;width:12px;height:12px;border-radius:12px;margin-top:-6px;background:#fff}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:before{left:-54px;background:#fff}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:after{left:6px;background:hsla(0,0%,100%,.2)}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:after,.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:before{content:"";position:absolute;display:block;top:50%;height:3px;margin-top:-2px;width:60px}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume:Line truncated
-.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-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}
+.artplayer-video-player .artplayer-bottom{position:absolute;z-index:50;left:0;right:0;bottom:0;height:100px;padding:60px 10px 0;opacity:0;visibility:hidden;transition:all .2s ease-in-out;pointer-events:none;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom}.artplayer-video-player .artplayer-bottom .artplayer-progress{position:relative;pointer-events:all}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress{position:relative;height:5px;padding:1px 0;cursor:pointer}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner{position:relative;height:100%;background:hsla(0,0%,100%,.2)}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-loaded{position:absolute;z-index:10;left:0;top:0;right:0;bottom:0;height:100%;width:0;background:hsla(0,0%,100%,.4)}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-played{position:absolute;z-index:20;left:0;top:0;right:0;bottom:0;height:100%;width:0}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-highlight{position:absolute;z-index:30;left:0;top:0;right:0;bottom:0;height:0}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-highlight span{display:inline-block;position:absolute;left:0;top:0;width:7px;height:3px;background:#fff;border-radius:3px}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-indicator{display:none;position:absolute;z-index:40;top:-5px;left:-6.5px;width:13px;height:13px;border-radius:50%}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-indicator.art-show-indicator{display:block}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-tip{display:none;position:absolute;z-index:50;top:-25px;left:0;height:20px;padding:0 5px;line-height:20px;color:#fff;font-size:12px;text-align:center;background:rgba(0,0,0,.7);border-radius:3px;font-weight:700}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress:hover .art-progress-indicator,.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress:hover .art-progress-tip{display:block}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-thumbnails{display:none;position:absolute;bottom:8px;left:0;pointer-events:none;background-color:rgba(0,0,0,.7)}.artplayer-video-player .artplayer-bottom .artplayer-controls{position:relative;pointer-events:all;display:flex;align-items:center;justify-content:space-between;height:36px}.artplayer-video-player .artplayer-bottom .artplayer-controls .artplayer-controls-left,.artplayer-video-player .artplayer-bottom .artplayer-controls .artplayer-controls-right{display:flex}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control{opacity:.9;font-size:12px;height:36px;min-width:36px;line-height:36px;text-align:center;cursor:pointer}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control .art-icon{display:flex;align-items:center;justify-content:center;float:left;height:36px;width:36px}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control:hover{opacity:1}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel{position:relative;float:left;width:0;height:100%;transition:margin .2s cubic-bezier(.4,0,1,1),width .2s cubic-bezier(.4,0,1,1);overflow:hidden}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle{position:absolute;top:50%;left:0;width:12px;height:12px;border-radius:12px;margin-top:-6px;background:#fff}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:before{left:-54px;background:#fff}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:after{left:6px;background:hsla(0,0%,100%,.2)}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:after,.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:before{content:"";position:absolute;display:block;top:50%;height:3px;margin-top:-2px;width:60px}.artplayer-video-player .artplayer-bottom .artplaLine truncated
 .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-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-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[data-aspect-ratio] video{box-sizing:content-box;-o-object-fit:fill;object-fit:fill}
 .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.artplayer-web-fullscreen{position:fixed;z-index:9999;width:100%;height:100%;left:0;top:0;right:0;bottom:0}
 .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}
 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

@@ -622,6 +622,15 @@
       type: 'text/vtt'
     }));
   }
+  function downloadImage(url, name) {
+    var elink = document.createElement('a');
+    setStyle(elink, 'display', 'none');
+    elink.href = url;
+    elink.download = name;
+    document.body.appendChild(elink);
+    elink.click();
+    document.body.removeChild(elink);
+  }
 
   var utils = /*#__PURE__*/Object.freeze({
     ArtPlayerError: ArtPlayerError,
@@ -644,7 +653,8 @@
     inverseClass: inverseClass,
     tooltip: tooltip,
     srtToVtt: srtToVtt,
-    vttToBlob: vttToBlob
+    vttToBlob: vttToBlob,
+    downloadImage: downloadImage
   });
 
   function validElement(paths, value, type) {
@@ -1501,13 +1511,7 @@
       canvas.height = $video.videoHeight;
       canvas.getContext('2d').drawImage($video, 0, 0);
       var dataUri = canvas.toDataURL('image/png');
-      var elink = document.createElement('a');
-      setStyle(elink, 'display', 'none');
-      elink.href = dataUri;
-      elink.download = "".concat(option.title || 'artplayer', "_").concat(secondToTime($video.currentTime), ".png");
-      document.body.appendChild(elink);
-      elink.click();
-      document.body.removeChild(elink);
+      downloadImage(dataUri, "".concat(option.title || 'artplayer', "_").concat(secondToTime($video.currentTime), ".png"));
       return dataUri;
     }
 

packages/artplayer-plugin-gif/README.md

@@ -1,3 +1,63 @@
 # artplayer-plugin-gif
-Gif plugin for ArtPlayer
 
+Gif plugin for ArtPlayer, use [gifshot](https://github.com/yahoo/gifshot) as a dependency
+
+## Demo
+
+[Checkout the demo](https://artplayer.org/gif/) from Github Pages
+
+## Install
+
+Install with `npm`
+
+```
+$ npm install artplayer-plugin-gif
+```
+
+Or install with `yarn`
+
+```
+$ yarn add artplayer-plugin-gif
+```
+
+```js
+import artplayerPluginGif from 'artplayer-plugin-gif';
+```
+
+Or umd builds are also available
+
+```html
+<script src="artplayer-plugin-gif"></script>
+```
+
+Will expose the global variable to `window.artplayerPluginGif`.
+
+## 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: [artplayerPluginGif],
+});
+```
+
+Or can be called via api
+
+```js
+art.plugins.artplayerPluginGif.create(
+    {
+        // some configuration
+        // https://github.com/yahoo/gifshot#options
+    },
+    function(imageUrl) {
+        console.log(imageUrl);
+    },
+);
+```
+
+## License
+
+MIT © [Harvey Zack](https://www.zhw-island.com/)

packages/artplayer-plugin-gif/src/index.js

@@ -1,22 +1,140 @@
 import gifshot from 'gifshot';
 
+function i18nMix(i18n) {
+    i18n.update({
+        '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，请稍等',
+            'Create gif successfully': '创建 gif 成功',
+            'There is another gif in the processing': '正有另一个 gif 在创建中',
+        },
+        '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，請稍等',
+            'Create gif successfully': '創建 gif 成功',
+            'There is another gif in the processing': '正有另一個 gif 在創建中',
+        },
+    });
+}
+
 function artplayerPluginGif(art) {
+    const { errorHandle, clamp, downloadImage } = art.constructor.utils;
+    const {
+        i18n,
+        notice,
+        layers,
+        controls,
+        player,
+        option: { theme, title },
+        events: { proxy },
+        template: { $video },
+    } = art;
+
+    i18nMix(i18n);
+
+    layers.add({
+        name: 'artplayer-plugin-gif-progress',
+        html: '<div class="artplayer-plugin-gif-progress"></div>',
+        style: {
+            position: 'absolute',
+            top: '0',
+            left: '0',
+            height: '3px',
+            width: '0%',
+            'background-color': theme,
+        },
+    });
+
+    const $progress = layers['artplayer-plugin-gif-progress'].$ref;
+    let isProcessing = false;
+    let pressStartTime = 0;
+    let progressTimer = null;
+
+    function cleanTimer() {
+        $progress.style.width = '0%';
+        clearTimeout(progressTimer);
+        progressTimer = null;
+    }
+
+    function createGif() {
+        cleanTimer();
+        const pressTime = new Date() - pressStartTime;
+
+        if (isProcessing) {
+            notice.show(i18n.get('There is another gif in the processing'));
+        } else if (pressTime < 1000) {
+            notice.show(i18n.get('Gif time is too short'));
+        } else {
+            const numFrames = Math.floor(clamp(pressTime, 1000, 5000) / 100);
+            const { videoWidth, videoHeight } = $video;
+            art.plugins.artplayerPluginGif.create(
+                {
+                    numFrames,
+                    gifHeight: 200,
+                    gifWidth: (videoWidth / videoHeight) * 200,
+                },
+                image => {
+                    downloadImage(image, `${title || 'unnamed'}.gif`);
+                },
+            );
+        }
+    }
+
+    controls.add({
+        name: 'artplayer-plugin-gif',
+        position: 'right',
+        html: 'GIF',
+        mounted: $gif => {
+            proxy($gif, 'mousedown', () => {
+                cleanTimer();
+                pressStartTime = new Date();
+                notice.show(i18n.get('Long press, gif length is between 1 second and 5 seconds'));
+
+                (function loop() {
+                    progressTimer = setTimeout(() => {
+                        const width = parseInt($progress.style.width, 10);
+                        if (width <= 100) {
+                            $progress.style.width = `${width + 1}%`;
+                            loop();
+                        } else {
+                            createGif();
+                        }
+                    }, 50);
+                })();
+            });
+
+            proxy($gif, 'mouseup', () => {
+                createGif();
+            });
+        },
+    });
+
     return {
         name: 'artplayerPluginGif',
+        isProcessing,
         create(config = {}, callback) {
+            isProcessing = true;
+            art.emit('artplayerPluginGif:create:start');
+            notice.show(`${i18n.get('Start creating gif, please wait')}: ${config.numFrames / 10 || 1} s`, false, 5000);
             gifshot.createGIF(
                 {
                     ...config,
-                    video: [art.template.$video.src],
+                    offset: player.currentTime,
+                    video: [$video.src],
                 },
                 obj => {
-                    if (!obj.error) {
-                        if (callback) {
-                            callback(obj.image);
-                        }
-                    } else {
-                        console.log(obj.error);
+                    if (obj.error) {
+                        notice.show(obj.errorMsg);
+                        errorHandle(false, obj.errorMsg);
+                    } else if (typeof callback === 'function') {
+                        callback(obj.image);
+                        notice.show(i18n.get('Create gif successfully'));
                     }
+
+                    isProcessing = false;
+                    art.emit('artplayerPluginGif:create:end');
                 },
             );
         },

packages/artplayer/src/player/screenshotMix.js

@@ -1,4 +1,4 @@
-import { setStyle, secondToTime } from '../utils';
+import { secondToTime, downloadImage } from '../utils';
 
 export default function screenshotMix(art, player) {
     const {
@@ -13,13 +13,7 @@ export default function screenshotMix(art, player) {
         canvas.height = $video.videoHeight;
         canvas.getContext('2d').drawImage($video, 0, 0);
         const dataUri = canvas.toDataURL('image/png');
-        const elink = document.createElement('a');
-        setStyle(elink, 'display', 'none');
-        elink.href = dataUri;
-        elink.download = `${option.title || 'artplayer'}_${secondToTime($video.currentTime)}.png`;
-        document.body.appendChild(elink);
-        elink.click();
-        document.body.removeChild(elink);
+        downloadImage(dataUri, `${option.title || 'artplayer'}_${secondToTime($video.currentTime)}.png`);
         return dataUri;
     }
 

packages/artplayer/src/style/bottom.scss

@@ -136,7 +136,9 @@
                 opacity: .9;
                 font-size: 12px;
                 height: 36px;
+                min-width: 36px;
                 line-height: 36px;
+                text-align: center;
                 cursor: pointer;
                 .art-icon {
                     display: flex;

packages/artplayer/src/utils/index.js

@@ -170,3 +170,13 @@ export function vttToBlob(vttText) {
         }),
     );
 }
+
+export function downloadImage(url, name) {
+    const elink = document.createElement('a');
+    setStyle(elink, 'display', 'none');
+    elink.href = url;
+    elink.download = name;
+    document.body.appendChild(elink);
+    elink.click();
+    document.body.removeChild(elink);
+}