HTML视频章节的自动缩略图/屏幕截图

Question

我发现了一些示例，其中人们使用canvas和javascript获取正在运行的视频的多个屏幕截图。 你可以看到这些例子here或here。

该代码设置时间间隔，将当前时间范围绘制到画布并使用它创建屏幕截图。

我想知道是否可以使用类似的技术来为视频的章节自动创建一种预览。 但是这需要在视频开始之前抓取一堆截图。 我没有实现这个，所以我想知道，如果它是可能的。

我知道可以使用章节的截图，但是我想让这个过程自动化。

在此先感谢您的答案。

Answer 1

这在理论上可以通过跳转到特定时间的视频（比如每10秒）使用video.currentTime，等待框架可用于（使用progress事件），绘制框架画布（canvas.drawImage）来完成，以某种方式存储它（例如，具有image.src = canvas.toDataURL的图像阵列）。

但是，这个过程需要时间，因为至少需要在浏览器中加载视频的相关部分，以便抓取帧。视频在这个过程中不可播放，因为它被跳到不同的帧。

这种行为通常是不可接受的，但它确实取决于您的具体使用情况。