add gif demo

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