From a33df191a4216897d4fd4526927a822fd8b543a1 Mon Sep 17 00:00:00 2001 From: Harvey Zack Date: Sun, 1 Sep 2024 12:05:08 +0800 Subject: [PATCH] feat: Add artplayer-plugin-auto-thumbnail plugin --- README.md | 1 + docs/assets/example/auto.thumbnail.js | 14 + docs/assets/example/thumbnail.js | 81 +-- docs/index.html | 4 + .../artplayer-plugin-auto-thumbnail/index.js | 242 ++++++++ .../index.js.map | 1 + docs/uncompiled/artplayer/index.js | 539 +++++++++--------- docs/uncompiled/artplayer/index.js.map | 2 +- .../artplayer-plugin-auto-thumbnail/README.md | 11 + .../package.json | 24 + .../src/index.js | 69 +++ .../artplayer-plugin-auto-thumbnail.d.ts | 17 + 12 files changed, 651 insertions(+), 354 deletions(-) create mode 100644 docs/assets/example/auto.thumbnail.js create mode 100644 docs/uncompiled/artplayer-plugin-auto-thumbnail/index.js create mode 100644 docs/uncompiled/artplayer-plugin-auto-thumbnail/index.js.map create mode 100644 packages/artplayer-plugin-auto-thumbnail/README.md create mode 100644 packages/artplayer-plugin-auto-thumbnail/package.json create mode 100644 packages/artplayer-plugin-auto-thumbnail/src/index.js create mode 100644 packages/artplayer-plugin-auto-thumbnail/types/artplayer-plugin-auto-thumbnail.d.ts 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 +