diff --git a/docs/thumbnail/index.html b/docs/thumbnail/index.html
index c70a5da2e..aa6af6380 100644
--- a/docs/thumbnail/index.html
+++ b/docs/thumbnail/index.html
@@ -26,23 +26,23 @@
             <div class="setup">
                 <div class="item">
                     <div class="name">Delay：</div>
-                    <input class="input delay" type="number" min="100" max="1000" placeholder="100 - 1000" value="300">
+                    <input class="input delay" type="number" min="10" max="1000" placeholder="10 - 1000" value="300">
                 </div>
                 <div class="item">
                     <div class="name">Number：</div>
-                    <input class="input number" type="number" min="10" max="100" placeholder="10 - 100" value="60">
+                    <input class="input number" type="number" min="10" max="1000" placeholder="10 - 1000" value="60">
                 </div>
                 <div class="item">
                     <div class="name">Width：</div>
-                    <input class="input width" type="number" min="100" max="500" placeholder="100 - 500" value="160">
+                    <input class="input width" type="number" min="10" max="1000" placeholder="10 - 1000" value="160">
                 </div>
                 <div class="item">
                     <div class="name">Height：</div>
-                    <input class="input height" type="number" min="100" max="500" placeholder="100 - 500" value="90">
+                    <input class="input height" type="number" min="10" max="1000" placeholder="10 - 1000" value="90">
                 </div>
                 <div class="item">
                     <div class="name">Column：</div>
-                    <input class="input column" type="number" min="10" max="100" placeholder="10 - 100" value="10">
+                    <input class="input column" type="number" min="1" max="1000" placeholder="1 - 1000" value="10">
                 </div>
             </div>
             <div class="btns">
diff --git a/docs/thumbnail/js/common.js b/docs/thumbnail/js/common.js
index 3c31aa2f1..dbf1f89fe 100644
--- a/docs/thumbnail/js/common.js
+++ b/docs/thumbnail/js/common.js
@@ -66,9 +66,10 @@
     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(percentage, url) {
+    thumbnail.on('update', function(url, percentage) {
         console.log('Processing: ' + Math.floor(percentage.toFixed(2) * 100) + '%');
         $preview.style.backgroundImage = 'url(' + url + ')';
     });
diff --git a/docs/uncompiled/artplayer-tool-thumbnail.js b/docs/uncompiled/artplayer-tool-thumbnail.js
index 3de56245f..5e2846161 100644
--- a/docs/uncompiled/artplayer-tool-thumbnail.js
+++ b/docs/uncompiled/artplayer-tool-thumbnail.js
@@ -244,11 +244,11 @@
         ['delay', 'number', 'width', 'height', 'column'].forEach(function (item) {
           _this2.errorHandle(typeof _this2.option[item] === 'number', "The '".concat(item, "' is not a number"));
         });
-        this.option.delay = clamp(delay, 100, 1000);
-        this.option.number = clamp(number, 10, 100);
-        this.option.width = clamp(width, 100, 500);
-        this.option.height = clamp(height, 100, 500);
-        this.option.column = clamp(column, 10, 100);
+        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);
+        this.option.column = clamp(column, 1, 1000);
         return this;
       }
     }, {
@@ -269,6 +269,8 @@
           this.video.src = videoUrl;
           sleep(delay).then(function () {
             _this3.emit('video', _this3.video);
+          }).catch(function (err) {
+            console.error(err);
           });
         }
       }
@@ -277,13 +279,15 @@
       value: function start() {
         var _this4 = this;
 
-        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...');
         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;
+        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));
         var screenshotDate = this.creatScreenshotDate();
         var canvas = this.creatCanvas();
         var context2D = canvas.getContext('2d');
@@ -296,18 +300,24 @@
               canvas.toBlob(function (blob) {
                 _this4.thumbnailUrl = URL.createObjectURL(blob);
 
-                _this4.emit('update', (index + 1) / number, _this4.thumbnailUrl);
+                _this4.emit('update', _this4.thumbnailUrl, (index + 1) / number);
               });
