add gif demo

docs/assets/css/style.css

@@ -135,3 +135,29 @@ img {
     position: relative;
     height: 30%;
 }
+
+.popups {
+    display: none;
+    justify-content: center;
+    align-items: center;
+    position: fixed;
+    z-index: 999;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+}
+
+.popups .popinner {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 800px;
+    height: 600px;
+    background: #2b2b2b;
+    border-radius: 3px;
+    padding: 20px;
+}

docs/assets/example/backlight.js

@@ -1,6 +1,7 @@
+var url = 'https://zhw2590582.github.io/assets-cdn';
 var art = new Artplayer({
     container: '.artplayer-app',
-    url: 'https://zhw2590582.github.io/assets-cdn/video/ambilight.mp4',
+    url: url + '/video/one-more-time-one-more-chance-480p.mp4',
     autoSize: true,
     moreVideoAttr: {
         crossOrigin: 'anonymous',

docs/assets/example/gif.js

@@ -1 +1,42 @@
-console.log('gif');
+var url = 'https://zhw2590582.github.io/assets-cdn';
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+    title: '【新海诚动画】『秒速5センチメートル』',
+    autoSize: true,
+    moreVideoAttr: {
+        crossOrigin: 'anonymous',
+    },
+    controls: [
+        {
+            name: 'gif',
+            position: 'right',
+            html: '创建GIF',
+            mounted: $gif => {
+                art.plugins.artplayerPluginGif.attach($gif);
+            },
+            style: {
+                marginRight: '15px'
+            }
+        },
+        {
+            name: 'open',
+            position: 'right',
+            html: '本地视频',
+            mounted: $open => {
+                art.plugins.localPreview.attach($open);
+            },
+        },
+    ],
+    plugins: [artplayerPluginGif],
+});
+
+var $popups = document.querySelector('.popups');
+var $popinner = document.querySelector('.popinner');
+art.on('artplayerPluginGif', image => {
+    $popups.style.display = 'flex';
+    var animatedImage = document.createElement('img');
+    animatedImage.src = image;
+    $popinner.innerHTML = '';
+    $popinner.appendChild(animatedImage);
+});

docs/assets/js/common.js

@@ -8,6 +8,7 @@
     var $codeMirror = document.querySelector('.codeMirrorWrap');
     var $lib = document.querySelector('.libsInput');
     var $run = document.querySelector('.run');
+    var $popups = document.querySelector('.popups');
     var loaddLib = [];
 
     consola.creat({
@@ -172,5 +173,11 @@
         initApp();
     });
 
+    $popups.addEventListener('click', function (e) {
+        if (e.target === this) {
+            this.style.display = 'none';
+        }
+    });
+    
     initApp();
 })();