diff --git a/README.md b/README.md
index 2216256bf..e6ca88f73 100644
--- a/README.md
+++ b/README.md
@@ -106,6 +106,7 @@ var art = new Artplayer({
- [artplayer-plugin-chromecast](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-chromecast/index.js&example=chromecast)
- [artplayer-plugin-vast](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-vast/index.js&example=vast) (WIP)
- [artplayer-plugin-chapter](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-chapter/index.js&example=chapter)
+- [https://artplayer.org](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-auto-thumbnail/index.js&example=auto.thumbnail)
## Libraries
diff --git a/docs/assets/example/auto.thumbnail.js b/docs/assets/example/auto.thumbnail.js
new file mode 100644
index 000000000..aa5a93730
--- /dev/null
+++ b/docs/assets/example/auto.thumbnail.js
@@ -0,0 +1,14 @@
+// npm i artplayer-plugin-auto-thumbnail
+// import artplayerPluginAutoThumbnail from 'artplayer-plugin-auto-thumbnail';
+
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+ plugins: [
+ artplayerPluginAutoThumbnail({
+ width: 160,
+ number: 100,
+ scale: 1,
+ }),
+ ],
+});
\ No newline at end of file
diff --git a/docs/assets/example/thumbnail.js b/docs/assets/example/thumbnail.js
index 01c3679de..2cb3b342c 100644
--- a/docs/assets/example/thumbnail.js
+++ b/docs/assets/example/thumbnail.js
@@ -1,69 +1,14 @@
-if (window.lastThumbnail) {
- window.lastThumbnail.destroy();
-}
+// npm i artplayer-plugin-thumbnail
+// import artplayerPluginThumbnail from 'artplayer-plugin-thumbnail';
-var $popups = document.querySelector('.popups');
-var $popinner = document.querySelector('.popinner');
-var $artplayer = document.querySelector('.artplayer-app');
-
-$artplayer.innerHTML = 'Drop video file here or click to upload.';
-var thumbnail = new ArtplayerToolThumbnail({
- fileInput: $artplayer,
- number: 60, // 数量
- width: 160, // 宽度
- column: 10, // 列数
- begin: 0, // 开始
- end: NaN, // 结束
-});
-
-window.lastThumbnail = thumbnail;
-
-thumbnail.on('file', function (file) {
- console.log('Read video successfully: ' + file.name);
-});
-
-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) {
- 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) {
- console.log('Processing: ' + Math.floor(percentage.toFixed(2) * 100) + '%');
- $popups.style.display = 'flex';
- $popinner.style.backgroundImage = 'url(' + url + ')';
-});
-
-thumbnail.on('download', function (name) {
- console.log('Start download preview: ' + name);
-});
-
-thumbnail.on('done', function () {
- $popups.style.display = 'none';
- thumbnail.download();
- console.log('Build preview image complete');
-
- [...Artplayer.instances].forEach(function (art) {
- art.destroy(true);
- });
-
- new Artplayer({
- container: $artplayer,
- url: thumbnail.videoUrl,
- autoSize: true,
- poster: thumbnail.thumbnailUrl,
- thumbnails: {
- url: thumbnail.thumbnailUrl,
- number: thumbnail.option.number,
- column: thumbnail.option.column,
- },
- });
-
- console.log('Build player complete');
-});
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+ plugins: [
+ artplayerPluginThumbnail({
+ width: 160,
+ number: 100,
+ scale: 1,
+ }),
+ ],
+});
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index 123b5af96..b26eec189 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -95,6 +95,10 @@
artplayer-plugin-chapter
+
+ artplayer-plugin-auto-thumbnail
+
- Proxys
diff --git a/docs/uncompiled/artplayer-plugin-auto-thumbnail/index.js b/docs/uncompiled/artplayer-plugin-auto-thumbnail/index.js
new file mode 100644
index 000000000..c33817914
--- /dev/null
+++ b/docs/uncompiled/artplayer-plugin-auto-thumbnail/index.js
@@ -0,0 +1,242 @@
+// modules are defined as an array
+// [ module function, map of requires ]
+//
+// map of requires is short require name -> numeric require
+//
+// anything defined in a previous bundle is accessed via the
+// orig method which is the require for previous bundles
+
+(function (modules, entry, mainEntry, parcelRequireName, globalName) {
+ /* eslint-disable no-undef */
+ var globalObject =
+ typeof globalThis !== 'undefined'
+ ? globalThis
+ : typeof self !== 'undefined'
+ ? self
+ : typeof window !== 'undefined'
+ ? window
+ : typeof global !== 'undefined'
+ ? global
+ : {};
+ /* eslint-enable no-undef */
+
+ // Save the require from previous bundle to this closure if any
+ var previousRequire =
+ typeof globalObject[parcelRequireName] === 'function' &&
+ globalObject[parcelRequireName];
+
+ var cache = previousRequire.cache || {};
+ // Do not use `require` to prevent Webpack from trying to bundle this call
+ var nodeRequire =
+ typeof module !== 'undefined' &&
+ typeof module.require === 'function' &&
+ module.require.bind(module);
+
+ function newRequire(name, jumped) {
+ if (!cache[name]) {
+ if (!modules[name]) {
+ // if we cannot find the module within our internal map or
+ // cache jump to the current global require ie. the last bundle
+ // that was added to the page.
+ var currentRequire =
+ typeof globalObject[parcelRequireName] === 'function' &&
+ globalObject[parcelRequireName];
+ if (!jumped && currentRequire) {
+ return currentRequire(name, true);
+ }
+
+ // If there are other bundles on this page the require from the
+ // previous one is saved to 'previousRequire'. Repeat this as
+ // many times as there are bundles until the module is found or
+ // we exhaust the require chain.
+ if (previousRequire) {
+ return previousRequire(name, true);
+ }
+
+ // Try the node require function if it exists.
+ if (nodeRequire && typeof name === 'string') {
+ return nodeRequire(name);
+ }
+
+ var err = new Error("Cannot find module '" + name + "'");
+ err.code = 'MODULE_NOT_FOUND';
+ throw err;
+ }
+
+ localRequire.resolve = resolve;
+ localRequire.cache = {};
+
+ var module = (cache[name] = new newRequire.Module(name));
+
+ modules[name][0].call(
+ module.exports,
+ localRequire,
+ module,
+ module.exports,
+ this
+ );
+ }
+
+ return cache[name].exports;
+
+ function localRequire(x) {
+ var res = localRequire.resolve(x);
+ return res === false ? {} : newRequire(res);
+ }
+
+ function resolve(x) {
+ var id = modules[name][1][x];
+ return id != null ? id : x;
+ }
+ }
+
+ function Module(moduleName) {
+ this.id = moduleName;
+ this.bundle = newRequire;
+ this.exports = {};
+ }
+
+ newRequire.isParcelRequire = true;
+ newRequire.Module = Module;
+ newRequire.modules = modules;
+ newRequire.cache = cache;
+ newRequire.parent = previousRequire;
+ newRequire.register = function (id, exports) {
+ modules[id] = [
+ function (require, module) {
+ module.exports = exports;
+ },
+ {},
+ ];
+ };
+
+ Object.defineProperty(newRequire, 'root', {
+ get: function () {
+ return globalObject[parcelRequireName];
+ },
+ });
+
+ globalObject[parcelRequireName] = newRequire;
+
+ for (var i = 0; i < entry.length; i++) {
+ newRequire(entry[i]);
+ }
+
+ if (mainEntry) {
+ // Expose entry point to Node, AMD or browser globals
+ // Based on https://github.com/ForbesLindesay/umd/blob/master/template.js
+ var mainExports = newRequire(mainEntry);
+
+ // CommonJS
+ if (typeof exports === 'object' && typeof module !== 'undefined') {
+ module.exports = mainExports;
+
+ // RequireJS
+ } else if (typeof define === 'function' && define.amd) {
+ define(function () {
+ return mainExports;
+ });
+
+ //