mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-09 03:46:16 -08:00
- Created a new documentation file for the danmuku plugin with code examples. - Added a new documentation file for language settings (i18n) with detailed instructions on language imports, default languages, and how to add or modify languages. - Included code snippets for initializing the Artplayer with different language settings.
64 lines
1.8 KiB
JavaScript
64 lines
1.8 KiB
JavaScript
/*!
|
|
* artplayer-plugin-auto-thumbnail.js v1.1.0
|
|
* Github: https://github.com/zhw2590582/ArtPlayer
|
|
* (c) 2017-2026 Harvey Zhao
|
|
* Released under the MIT License.
|
|
*/
|
|
function create({ url, width, number }, callback) {
|
|
const video = document.createElement("video");
|
|
video.crossOrigin = "anonymous";
|
|
video.src = url;
|
|
video.onloadedmetadata = () => {
|
|
const duration = video.duration;
|
|
const canvas = document.createElement("canvas");
|
|
const ctx = canvas.getContext("2d");
|
|
const height = Math.floor(width * video.videoHeight / video.videoWidth);
|
|
canvas.width = width * 10;
|
|
canvas.height = height * Math.ceil(number / 10);
|
|
let blobUrl = null;
|
|
function seekAndDraw(index) {
|
|
canvas.toBlob((blob) => {
|
|
URL.revokeObjectURL(blobUrl);
|
|
blobUrl = URL.createObjectURL(blob);
|
|
callback({
|
|
url: blobUrl,
|
|
height
|
|
});
|
|
}, "image/jpeg");
|
|
if (index >= number)
|
|
return;
|
|
video.currentTime = duration * index / number;
|
|
video.onseeked = () => {
|
|
ctx.drawImage(video, index % 10 * width, Math.floor(index / 10) * height, width, height);
|
|
seekAndDraw(index + 1);
|
|
};
|
|
}
|
|
seekAndDraw(0);
|
|
};
|
|
}
|
|
function artplayerPluginAutoThumbnail(option) {
|
|
return async (art) => {
|
|
art.on("video:loadedmetadata", () => {
|
|
const url = option.url || art.option.url;
|
|
const width = option.width || 160;
|
|
const number = option.number || 100;
|
|
const scale = option.scale || 1;
|
|
create({ url, width, number }, (config) => {
|
|
art.thumbnails = {
|
|
...config,
|
|
column: 10,
|
|
number,
|
|
width,
|
|
scale
|
|
};
|
|
});
|
|
});
|
|
return {
|
|
name: "artplayerPluginAutoThumbnail"
|
|
};
|
|
};
|
|
}
|
|
export {
|
|
artplayerPluginAutoThumbnail as default
|
|
};
|