diff --git a/docs/thumbnail/js/common.js b/docs/thumbnail/js/common.js
index dbf1f89fe..7987b5a32 100644
--- a/docs/thumbnail/js/common.js
+++ b/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) {
diff --git a/docs/uncompiled/artplayer-tool-thumbnail.js b/docs/uncompiled/artplayer-tool-thumbnail.js
index 06d761b26..c80882ccc 100644
--- a/docs/uncompiled/artplayer-tool-thumbnail.js
+++ b/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",
diff --git a/packages/artplayer-tool-thumbnail/README.md b/packages/artplayer-tool-thumbnail/README.md
index b362b3ca1..5dd5b0652 100644
--- a/packages/artplayer-tool-thumbnail/README.md
+++ b/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
-
+
```
```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);
- thumbnail.start();
+ console.log('Building a video player successfully');
+ 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) => {
- console.log(percentage, url);
-});
-
-thumbnail.on('download', name => {
- console.log(name);
+thumbnail.on('update', (url, percentage) => {
+ console.log('Generating preview image, returning preview url and percentage');
});
thumbnail.on('done', () => {
- console.log('done');
+ console.log('One task processing completed');
+});
+
+thumbnail.on('download', name => {
+ console.log('Download the preview');
+});
+```
+
+## Example
+
+```html
+
+```
+
+```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();
+ });
});
```
diff --git a/packages/artplayer-tool-thumbnail/src/index.js b/packages/artplayer-tool-thumbnail/src/index.js
index 968f435d8..4737d64dc 100644
--- a/packages/artplayer-tool-thumbnail/src/index.js
+++ b/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) {