构建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,7 +17,15 @@
 
 <body>
     <div class="container">
-        <div class="artplayer"></div>
+        <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>

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);
+        });
     });
 })();

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);
+                    }
+                },
+            );
+        },
     };
 }