diff --git a/docs/assets/example/mediabunny.js b/docs/assets/example/mediabunny.js
index 9eafa3e2c..5f2482b95 100644
--- a/docs/assets/example/mediabunny.js
+++ b/docs/assets/example/mediabunny.js
@@ -15,5 +15,11 @@ const art = new Artplayer({
miniProgressBar: true,
autoPlayback: true,
autoOrientation: true,
+ thumbnails: {
+ url: '/assets/sample/frag_bunny.png',
+ number: 60,
+ column: 10,
+ scale: 0.85,
+ },
proxy: artplayerProxyMediabunny(),
-})
+})
\ No newline at end of file
diff --git a/docs/assets/example/tool.thumbnail.js b/docs/assets/example/tool.thumbnail.js
new file mode 100644
index 000000000..01c3679de
--- /dev/null
+++ b/docs/assets/example/tool.thumbnail.js
@@ -0,0 +1,69 @@
+if (window.lastThumbnail) {
+ window.lastThumbnail.destroy();
+}
+
+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');
+});
diff --git a/docs/assets/sample/frag_bunny.png b/docs/assets/sample/frag_bunny.png
new file mode 100644
index 000000000..03c80ac87
Binary files /dev/null and b/docs/assets/sample/frag_bunny.png differ
diff --git a/docs/index.html b/docs/index.html
index 82c3a2495..c33de0eee 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -131,7 +131,7 @@
Tools
artplayer-tool-thumbnail
+ href="/?libs=./uncompiled/artplayer-tool-thumbnail/index.js&example=tool.thumbnail">artplayer-tool-thumbnail
diff --git a/docs/uncompiled/artplayer-tool-thumbnail/index.js b/docs/uncompiled/artplayer-tool-thumbnail/index.js
index 6684aaf39..7c98d98a7 100644
--- a/docs/uncompiled/artplayer-tool-thumbnail/index.js
+++ b/docs/uncompiled/artplayer-tool-thumbnail/index.js
@@ -6,7 +6,16 @@
// 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) {
+(function (
+ modules,
+ entry,
+ mainEntry,
+ parcelRequireName,
+ externals,
+ distDir,
+ publicUrl,
+ devServer
+) {
/* eslint-disable no-undef */
var globalObject =
typeof globalThis !== 'undefined'
@@ -25,6 +34,7 @@
typeof globalObject[parcelRequireName] === 'function' &&
globalObject[parcelRequireName];
+ var importMap = previousRequire.i || {};
var cache = previousRequire.cache || {};
// Do not use `require` to prevent Webpack from trying to bundle this call
var nodeRequire =
@@ -35,6 +45,9 @@
function newRequire(name, jumped) {
if (!cache[name]) {
if (!modules[name]) {
+ if (externals[name]) {
+ return externals[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.
@@ -73,7 +86,7 @@
localRequire,
module,
module.exports,
- this
+ globalObject
);
}
@@ -81,7 +94,54 @@
function localRequire(x) {
var res = localRequire.resolve(x);
- return res === false ? {} : newRequire(res);
+ if (res === false) {
+ return {};
+ }
+ // Synthesize a module to follow re-exports.
+ if (Array.isArray(res)) {
+ var m = {__esModule: true};
+ res.forEach(function (v) {
+ var key = v[0];
+ var id = v[1];
+ var exp = v[2] || v[0];
+ var x = newRequire(id);
+ if (key === '*') {
+ Object.keys(x).forEach(function (key) {
+ if (
+ key === 'default' ||
+ key === '__esModule' ||
+ Object.prototype.hasOwnProperty.call(m, key)
+ ) {
+ return;
+ }
+
+ Object.defineProperty(m, key, {
+ enumerable: true,
+ get: function () {
+ return x[key];
+ },
+ });
+ });
+ } else if (exp === '*') {
+ Object.defineProperty(m, key, {
+ enumerable: true,
+ value: x,
+ });
+ } else {
+ Object.defineProperty(m, key, {
+ enumerable: true,
+ get: function () {
+ if (exp === 'default') {
+ return x.__esModule ? x.default : x;
+ }
+ return x[exp];
+ },
+ });
+ }
+ });
+ return m;
+ }
+ return newRequire(res);
}
function resolve(x) {
@@ -93,6 +153,7 @@
function Module(moduleName) {
this.id = moduleName;
this.bundle = newRequire;
+ this.require = nodeRequire;
this.exports = {};
}
@@ -101,6 +162,10 @@
newRequire.modules = modules;
newRequire.cache = cache;
newRequire.parent = previousRequire;
+ newRequire.distDir = distDir;
+ newRequire.publicUrl = publicUrl;
+ newRequire.devServer = devServer;
+ newRequire.i = importMap;
newRequire.register = function (id, exports) {
modules[id] = [
function (require, module) {
@@ -110,6 +175,10 @@
];
};
+ // Only insert newRequire.load when it is actually used.
+ // The code in this file is linted against ES5, so dynamic import is not allowed.
+ // INSERT_LOAD_HERE
+
Object.defineProperty(newRequire, 'root', {
get: function () {
return globalObject[parcelRequireName];
@@ -136,13 +205,9 @@
define(function () {
return mainExports;
});
-
- //