add begin and end option

docs/assets/example/thumbnail.js

@@ -1,3 +1,7 @@
+if (window.lastThumbnail) {
+    window.lastThumbnail.destroy();
+}
+
 var $popups = document.querySelector('.popups');
 var $popinner = document.querySelector('.popinner');
 var $artplayer = document.querySelector('.artplayer-app');
@@ -10,39 +14,43 @@ var thumbnail = new ArtplayerToolThumbnail({
     width: 160, // 宽度
     height: 90, // 高度
     column: 10, // 列数
+    begin: 0, // 开始
+    end: NaN, // 结束
 });
 
-thumbnail.on('file', function(file) {
+window.lastThumbnail = thumbnail;
+
+thumbnail.on('file', function (file) {
     console.log('Read video successfully: ' + file.name);
 });
 
-thumbnail.on('video', function(video) {
+thumbnail.on('video', function (video) {
     console.log('Video size: ' + video.videoWidth + ' x ' + video.videoHeight);
     console.log('Video duration: ' + video.duration + 's');
     thumbnail.start();
 });
 
-thumbnail.on('canvas', function(canvas) {
+thumbnail.on('canvas', function (canvas) {
     console.log('Build canvas successfully');
     console.log('Canvas size: ' + canvas.width + ' x ' + canvas.height);
     console.log('Preview density: ' + thumbnail.density + ' p/s');
 });
 
-thumbnail.on('update', function(url, percentage) {
+thumbnail.on('update', function (url, percentage) {
     console.log('Processing: ' + Math.floor(percentage.toFixed(2) * 100) + '%');
     $popups.style.display = 'flex';
     $popinner.style.backgroundImage = 'url(' + url + ')';
 });
 
-thumbnail.on('download', function(name) {
+thumbnail.on('download', function (name) {
     console.log('Start download preview: ' + name);
 });
 
-thumbnail.on('done', function() {
+thumbnail.on('done', function () {
     $popups.style.display = 'none';
     thumbnail.download();
     console.log('Build preview image complete');
-    Artplayer.instances.forEach(function(art) {
+    Artplayer.instances.forEach(function (art) {
         art.destroy(true);
     });
 

docs/uncompiled/artplayer-tool-thumbnail.js

@@ -1,7 +1,7 @@
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
   typeof define === 'function' && define.amd ? define(factory) :
-  (global = global || self, global.ArtplayerToolThumbnail = factory());
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.ArtplayerToolThumbnail = factory());
 }(this, (function () { 'use strict';
 
   function _classCallCheck(instance, Constructor) {
@@ -30,30 +30,6 @@
 
   var createClass = _createClass;
 
-  function createCommonjsModule(fn, module) {
-  	return module = { exports: {} }, fn(module, module.exports), module.exports;
-  }
-
-  var _typeof_1 = createCommonjsModule(function (module) {
-  function _typeof2(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof2 = function _typeof2(obj) { return typeof obj; }; } else { _typeof2 = function _typeof2(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof2(obj); }
-
-  function _typeof(obj) {
-    if (typeof Symbol === "function" && _typeof2(Symbol.iterator) === "symbol") {
-      module.exports = _typeof = function _typeof(obj) {
-        return _typeof2(obj);
-      };
-    } else {
-      module.exports = _typeof = function _typeof(obj) {
-        return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : _typeof2(obj);
-      };
-    }
-
-    return _typeof(obj);
-  }
-
-  module.exports = _typeof;
-  });
-
   function _assertThisInitialized(self) {
     if (self === void 0) {
       throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
@@ -64,27 +40,10 @@
 
   var assertThisInitialized = _assertThisInitialized;
 
-  function _possibleConstructorReturn(self, call) {
-    if (call && (_typeof_1(call) === "object" || typeof call === "function")) {
-      return call;
-    }
-
-    return assertThisInitialized(self);
+  function createCommonjsModule(fn, module) {
+  	return module = { exports: {} }, fn(module, module.exports), module.exports;
   }
 
-  var possibleConstructorReturn = _possibleConstructorReturn;
-
-  var getPrototypeOf = createCommonjsModule(function (module) {
-  function _getPrototypeOf(o) {
-    module.exports = _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
-      return o.__proto__ || Object.getPrototypeOf(o);
-    };
-    return _getPrototypeOf(o);
-  }
-
-  module.exports = _getPrototypeOf;
-  });
-
   var setPrototypeOf = createCommonjsModule(function (module) {
   function _setPrototypeOf(o, p) {
     module.exports = _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
@@ -115,6 +74,47 @@
 
   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) {
+        return typeof obj;
+      };
+    } else {
+      module.exports = _typeof = function _typeof(obj) {
+        return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+      };
+    }
+
+    return _typeof(obj);
+  }
+
+  module.exports = _typeof;
+  });
+
+  function _possibleConstructorReturn(self, call) {
+    if (call && (_typeof_1(call) === "object" || typeof call === "function")) {
+      return call;
+    }
+
+    return assertThisInitialized(self);
+  }
+
+  var possibleConstructorReturn = _possibleConstructorReturn;
+
+  var getPrototypeOf = createCommonjsModule(function (module) {
+  function _getPrototypeOf(o) {
+    module.exports = _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+      return o.__proto__ || Object.getPrototypeOf(o);
+    };
+    return _getPrototypeOf(o);
+  }
+
+  module.exports = _getPrototypeOf;
+  });
+
   function E () {
     // Keep this empty so it's easier to inherit from
     // (via https://github.com/lipsmack from https://github.com/scottcorgan/tiny-emitter/issues/3)
@@ -202,11 +202,15 @@
     return Math.max(Math.min(num, Math.max(a, b)), Math.min(a, b));
   }
 
-  var ArtplayerToolThumbnail =
-  /*#__PURE__*/
-  function (_Emitter) {
+  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; } }
+
+  var ArtplayerToolThumbnail = /*#__PURE__*/function (_Emitter) {
     inherits(ArtplayerToolThumbnail, _Emitter);
 
+    var _super = _createSuper(ArtplayerToolThumbnail);
+
     function ArtplayerToolThumbnail() {
       var _this;
 
@@ -214,13 +218,14 @@
 
       classCallCheck(this, ArtplayerToolThumbnail);
 
-      _this = possibleConstructorReturn(this, getPrototypeOf(ArtplayerToolThumbnail).call(this));
+      _this = _super.call(this);
       _this.processing = false;
       _this.option = {};
 
       _this.setup(Object.assign({}, ArtplayerToolThumbnail.DEFAULTS, option));
 
       _this.video = ArtplayerToolThumbnail.creatVideo();
+      _this.duration = 0;
       _this.inputChange = _this.inputChange.bind(assertThisInitialized(_this));
       _this.ondrop = _this.ondrop.bind(assertThisInitialized(_this));
 
@@ -272,7 +277,7 @@
           this.option.fileInput = newFileInput;
         }
 
-        ['delay', 'number', 'width', 'height', 'column'].forEach(function (item) {
+        ['delay', '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);
@@ -317,12 +322,19 @@
       value: function start() {
         var _this4 = this;
 
+        if (!this.video.duration) return sleep(1000).then(this.start);
         var _this$option2 = this.option,
             width = _this$option2.width,
             height = _this$option2.height,
             number = _this$option2.number,
-            delay = _this$option2.delay;
-        this.density = number / this.video.duration;
+            delay = _this$option2.delay,
+            begin = _this$option2.begin,
+            end = _this$option2.end;
+        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");
+        this.duration = this.option.end - this.option.begin;
+        this.density = number / this.duration;
         this.errorHandle(this.file && this.video, 'Please select the video file first');
         this.errorHandle(!this.processing, 'There is currently a task in progress, please wait a moment...');
         this.errorHandle(this.density <= 1, "The preview density cannot be greater than 1, but got ".concat(this.density));
@@ -381,10 +393,10 @@
             number = _this$option3.number,
             width = _this$option3.width,
             height = _this$option3.height,
-            column = _this$option3.column;
-        var duration = this.video.duration;
-        var timeGap = duration / number;
-        var timePoints = [timeGap];
+            column = _this$option3.column,
+            begin = _this$option3.begin;
+        var timeGap = this.duration / number;
+        var timePoints = [begin + timeGap];
 
         while (timePoints.length < number) {
           var last = timePoints[timePoints.length - 1];
@@ -484,7 +496,9 @@
           number: 60,
           width: 160,
           height: 90,
-          column: 10
+          column: 10,
+          begin: 0,
+          end: 0
         };
       }
     }]);

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

@@ -1 +1 @@
-{"version":3,"file":"artplayer-tool-thumbnail.js","sources":["../../node_modules/_@babel_runtime@7.7.4@@babel/runtime/helpers/classCallCheck.js","../../node_modules/_@babel_runtime@7.7.4@@babel/runtime/helpers/createClass.js","../../node_modules/_@babel_runtime@7.7.4@@babel/runtime/helpers/typeof.js","../../node_modules/_@babel_runtime@7.7.4@@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/_@babel_runtime@7.7.4@@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/_@babel_runtime@7.7.4@@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/_@babel_runtime@7.7.4@@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/_@babel_runtime@7.7.4@@babel/runtime/helpers/inherits.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 _typeof2(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof2 = function _typeof2(obj) { return typeof obj; }; } else { _typeof2 = function _typeof2(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof2(obj); }\n\nfunction _typeof(obj) {\n  if (typeof Symbol === \"function\" && _typeof2(Symbol.iterator) === \"symbol\") {\n    module.exports = _typeof = function _typeof(obj) {\n      return _typeof2(obj);\n    };\n  } else {\n    module.exports = _typeof = function _typeof(obj) {\n      return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : _typeof2(obj);\n    };\n  }\n\n  return _typeof(obj);\n}\n\nmodule.exports = _typeof;","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;","var _typeof = require(\"../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 _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 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 = ((tLine truncated
+{"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

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

@@ -8,6 +8,7 @@ class ArtplayerToolThumbnail extends Emitter {
         this.option = {};
         this.setup(Object.assign({}, ArtplayerToolThumbnail.DEFAULTS, option));
         this.video = ArtplayerToolThumbnail.creatVideo();
+        this.duration = 0;
         this.inputChange = this.inputChange.bind(this);
         this.ondrop = this.ondrop.bind(this);
         this.option.fileInput.addEventListener('change', this.inputChange);
@@ -22,6 +23,8 @@ class ArtplayerToolThumbnail extends Emitter {
             width: 160,
             height: 90,
             column: 10,
+            begin: 0,
+            end: 0,
         };
     }
 
@@ -57,7 +60,7 @@ class ArtplayerToolThumbnail extends Emitter {
             this.option.fileInput = newFileInput;
         }
 
-        ['delay', 'number', 'width', 'height', 'column'].forEach(item => {
+        ['delay', 'number', 'width', 'height', 'column', 'begin', 'end'].forEach((item) => {
             this.errorHandle(typeof this.option[item] === 'number', `The '${item}' is not a number`);
         });
 
@@ -102,7 +105,7 @@ class ArtplayerToolThumbnail extends Emitter {
                 .then(() => {
                     this.emit('video', this.video);
                 })
-                .catch(err => {
+                .catch((err) => {
                     this.emit('error', err.message);
                     throw err;
                 });
@@ -110,8 +113,13 @@ class ArtplayerToolThumbnail extends Emitter {
     }
 
     start() {
-        const { width, height, number, delay } = this.option;
-        this.density = number / this.video.duration;
+        if (!this.video.duration) return sleep(1000).then(this.start);
+        const { width, height, number, delay, 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`);
+        this.duration = this.option.end - this.option.begin;
+        this.density = number / this.duration;
         this.errorHandle(this.file && this.video, 'Please select the video file first');
         this.errorHandle(!this.processing, 'There is currently a task in progress, please wait a moment...');
         this.errorHandle(this.density <= 1, `The preview density cannot be greater than 1, but got ${this.density}`);
@@ -121,11 +129,11 @@ class ArtplayerToolThumbnail extends Emitter {
         this.emit('canvas', canvas);
         const promiseList = screenshotDate.map((item, index) => () => {
             this.video.currentTime = item.time;
-            return new Promise(resolve => {
+            return new Promise((resolve) => {
                 sleep(delay)
                     .then(() => {
                         context2D.drawImage(this.video, item.x, item.y, width, height);
-                        canvas.toBlob(blob => {
+                        canvas.toBlob((blob) => {
                             if (this.thumbnailUrl) {
                                 URL.revokeObjectURL(this.thumbnailUrl);
                             }
@@ -134,7 +142,7 @@ class ArtplayerToolThumbnail extends Emitter {
                             resolve();
                         });
                     })
-                    .catch(err => {
+                    .catch((err) => {
                         throw err;
                     });
             });
@@ -147,13 +155,13 @@ class ArtplayerToolThumbnail extends Emitter {
                         this.processing = false;
                         this.emit('done');
                     })
-                    .catch(err => {
+                    .catch((err) => {
                         this.processing = false;
                         this.emit('error', err.message);
                         throw err;
                     }),
             )
-            .catch(err => {
+            .catch((err) => {
                 this.processing = false;
                 this.emit('error', err.message);
                 throw err;
@@ -161,10 +169,9 @@ class ArtplayerToolThumbnail extends Emitter {
     }
 
     creatScreenshotDate() {
-        const { number, width, height, column } = this.option;
-        const { duration } = this.video;
-        const timeGap = duration / number;
-        const timePoints = [timeGap];
+        const { number, width, height, column, begin } = this.option;
+        const timeGap = this.duration / number;
+        const timePoints = [begin + timeGap];
         while (timePoints.length < number) {
             const last = timePoints[timePoints.length - 1];
             timePoints.push(last + timeGap);