构建demo

docs/gif/css/common.css

@@ -2,9 +2,48 @@ html, body, .container {
     height: 100%;
 }
 
-.artplayer {
-    width: 800px;
+.container {
+    display: flex;
+    flex-direction: column;
+}
+
+.part-top {
+    display: flex;
+    height: 70%;
+}
+
+.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;
-    margin: 20px auto 0;
     background: #fff;
 }
+
+.part-right .preview {
+    width: 500px;
+    height: 500px;
+    background: #f3f3f3;
+}
+
+.part-right .preview img {
+    width: 100%;
+    max-width: 100%;
+}

docs/gif/index.html

@@ -17,8 +17,16 @@
 
 <body>
     <div class="container">
+        <div class="part-top">
+            <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>
     <script src="./js/consola.js"></script>
     <script src="../uncompiled/artplayer.js"></script>
     <script src="../uncompiled/artplayer-plugin-gif.js"></script>

docs/gif/js/common.js

@@ -2,7 +2,8 @@
 
 (function() {
     consola.creat({
-        target: 'body',
+        target: '.part-bottom',
+        size: '100%',
         zIndex: 99,
     });
 
@@ -30,5 +31,10 @@
     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/uncompiled/artplayer-plugin-gif.js

@@ -4,6 +4,44 @@
   (factory((global['artplayer-plugin-gif'] = {})));
 }(this, (function (exports) { 'use strict';
 
+  function _defineProperty(obj, key, value) {
+    if (key in obj) {
+      Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+      });
+    } else {
+      obj[key] = value;
+    }
+
+    return obj;
+  }
+
+  var defineProperty = _defineProperty;
+
+  function _objectSpread(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i] != null ? arguments[i] : {};
+      var ownKeys = Object.keys(source);
+
+      if (typeof Object.getOwnPropertySymbols === 'function') {
+        ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
+          return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+        }));
+      }
+
+      ownKeys.forEach(function (key) {
+        defineProperty(target, key, source[key]);
+      });
+    }
+
+    return target;
+  }
+
+  var objectSpread = _objectSpread;
+
   function createCommonjsModule(fn, module) {
   	return module = { exports: {} }, fn(module, module.exports), module.exports;
   }
@@ -2682,9 +2720,23 @@
   });
 
   function artplayerPluginGif(art) {
-	  console.log(gifshot);
     return {
-	    name: 'artplayerPluginGif'
+      name: 'artplayerPluginGif',
+      create: function create() {
+        var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+        var callback = arguments.length > 1 ? arguments[1] : undefined;
+        gifshot.createGIF(objectSpread({}, config, {
+          video: [art.template.$video.src]
+        }), function (obj) {
+          if (!obj.error) {
+            if (callback) {
+              callback(obj.image);
+            }
+          } else {
+            console.log(obj.error);
+          }
+        });
+      }
     };
   }
 

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

@@ -1,9 +1,25 @@
 import gifshot from 'gifshot';
 
 function artplayerPluginGif(art) {
-    console.log(gifshot);
     return {
         name: 'artplayerPluginGif',
+        create(config = {}, callback) {
+            gifshot.createGIF(
+                {
+                    ...config,
+                    video: [art.template.$video.src],
+                },
+                obj => {
+                    if (!obj.error) {
+                        if (callback) {
+                            callback(obj.image);
+                        }
+                    } else {
+                        console.log(obj.error);
+                    }
+                },
+            );
+        },
     };
 }