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

Question

我发现了一些例子，人们使用画布和 javascript 对正在运行的视频进行多张截图。您可以在此处或此处查看这些示例。

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

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

我知道可以为章节使用预先截取的屏幕截图，但我想自动化这个过程。

提前感谢您的回答。

Answer 1

这在理论上可以通过使用 跳转到视频中的特定时间（比如每 10 秒）video.currentTime、等待帧可用（使用progress事件）、将帧绘制到画布 ( canvas.drawImage) 并以某种方式存储它来完成（比如具有image.src = canvas.toDataURL) 的图像数组。

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

这种行为通常是不可接受的，但这实际上取决于您的具体用例。