js视频生成缩略图

在JavaScript中生成视频缩略图可以通过HTML5的<video>元素结合Canvas来实现。以下是基础概念和相关步骤：

基础概念

HTML5 Video Element: 用于在网页中嵌入视频。
Canvas API: 提供了一个可以通过JavaScript脚本来绘制图形、动画、游戏等的环境。
Media Metadata Extraction: 从视频文件中提取元数据，如帧信息。

实现步骤

加载视频: 使用<video>元素加载视频文件。
设置时间点: 指定要截取缩略图的时间点（通常是视频开始后的几秒）。
绘制到Canvas: 将视频帧绘制到Canvas上。
导出图片: 从Canvas导出图像数据，通常是PNG或JPEG格式。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Video Thumbnail Generator</title>
</head>
<body>

<video id="video" src="your-video-file.mp4" crossorigin="anonymous" style="display:none;"></video>
<canvas id="canvas" width="320" height="240"></canvas>
<img id="thumbnail" alt="Video Thumbnail">

<script>
function generateThumbnail(videoPath, timePoint, callback) {
    const video = document.getElementById('video');
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    const thumbnail = document.getElementById('thumbnail');

    video.src = videoPath;
    video.currentTime = timePoint;

    video.addEventListener('seeked', function() {
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
        const dataURL = canvas.toDataURL('image/png');
        thumbnail.src = dataURL;
        if (callback) callback(dataURL);
    }, { once: true });
}

// 使用函数生成缩略图
generateThumbnail('your-video-file.mp4', 5, function(thumbnailURL) {
    console.log('Thumbnail generated:', thumbnailURL);
});
</script>

</body>
</html>