优化 gif 插件

docs/gif/js/common.js

@@ -9,6 +9,7 @@
 
     console.info('Welcome, if you like it, consider star it, thank you.');
     console.info('https://github.com/zhw2590582/ArtPlayer');
+    console.warn('For web video, this plugin depends on the network, so the results are not necessarily ideal.');
 
     window.addEventListener('error', function(err) {
         console.error(err.message);

docs/uncompiled/artplayer-plugin-gif.js

@@ -42,6 +42,8 @@
 
   var objectSpread = _objectSpread;
 
+  var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
   function createCommonjsModule(fn, module) {
   	return module = { exports: {} }, fn(module, module.exports), module.exports;
   }
@@ -2719,10 +2721,49 @@
     }, typeof window !== "undefined" ? window.navigator : {});
   });
 
+  var b64toBlob = createCommonjsModule(function (module) {
+    (function (root, globalName, factory) {
+      if (module.exports) {
+        // Node:
+        module.exports = factory(); // Use module export as simulated ES6 default export:
+
+        module.exports.default = module.exports;
+      } else {
+        // Browser:
+        window[globalName] = factory();
+      }
+    })(commonjsGlobal, 'b64toBlob', function () {
+
+      return function b64toBlob(b64Data, contentType, sliceSize) {
+        contentType = contentType || '';
+        sliceSize = sliceSize || 512;
+        var byteCharacters = atob(b64Data);
+        var byteArrays = [];
+
+        for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
+          var slice = byteCharacters.slice(offset, offset + sliceSize);
+          var byteNumbers = new Array(slice.length);
+
+          for (var i = 0; i < slice.length; i++) {
+            byteNumbers[i] = slice.charCodeAt(i);
+          }
+
+          var byteArray = new Uint8Array(byteNumbers);
+          byteArrays.push(byteArray);
+        }
+
+        var blob = new Blob(byteArrays, {
+          type: contentType
+        });
+        return blob;
+      };
+    });
+  });
+
   function i18nMix(i18n) {
     i18n.update({
       'zh-cn': {
-        'Long press, gif length is between 1 second and 5 seconds': '长按，gif 长度为 1 ~ 5 秒',
+        'Long press, gif length is between 1 second and 10 seconds': '长按，gif 长度为 1 ~ 10 秒',
         'Gif time is too short': 'Gif 时间太短',
         'Start creating gif...': '开始创建 gif...',
         'Create gif successfully': '创建 gif 成功',
@@ -2730,7 +2771,7 @@
         'Release the mouse to start': '放开鼠标即可开始'
       },
       'zh-tw': {
-        'Long press, gif length is between 1 second and 5 seconds': '長按，gif 長度為 1 ~ 5 秒',
+        'Long press, gif length is between 1 second and 10 seconds': '長按，gif 長度為 1 ~ 10 秒',
         'Gif time is too short': 'Gif 時間太短',
         'Start creating gif...': '開始創建 gif...',
         'Create gif successfully': '創建 gif 成功',
@@ -2770,6 +2811,7 @@
       }
     });
     var $progress = layers['artplayer-plugin-gif-progress'].$ref;
+    var timeLimit = 10000;
     var isProcessing = false;
     var pressStartTime = 0;
     var progressTimer = null;
@@ -2791,7 +2833,7 @@
       } else if (pressTime < 1000) {
         notice.show(i18n.get('Gif time is too short'));
       } else {
-        var numFrames = Math.floor(clamp(pressTime, 1000, 5000) / 100);
+        var numFrames = Math.floor(clamp(pressTime, 1000, timeLimit) / 100);
         var videoWidth = $video.videoWidth,
             videoHeight = $video.videoHeight;
         art.plugins.artplayerPluginGif.create({
@@ -2815,7 +2857,7 @@
           cleanTimer();
           offset = player.currentTime;
           pressStartTime = new Date();
-          notice.show(i18n.get('Long press, gif length is between 1 second and 5 seconds'));
+          notice.show(i18n.get('Long press, gif length is between 1 second and 10 seconds'));
 
           (function loop() {
             progressTimer = setTimeout(function () {
@@ -2827,7 +2869,7 @@
               } else {
                 notice.show(i18n.get('Release the mouse to start'));
               }
-            }, 50);
+            }, timeLimit / 100);
           })();
         });
         proxy(document, 'mouseup', function () {
@@ -2848,18 +2890,20 @@
         loading.show();
         art.emit('artplayerPluginGif:start');
         notice.show(i18n.get('Start creating gif...'), false);
-        console.log("Start time: ".concat(config.offset || 0, "s, Frames: ").concat(config.numFrames || 10, "p, Duration: ").concat(config.numFrames / 10 || 1, "s"));
         gifshot.createGIF(objectSpread({}, config, {
           video: [$video.src],
-          crossOrigin: 'Anonymous'
+          crossOrigin: 'anonymous'
         }), function (obj) {
           if (obj.error) {
             notice.show(obj.errorMsg);
             errorHandle(false, obj.errorMsg);
           } else if (typeof callback === 'function') {
-            callback(obj.image);
+            var base64String = obj.image.split(',')[1];
+            var blob = b64toBlob(base64String, 'image/gif');
+            var blobUrl = URL.createObjectURL(blob);
             notice.show(i18n.get('Create gif successfully'));
-            art.emit('artplayerPluginGif', obj.image);
+            art.emit('artplayerPluginGif', blobUrl);
+            callback(blobUrl);
           }
 
           isProcessing = false;

packages/artplayer-plugin-gif/package.json

@@ -22,6 +22,8 @@
   },
   "homepage": "https://github.com/zhw2590582/ArtPlayer#readme",
   "dependencies": {
+    "b64-to-blob": "^1.2.19",
+    "blob-util": "^2.0.2",
     "gifshot": "^0.4.5"
   }
 }

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

@@ -1,9 +1,10 @@
 import gifshot from 'gifshot';
+import b64toBlob from 'b64-to-blob';
 
 function i18nMix(i18n) {
     i18n.update({
         'zh-cn': {
-            'Long press, gif length is between 1 second and 5 seconds': '长按，gif 长度为 1 ~ 5 秒',
+            'Long press, gif length is between 1 second and 10 seconds': '长按，gif 长度为 1 ~ 10 秒',
             'Gif time is too short': 'Gif 时间太短',
             'Start creating gif...': '开始创建 gif...',
             'Create gif successfully': '创建 gif 成功',
@@ -11,7 +12,7 @@ function i18nMix(i18n) {
             'Release the mouse to start': '放开鼠标即可开始',
         },
         'zh-tw': {
-            'Long press, gif length is between 1 second and 5 seconds': '長按，gif 長度為 1 ~ 5 秒',
+            'Long press, gif length is between 1 second and 10 seconds': '長按，gif 長度為 1 ~ 10 秒',
             'Gif time is too short': 'Gif 時間太短',
             'Start creating gif...': '開始創建 gif...',
             'Create gif successfully': '創建 gif 成功',
@@ -51,6 +52,7 @@ function artplayerPluginGif(art) {
     });
 
     const $progress = layers['artplayer-plugin-gif-progress'].$ref;
+    const timeLimit = 10000;
     let isProcessing = false;
     let pressStartTime = 0;
     let progressTimer = null;
@@ -71,7 +73,7 @@ function artplayerPluginGif(art) {
         } else if (pressTime < 1000) {
             notice.show(i18n.get('Gif time is too short'));
         } else {
-            const numFrames = Math.floor(clamp(pressTime, 1000, 5000) / 100);
+            const numFrames = Math.floor(clamp(pressTime, 1000, timeLimit) / 100);
             const { videoWidth, videoHeight } = $video;
             art.plugins.artplayerPluginGif.create(
                 {
@@ -97,7 +99,7 @@ function artplayerPluginGif(art) {
                 cleanTimer();
                 offset = player.currentTime;
                 pressStartTime = new Date();
-                notice.show(i18n.get('Long press, gif length is between 1 second and 5 seconds'));
+                notice.show(i18n.get('Long press, gif length is between 1 second and 10 seconds'));
                 (function loop() {
                     progressTimer = setTimeout(() => {
                         const width = parseInt($progress.style.width, 10);
@@ -107,7 +109,7 @@ function artplayerPluginGif(art) {
                         } else {
                             notice.show(i18n.get('Release the mouse to start'));
                         }
-                    }, 50);
+                    }, timeLimit / 100);
                 })();
             });
 
@@ -128,23 +130,24 @@ function artplayerPluginGif(art) {
             loading.show();
             art.emit('artplayerPluginGif:start');
             notice.show(i18n.get('Start creating gif...'), false);
-            console.log(`Start time: ${config.offset || 0}s, Frames: ${config.numFrames || 10}p, Duration: ${config.numFrames / 10 || 1}s`);
             gifshot.createGIF(
                 {
                     ...config,
                     video: [$video.src],
-                    crossOrigin: 'Anonymous',
+                    crossOrigin: 'anonymous',
                 },
                 obj => {
                     if (obj.error) {
                         notice.show(obj.errorMsg);
                         errorHandle(false, obj.errorMsg);
                     } else if (typeof callback === 'function') {
-                        callback(obj.image);
+                        const base64String = obj.image.split(',')[1];
+                        const blob = b64toBlob(base64String, 'image/gif');
+                        const blobUrl = URL.createObjectURL(blob);
                         notice.show(i18n.get('Create gif successfully'));
-                        art.emit('artplayerPluginGif', obj.image);
+                        art.emit('artplayerPluginGif', blobUrl);
+                        callback(blobUrl);
                     }
-
                     isProcessing = false;
                     loading.hide();
                     art.emit('artplayerPluginGif:end');