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) {