完成截图工具例子

docs/thumbnail/js/common.js

@@ -60,7 +60,9 @@
     thumbnail.on('video', function(video) {
         console.log('Video size: ' + video.videoWidth + ' x ' + video.videoHeight);
         console.log('Video duration: ' + video.duration + 's');
-        thumbnail.setup(getConfig()).start();
+        thumbnail.setup(getConfig()).start().then(() => {
+            thumbnail.download();
+        });
     });
 
     thumbnail.on('canvas', function(canvas) {

docs/uncompiled/artplayer-tool-thumbnail.js

@@ -303,7 +303,7 @@
           };
         });
         this.processing = true;
-        runPromisesInSeries(promiseList).then(function () {
+        return runPromisesInSeries(promiseList).then(function () {
           return sleep(delay * 2).then(function () {
             _this4.processing = false;
 
@@ -380,6 +380,7 @@
         elink.click();
         document.body.removeChild(elink);
         this.emit('download', name);
+        return this;
       }
     }, {
       key: "errorHandle",

packages/artplayer-tool-thumbnail/README.md

@@ -1,4 +1,5 @@
 # artplayer-tool-thumbnail
+
 thumbnail tool for ArtPlayer
 
 ## Demo
@@ -34,7 +35,7 @@ Will expose the global variable to `window.ArtplayerToolThumbnail`.
 ## Usage
 
 ```html
-<input class="file" type="file">
+<input class="file" type="file" />
 ```
 
 ```js
@@ -47,29 +48,72 @@ var thumbnail = new ArtplayerToolThumbnail({
     column: 10,
 });
 
+// Dynamic configuration parameters, return the instance itself
+thumbnail.setup({
+    delay: 500,
+    number: 100,
+    width: 200,
+    height: 10,
+    column: 10,
+});
+
+// Start creating a preview, return the promise when the task completed
+thumbnail.start();
+
+// Start download preview, return the instance itself
+thumbnail.download();
+
+// Events
 thumbnail.on('file', file => {
-    console.log(file);
+    console.log('The video file has been read successfully');
 });
 
 thumbnail.on('video', video => {
-    console.log(video);
+    console.log('Building a video player successfully');
-    thumbnail.start();
+    console.log('Now you can call the thumbnail.start()');
 });
 
 thumbnail.on('canvas', canvas => {
-    console.log(canvas);
+    console.log('Building a canvas successfully');
 });
 
-thumbnail.on('update', (percentage, url) => {
+thumbnail.on('update', (url, percentage) => {
-    console.log(percentage, url);
+    console.log('Generating preview image, returning preview url and percentage');
-});
-
-thumbnail.on('download', name => {
-    console.log(name);
 });
 
 thumbnail.on('done', () => {
-    console.log('done');
+    console.log('One task processing completed');
+});
+
+thumbnail.on('download', name => {
+    console.log('Download the preview');
+});
+```
+
+## Example
+
+```html
+<input class="file" type="file" />
+```
+
+```js
+var thumbnail = new ArtplayerToolThumbnail({
+    fileInput: document.querySelector('.file'),
+});
+
+thumbnail.on('video', () => {
+    thumbnail
+        .setup({
+            delay: 500,
+            number: 100,
+            width: 200,
+            height: 10,
+            column: 10,
+        })
+        .start()
+        .then(() => {
+            thumbnail.download();
+        });
 });
 ```
 

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

@@ -107,7 +107,7 @@ class ArtplayerToolThumbnail extends Emitter {
                 });
         });
         this.processing = true;
-        runPromisesInSeries(promiseList)
+        return runPromisesInSeries(promiseList)
             .then(() =>
                 sleep(delay * 2)
                     .then(() => {
@@ -175,6 +175,7 @@ class ArtplayerToolThumbnail extends Emitter {
         elink.click();
         document.body.removeChild(elink);
         this.emit('download', name);
+        return this;
     }
 
     errorHandle(condition, msg) {