update artplayer-tool-thumbnail

docs/assets/example/thumbnail.js

@@ -9,7 +9,6 @@ var $artplayer = document.querySelector('.artplayer-app');
 $artplayer.innerHTML = 'Drop video file here or click to upload.';
 var thumbnail = new ArtplayerToolThumbnail({
     fileInput: $artplayer,
-    delay: 300, // 延迟
     number: 60, // 数量
     width: 160, // 宽度
     height: 90, // 高度

docs/uncompiled/artplayer-tool-thumbnail.js

@@ -2,7 +2,7 @@
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
   typeof define === 'function' && define.amd ? define(factory) :
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.ArtplayerToolThumbnail = factory());
-}(this, (function () { 'use strict';
+})(this, (function () { 'use strict';
 
   function _classCallCheck(instance, Constructor) {
     if (!(instance instanceof Constructor)) {
@@ -10,8 +10,6 @@
     }
   }
 
-  var classCallCheck = _classCallCheck;
-
   function _defineProperties(target, props) {
     for (var i = 0; i < props.length; i++) {
       var descriptor = props[i];
@@ -28,8 +26,6 @@
     return Constructor;
   }
 
-  var createClass = _createClass;
-
   function _assertThisInitialized(self) {
     if (self === void 0) {
       throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
@@ -38,15 +34,8 @@
     return self;
   }
 
-  var assertThisInitialized = _assertThisInitialized;
-
-  function createCommonjsModule(fn, module) {
-  	return module = { exports: {} }, fn(module, module.exports), module.exports;
-  }
-
-  var setPrototypeOf = createCommonjsModule(function (module) {
   function _setPrototypeOf(o, p) {
-    module.exports = _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
       o.__proto__ = p;
       return o;
     };
@@ -54,9 +43,6 @@
     return _setPrototypeOf(o, p);
   }
 
-  module.exports = _setPrototypeOf;
-  });
-
   function _inherits(subClass, superClass) {
     if (typeof superClass !== "function" && superClass !== null) {
       throw new TypeError("Super expression must either be null or a function");
@@ -69,21 +55,18 @@
         configurable: true
       }
     });
-    if (superClass) setPrototypeOf(subClass, superClass);
+    if (superClass) _setPrototypeOf(subClass, superClass);
   }
 
-  var inherits = _inherits;
-
-  var _typeof_1 = createCommonjsModule(function (module) {
   function _typeof(obj) {
     "@babel/helpers - typeof";
 
     if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-      module.exports = _typeof = function _typeof(obj) {
+      _typeof = function _typeof(obj) {
         return typeof obj;
       };
     } else {
-      module.exports = _typeof = function _typeof(obj) {
+      _typeof = function _typeof(obj) {
         return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
       };
     }
@@ -91,29 +74,24 @@
     return _typeof(obj);
   }
 
-  module.exports = _typeof;
-  });
-
   function _possibleConstructorReturn(self, call) {
-    if (call && (_typeof_1(call) === "object" || typeof call === "function")) {
+    if (call && (_typeof(call) === "object" || typeof call === "function")) {
       return call;
+    } else if (call !== void 0) {
+      throw new TypeError("Derived constructors may only return object or undefined");
     }
 
-    return assertThisInitialized(self);
+    return _assertThisInitialized(self);
   }
 
-  var possibleConstructorReturn = _possibleConstructorReturn;
-
-  var getPrototypeOf = createCommonjsModule(function (module) {
   function _getPrototypeOf(o) {
-    module.exports = _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+    _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
       return o.__proto__ || Object.getPrototypeOf(o);
     };
     return _getPrototypeOf(o);
   }
 
-  module.exports = _getPrototypeOf;
-  });
+  var tinyEmitter = {exports: {}};
 
   function E () {
     // Keep this empty so it's easier to inherit from
@@ -179,9 +157,10 @@
     }
   };
 
-  var tinyEmitter = E;
-  var TinyEmitter = E;
-  tinyEmitter.TinyEmitter = TinyEmitter;
+  tinyEmitter.exports = E;
+  tinyEmitter.exports.TinyEmitter = E;
+
+  var Emitter = tinyEmitter.exports;
 
   function sleep(ms) {
     return new Promise(function (resolve) {
@@ -202,12 +181,12 @@
     return Math.max(Math.min(num, Math.max(a, b)), Math.min(a, b));
   }
 
-  function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; }
+  function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
-  function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+  function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
   var ArtplayerToolThumbnail = /*#__PURE__*/function (_Emitter) {
-    inherits(ArtplayerToolThumbnail, _Emitter);
+    _inherits(ArtplayerToolThumbnail, _Emitter);
 
     var _super = _createSuper(ArtplayerToolThumbnail);
 
@@ -216,7 +195,7 @@
 
       var option = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
-      classCallCheck(this, ArtplayerToolThumbnail);
+      _classCallCheck(this, ArtplayerToolThumbnail);
 
       _this = _super.call(this);
       _this.processing = false;
@@ -226,8 +205,8 @@
 
       _this.video = ArtplayerToolThumbnail.creatVideo();
       _this.duration = 0;
-      _this.inputChange = _this.inputChange.bind(assertThisInitialized(_this));
-      _this.ondrop = _this.ondrop.bind(assertThisInitialized(_this));
+      _this.inputChange = _this.inputChange.bind(_assertThisInitialized(_this));
+      _this.ondrop = _this.ondrop.bind(_assertThisInitialized(_this));
 
       _this.option.fileInput.addEventListener('change', _this.inputChange);
 
@@ -238,11 +217,11 @@
       return _this;
     }
 
-    createClass(ArtplayerToolThumbnail, [{
+    _createClass(ArtplayerToolThumbnail, [{
       key: "ondrop",
-      value: function ondrop(e) {
-        e.preventDefault();
-        var file = e.dataTransfer.files[0];
+      value: function ondrop(event) {
+        event.preventDefault();
+        var file = event.dataTransfer.files[0];
         this.loadVideo(file);
       }
     }, {
@@ -254,7 +233,6 @@
         this.option = Object.assign({}, this.option, option);
         var _this$option = this.option,
             fileInput = _this$option.fileInput,
-            delay = _this$option.delay,
             number = _this$option.number,
             width = _this$option.width,
             height = _this$option.height,
@@ -277,10 +255,9 @@
           this.option.fileInput = newFileInput;
         }
 
-        ['delay', 'number', 'width', 'height', 'column', 'begin', 'end'].forEach(function (item) {
+        ['number', 'width', 'height', 'column', 'begin', 'end'].forEach(function (item) {
           _this2.errorHandle(typeof _this2.option[item] === 'number', "The '".concat(item, "' is not a number"));
         });
-        this.option.delay = clamp(delay, 10, 1000);
         this.option.number = clamp(number, 10, 1000);
         this.option.width = clamp(width, 10, 1000);
         this.option.height = clamp(height, 10, 1000);
@@ -289,17 +266,14 @@
       }
     }, {
       key: "inputChange",
-      value: function inputChange() {
+      value: function inputChange(event) {
         var file = this.option.fileInput.files[0];
         this.loadVideo(file);
+        event.target.value = '';
       }
     }, {
       key: "loadVideo",
       value: function loadVideo(file) {
-        var _this3 = this;
-
-        var delay = this.option.delay;
-
         if (file) {
           var canPlayType = this.video.canPlayType(file.type);
           this.errorHandle(canPlayType === 'maybe' || canPlayType === 'probably', "Playback of this file format is not supported: ".concat(file.type));
@@ -308,26 +282,21 @@
           this.file = file;
           this.emit('file', this.file);
           this.video.src = videoUrl;
-          sleep(delay).then(function () {
-            _this3.emit('video', _this3.video);
-          }).catch(function (err) {
-            _this3.emit('error', err.message);
-
-            throw err;
-          });
+          this.emit('video', this.video);
         }
       }
     }, {
       key: "start",
       value: function start() {
-        var _this4 = this;
+        var _this3 = this;
 
-        if (!this.video.duration) return sleep(1000).then(this.start);
+        if (!this.video.duration) return sleep(1000).then(function () {
+          return _this3.start();
+        });
         var _this$option2 = this.option,
             width = _this$option2.width,
             height = _this$option2.height,
             number = _this$option2.number,
-            delay = _this$option2.delay,
             begin = _this$option2.begin,
             end = _this$option2.end;
         this.option.begin = clamp(begin, 0, this.video.duration);
@@ -344,44 +313,36 @@
         this.emit('canvas', canvas);
         var promiseList = screenshotDate.map(function (item, index) {
           return function () {
-            _this4.video.currentTime = item.time;
             return new Promise(function (resolve) {
-              sleep(delay).then(function () {
-                context2D.drawImage(_this4.video, item.x, item.y, width, height);
+              _this3.video.oncanplay = function () {
+                context2D.drawImage(_this3.video, item.x, item.y, width, height);
                 canvas.toBlob(function (blob) {
-                  if (_this4.thumbnailUrl) {
-                    URL.revokeObjectURL(_this4.thumbnailUrl);
+                  if (_this3.thumbnailUrl) {
+                    URL.revokeObjectURL(_this3.thumbnailUrl);
                   }
 
-                  _this4.thumbnailUrl = URL.createObjectURL(blob);
+                  _this3.thumbnailUrl = URL.createObjectURL(blob);
 
-                  _this4.emit('update', _this4.thumbnailUrl, (index + 1) / number);
+                  _this3.emit('update', _this3.thumbnailUrl, (index + 1) / number);
 
+                  _this3.video.oncanplay = null;
                   resolve();
                 });
-              }).catch(function (err) {
-                throw err;
-              });
+              };
+
+              _this3.video.currentTime = item.time;
             });
           };
         });
         this.processing = true;
         return runPromisesInSeries(promiseList).then(function () {
-          return sleep(delay * 2).then(function () {
-            _this4.processing = false;
+          _this3.processing = false;
 
-            _this4.emit('done');
-          }).catch(function (err) {
-            _this4.processing = false;
-
-            _this4.emit('error', err.message);
-
-            throw err;
-          });
+          _this3.emit('done');
         }).catch(function (err) {
-          _this4.processing = false;
+          _this3.processing = false;
 
-          _this4.emit('error', err.message);
+          _this3.emit('error', err.message);
 
           throw err;
         });
@@ -472,9 +433,21 @@
         this.emit('destroy');
       }
     }], [{
+      key: "DEFAULTS",
+      get: function get() {
+        return {
+          number: 60,
+          width: 160,
+          height: 90,
+          column: 10,
+          begin: 0,
+          end: NaN
+        };
+      }
+    }, {
       key: "ondragover",
-      value: function ondragover(e) {
-        e.preventDefault();
+      value: function ondragover(event) {
+        event.preventDefault();
       }
     }, {
       key: "creatVideo",
@@ -488,25 +461,12 @@
         document.body.appendChild(video);
         return video;
       }
-    }, {
-      key: "DEFAULTS",
-      get: function get() {
-        return {
-          delay: 300,
-          number: 60,
-          width: 160,
-          height: 90,
-          column: 10,
-          begin: 0,
-          end: NaN
-        };
-      }
     }]);
 
     return ArtplayerToolThumbnail;
-  }(tinyEmitter);
+  }(Emitter);
 
   return ArtplayerToolThumbnail;
 
-})));
+}));
 //# sourceMappingURL=artplayer-tool-thumbnail.js.map

docs/uncompiled/artplayer-tool-thumbnail.js.map

@@ -1 +1 @@
-{"version":3,"file":"artplayer-tool-thumbnail.js","sources":["../../node_modules/_@babel_runtime@7.12.5@@babel/runtime/helpers/classCallCheck.js","../../node_modules/_@babel_runtime@7.12.5@@babel/runtime/helpers/createClass.js","../../node_modules/_@babel_runtime@7.12.5@@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/_@babel_runtime@7.12.5@@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/_@babel_runtime@7.12.5@@babel/runtime/helpers/inherits.js","../../node_modules/_@babel_runtime@7.12.5@@babel/runtime/helpers/typeof.js","../../node_modules/_@babel_runtime@7.12.5@@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/_@babel_runtime@7.12.5@@babel/runtime/helpers/getPrototypeOf.js","../../packages/artplayer-tool-thumbnail/node_modules/tiny-emitter/index.js","../../packages/artplayer-tool-thumbnail/src/utils.js","../../packages/artplayer-tool-thumbnail/src/index.js"],"sourcesContent":["function _classCallCheck(instance, Constructor) {\n  if (!(instance instanceof Constructor)) {\n    throw new TypeError(\"Cannot call a class as a function\");\n  }\n}\n\nmodule.exports = _classCallCheck;","function _defineProperties(target, props) {\n  for (var i = 0; i < props.length; i++) {\n    var descriptor = props[i];\n    descriptor.enumerable = descriptor.enumerable || false;\n    descriptor.configurable = true;\n    if (\"value\" in descriptor) descriptor.writable = true;\n    Object.defineProperty(target, descriptor.key, descriptor);\n  }\n}\n\nfunction _createClass(Constructor, protoProps, staticProps) {\n  if (protoProps) _defineProperties(Constructor.prototype, protoProps);\n  if (staticProps) _defineProperties(Constructor, staticProps);\n  return Constructor;\n}\n\nmodule.exports = _createClass;","function _assertThisInitialized(self) {\n  if (self === void 0) {\n    throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n  }\n\n  return self;\n}\n\nmodule.exports = _assertThisInitialized;","function _setPrototypeOf(o, p) {\n  module.exports = _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {\n    o.__proto__ = p;\n    return o;\n  };\n\n  return _setPrototypeOf(o, p);\n}\n\nmodule.exports = _setPrototypeOf;","var setPrototypeOf = require(\"./setPrototypeOf\");\n\nfunction _inherits(subClass, superClass) {\n  if (typeof superClass !== \"function\" && superClass !== null) {\n    throw new TypeError(\"Super expression must either be null or a function\");\n  }\n\n  subClass.prototype = Object.create(superClass && superClass.prototype, {\n    constructor: {\n      value: subClass,\n      writable: true,\n      configurable: true\n    }\n  });\n  if (superClass) setPrototypeOf(subClass, superClass);\n}\n\nmodule.exports = _inherits;","function _typeof(obj) {\n  \"@babel/helpers - typeof\";\n\n  if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") {\n    module.exports = _typeof = function _typeof(obj) {\n      return typeof obj;\n    };\n  } else {\n    module.exports = _typeof = function _typeof(obj) {\n      return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj;\n    };\n  }\n\n  return _typeof(obj);\n}\n\nmodule.exports = _typeof;","var _typeof = require(\"@babel/runtime/helpers/typeof\");\n\nvar assertThisInitialized = require(\"./assertThisInitialized\");\n\nfunction _possibleConstructorReturn(self, call) {\n  if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) {\n    return call;\n  }\n\n  return assertThisInitialized(self);\n}\n\nmodule.exports = _possibleConstructorReturn;","function _getPrototypeOf(o) {\n  module.exports = _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {\n    return o.__proto__ || Object.getPrototypeOf(o);\n  };\n  return _getPrototypeOf(o);\n}\n\nmodule.exports = _getPrototypeOf;","function E () {\n  // Keep this empty so it's easier to inherit from\n  // (via https://github.com/lipsmack from https://github.com/scottcorgan/tiny-emitter/issues/3)\n}\n\nE.prototype = {\n  on: function (name, callback, ctx) {\n    var e = this.e || (this.e = {});\n\n    (e[name] || (e[name] = [])).push({\n      fn: callback,\n      ctx: ctx\n    });\n\n    return this;\n  },\n\n  once: function (name, callback, ctx) {\n    var self = this;\n    function listener () {\n      self.off(name, listener);\n      callback.apply(ctx, arguments);\n    };\n\n    listener._ = callback\n    return this.on(name, listener, ctx);\n  },\n\n  emit: function (name) {\n    var data = [].slice.call(arguments, 1);\n    var evtArr = ((this.e || (this.e = {}))[name] || []).slice();\n    var i = 0;\n    var len = evtArr.length;\n\n    for (i; i < len; i++) {\n      evtArr[i].fn.apply(evtArr[i].ctx, data);\n    }\n\n    return this;\n  },\n\n  off: function (name, callback) {\n    var e = this.e || (this.e = {});\n    var evts = e[name];\n    var liveEventsLine truncated
+{"version":3,"file":"artplayer-tool-thumbnail.js","sources":["../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/classCallCheck.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/createClass.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/assertThisInitialized.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/setPrototypeOf.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/inherits.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/typeof.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/possibleConstructorReturn.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/getPrototypeOf.js","../../packages/artplayer-tool-thumbnail/node_modules/tiny-emitter/index.js","../../packages/artplayer-tool-thumbnail/src/utils.js","../../packages/artplayer-tool-thumbnail/src/index.js"],"sourcesContent":["export default function _classCallCheck(instance, Constructor) {\n  if (!(instance instanceof Constructor)) {\n    throw new TypeError(\"Cannot call a class as a function\");\n  }\n}","function _defineProperties(target, props) {\n  for (var i = 0; i < props.length; i++) {\n    var descriptor = props[i];\n    descriptor.enumerable = descriptor.enumerable || false;\n    descriptor.configurable = true;\n    if (\"value\" in descriptor) descriptor.writable = true;\n    Object.defineProperty(target, descriptor.key, descriptor);\n  }\n}\n\nexport default function _createClass(Constructor, protoProps, staticProps) {\n  if (protoProps) _defineProperties(Constructor.prototype, protoProps);\n  if (staticProps) _defineProperties(Constructor, staticProps);\n  return Constructor;\n}","export default function _assertThisInitialized(self) {\n  if (self === void 0) {\n    throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n  }\n\n  return self;\n}","export default function _setPrototypeOf(o, p) {\n  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {\n    o.__proto__ = p;\n    return o;\n  };\n\n  return _setPrototypeOf(o, p);\n}","import setPrototypeOf from \"./setPrototypeOf.js\";\nexport default function _inherits(subClass, superClass) {\n  if (typeof superClass !== \"function\" && superClass !== null) {\n    throw new TypeError(\"Super expression must either be null or a function\");\n  }\n\n  subClass.prototype = Object.create(superClass && superClass.prototype, {\n    constructor: {\n      value: subClass,\n      writable: true,\n      configurable: true\n    }\n  });\n  if (superClass) setPrototypeOf(subClass, superClass);\n}","export default function _typeof(obj) {\n  \"@babel/helpers - typeof\";\n\n  if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") {\n    _typeof = function _typeof(obj) {\n      return typeof obj;\n    };\n  } else {\n    _typeof = function _typeof(obj) {\n      return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj;\n    };\n  }\n\n  return _typeof(obj);\n}","import _typeof from \"@babel/runtime/helpers/typeof\";\nimport assertThisInitialized from \"./assertThisInitialized.js\";\nexport default function _possibleConstructorReturn(self, call) {\n  if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) {\n    return call;\n  } else if (call !== void 0) {\n    throw new TypeError(\"Derived constructors may only return object or undefined\");\n  }\n\n  return assertThisInitialized(self);\n}","export default function _getPrototypeOf(o) {\n  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {\n    return o.__proto__ || Object.getPrototypeOf(o);\n  };\n  return _getPrototypeOf(o);\n}","function E () {\n  // Keep this empty so it's easier to inherit from\n  // (via https://github.com/lipsmack from https://github.com/scottcorgan/tiny-emitter/issues/3)\n}\n\nE.prototype = {\n  on: function (name, callback, ctx) {\n    var e = this.e || (this.e = {});\n\n    (e[name] || (e[name] = [])).push({\n      fn: callback,\n      ctx: ctx\n    });\n\n    return this;\n  },\n\n  once: function (name, callback, ctx) {\n    var self = this;\n    function listener () {\n      self.off(name, listener);\n      callback.apply(ctx, arguments);\n    };\n\n    listener._ = callback\n    return this.on(name, listener, ctx);\n  },\n\n  emit: function (name) {\n    var data = [].slice.call(arguments, 1);\n    var evtArr = ((this.e || (this.e = {}))[name] || []).slice();\n    var i = 0;\n    var len = evtArr.length;\n\n    for (i; i < len; i++) {\n      evtArr[i].fn.apply(evtArr[i].ctx, data);\n    }\n\n    return this;\n  },\n\n  off: function (name, callback) {\n    var e = this.e || (this.e = {});\n    var evts = e[name];\n    var liveEvents = [];\n\n    if (evts && callback) {\n      for (var i = 0, len = evts.length; i < len; i++) {\n    Line truncated

packages/artplayer-tool-thumbnail/src/index.js

@@ -18,7 +18,6 @@ class ArtplayerToolThumbnail extends Emitter {
 
     static get DEFAULTS() {
         return {
-            delay: 300,
             number: 60,
             width: 160,
             height: 90,
@@ -28,19 +27,19 @@ class ArtplayerToolThumbnail extends Emitter {
         };
     }
 
-    static ondragover(e) {
-        e.preventDefault();
+    static ondragover(event) {
+        event.preventDefault();
     }
 
-    ondrop(e) {
-        e.preventDefault();
-        const file = e.dataTransfer.files[0];
+    ondrop(event) {
+        event.preventDefault();
+        const file = event.dataTransfer.files[0];
         this.loadVideo(file);
     }
 
     setup(option = {}) {
         this.option = Object.assign({}, this.option, option);
-        const { fileInput, delay, number, width, height, column } = this.option;
+        const { fileInput, number, width, height, column } = this.option;
 
         this.errorHandle(fileInput instanceof Element, "The 'fileInput' is not a Element");
 
@@ -60,11 +59,10 @@ class ArtplayerToolThumbnail extends Emitter {
             this.option.fileInput = newFileInput;
         }
 
-        ['delay', 'number', 'width', 'height', 'column', 'begin', 'end'].forEach((item) => {
+        ['number', 'width', 'height', 'column', 'begin', 'end'].forEach((item) => {
             this.errorHandle(typeof this.option[item] === 'number', `The '${item}' is not a number`);
         });
 
-        this.option.delay = clamp(delay, 10, 1000);
         this.option.number = clamp(number, 10, 1000);
         this.option.width = clamp(width, 10, 1000);
         this.option.height = clamp(height, 10, 1000);
@@ -83,13 +81,13 @@ class ArtplayerToolThumbnail extends Emitter {
         return video;
     }
 
-    inputChange() {
+    inputChange(event) {
         const file = this.option.fileInput.files[0];
         this.loadVideo(file);
+        event.target.value = '';
     }
 
     loadVideo(file) {
-        const { delay } = this.option;
         if (file) {
             const canPlayType = this.video.canPlayType(file.type);
             this.errorHandle(
@@ -101,20 +99,13 @@ class ArtplayerToolThumbnail extends Emitter {
             this.file = file;
             this.emit('file', this.file);
             this.video.src = videoUrl;
-            sleep(delay)
-                .then(() => {
-                    this.emit('video', this.video);
-                })
-                .catch((err) => {
-                    this.emit('error', err.message);
-                    throw err;
-                });
+            this.emit('video', this.video);
         }
     }
 
     start() {
-        if (!this.video.duration) return sleep(1000).then(this.start);
-        const { width, height, number, delay, begin, end } = this.option;
+        if (!this.video.duration) return sleep(1000).then(() => this.start());
+        const { width, height, number, begin, end } = this.option;
         this.option.begin = clamp(begin, 0, this.video.duration);
         this.option.end = clamp(end || this.video.duration, begin, this.video.duration);
         this.errorHandle(this.option.end > this.option.begin, `End time must be greater than the start time`);
@@ -128,39 +119,28 @@ class ArtplayerToolThumbnail extends Emitter {
         const context2D = canvas.getContext('2d');
         this.emit('canvas', canvas);
         const promiseList = screenshotDate.map((item, index) => () => {
-            this.video.currentTime = item.time;
             return new Promise((resolve) => {
-                sleep(delay)
-                    .then(() => {
-                        context2D.drawImage(this.video, item.x, item.y, width, height);
-                        canvas.toBlob((blob) => {
-                            if (this.thumbnailUrl) {
-                                URL.revokeObjectURL(this.thumbnailUrl);
-                            }
-                            this.thumbnailUrl = URL.createObjectURL(blob);
-                            this.emit('update', this.thumbnailUrl, (index + 1) / number);
-                            resolve();
-                        });
-                    })
-                    .catch((err) => {
-                        throw err;
+                this.video.oncanplay = () => {
+                    context2D.drawImage(this.video, item.x, item.y, width, height);
+                    canvas.toBlob((blob) => {
+                        if (this.thumbnailUrl) {
+                            URL.revokeObjectURL(this.thumbnailUrl);
+                        }
+                        this.thumbnailUrl = URL.createObjectURL(blob);
+                        this.emit('update', this.thumbnailUrl, (index + 1) / number);
+                        this.video.oncanplay = null;
+                        resolve();
                     });
+                };
+                this.video.currentTime = item.time;
             });
         });
         this.processing = true;
         return runPromisesInSeries(promiseList)
-            .then(() =>
-                sleep(delay * 2)
-                    .then(() => {
-                        this.processing = false;
-                        this.emit('done');
-                    })
-                    .catch((err) => {
-                        this.processing = false;
-                        this.emit('error', err.message);
-                        throw err;
-                    }),
-            )
+            .then(() => {
+                this.processing = false;
+                this.emit('done');
+            })
             .catch((err) => {
                 this.processing = false;
                 this.emit('error', err.message);