+            }).catch(function (err) {
+              console.error(err);
             });
           };
         });
         this.processing = true;
         runPromisesInSeries(promiseList).then(function () {
-          sleep(delay).then(function () {
+          sleep(delay * 2).then(function () {
             _this4.processing = false;
 
             _this4.emit('done');
+          }).catch(function (err) {
+            console.error(err);
           });
+        }).catch(function (err) {
+          console.error(err);
         });
       }
     }, {
@@ -351,13 +361,13 @@
         context2D.fillRect(0, 0, canvas.width, canvas.height);
         context2D.font = '14px Georgia';
         context2D.fillStyle = '#fff';
-        context2D.fillText("From: https://artplayer.org/thumbnail, Number: ".concat(number, ", Width: ").concat(width, ", Height: ").concat(height, ", Column: ").concat(column), 10, canvas.height - 12);
+        context2D.fillText("From: https://artplayer.org/thumbnail, Number: ".concat(number, ", Width: ").concat(width, ", Height: ").concat(height, ", Column: ").concat(column), 10, canvas.height - 11);
         return canvas;
       }
     }, {
       key: "download",
       value: function download() {
-        this.errorHandle(this.file && this.thumbnailUrl, 'Download does not seem to be ready');
+        this.errorHandle(this.file && this.thumbnailUrl, 'Download does not seem to be ready, please create preview first');
         this.errorHandle(!this.processing, 'There is currently a task in progress, please wait a moment...');
         var elink = document.createElement('a');
         var name = "".concat(getFileName(this.file.name), ".png");
diff --git a/packages/artplayer-tool-thumbnail/src/index.js b/packages/artplayer-tool-thumbnail/src/index.js
index 8eb3ed2a6..165a5e78c 100644
--- a/packages/artplayer-tool-thumbnail/src/index.js
+++ b/packages/artplayer-tool-thumbnail/src/index.js
@@ -35,11 +35,11 @@ class ArtplayerToolThumbnail extends Emitter {
             this.errorHandle(typeof this.option[item] === 'number', `The '${item}' is not a number`);
         });
 
-        this.option.delay = clamp(delay, 100, 1000);
-        this.option.number = clamp(number, 10, 100);
-        this.option.width = clamp(width, 100, 500);
-        this.option.height = clamp(height, 100, 500);
-        this.option.column = clamp(column, 10, 100);
+        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);
+        this.option.column = clamp(column, 1, 1000);
         return this;
     }
 
@@ -68,37 +68,55 @@ class ArtplayerToolThumbnail extends Emitter {
             this.file = file;
             this.emit('file', this.file);
             this.video.src = videoUrl;
-            sleep(delay).then(() => {
-                this.emit('video', this.video);
-            });
+            sleep(delay)
+                .then(() => {
+                    this.emit('video', this.video);
+                })
+                .catch(err => {
+                    console.error(err);
+                });
         }
     }
 
     start() {
+        const { width, height, number, delay } = this.option;
+        this.density = number / this.video.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...');
-        const { width, height, number, delay } = this.option;
+        this.errorHandle(this.density <= 1, `The preview density cannot be greater than 1, but got ${this.density}`);
         const screenshotDate = this.creatScreenshotDate();
         const canvas = this.creatCanvas();
         const context2D = canvas.getContext('2d');
         this.emit('canvas', canvas);
         const promiseList = screenshotDate.map((item, index) => () => {
             this.video.currentTime = item.time;
-            return sleep(delay).then(() => {
-                context2D.drawImage(this.video, item.x, item.y, width, height);
-                canvas.toBlob(blob => {
-                    this.thumbnailUrl = URL.createObjectURL(blob);
-                    this.emit('update', (index + 1) / number, this.thumbnailUrl);
+            return sleep(delay)
+                .then(() => {
+                    context2D.drawImage(this.video, item.x, item.y, width, height);
+                    canvas.toBlob(blob => {
+                        this.thumbnailUrl = URL.createObjectURL(blob);
+                        this.emit('update', this.thumbnailUrl, (index + 1) / number);
+                    });
+                })
+                .catch(err => {
+                    console.error(err);
                 });
-            });
         });
         this.processing = true;
-        runPromisesInSeries(promiseList).then(() => {
-            sleep(delay).then(() => {
-                this.processing = false;
-                this.emit('done');
+        runPromisesInSeries(promiseList)
+            .then(() => {
+                sleep(delay * 2)
+                    .then(() => {
+                        this.processing = false;
+                        this.emit('done');
+                    })
+                    .catch(err => {
+                        console.error(err);
+                    });
+            })
+            .catch(err => {
+                console.error(err);
             });
-        });
     }
 
     creatScreenshotDate() {
@@ -130,13 +148,16 @@ class ArtplayerToolThumbnail extends Emitter {
         context2D.fillText(
             `From: https://artplayer.org/thumbnail, Number: ${number}, Width: ${width}, Height: ${height}, Column: ${column}`,
             10,
-            canvas.height - 12,
+            canvas.height - 11,
         );
         return canvas;
     }
 
     download() {
-        this.errorHandle(this.file && this.thumbnailUrl, 'Download does not seem to be ready');
+        this.errorHandle(
+            this.file && this.thumbnailUrl,
+            'Download does not seem to be ready, please create preview first',
+        );
         this.errorHandle(!this.processing, 'There is currently a task in progress, please wait a moment...');
         const elink = document.createElement('a');
         const name = `${getFileName(this.file.name)}.png`;