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

Question

我找到了一些示例，其中人们使用画布和javascript来拍摄正在运行的视频的多个屏幕截图。 您可以看到这些示例here或here。

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

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

我知道可以使用预先设定的章节截图，但我想自动完成此过程。

提前感谢您的回答。

Answer 1

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

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

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