我发现了一些示例，人们使用画布和 javascript 对正在运行的视频进行多张截图。 您可以查看这些示例 here 或 here。
代码设置时间间隔，将当前时间帧绘制到画布上并使用它来创建屏幕截图。
我想知道是否可以使用类似的技术为视频的章节自动创建一种预览。 但这需要在视频开始之前抓取一堆屏幕截图。 我没有实现这一点，所以我想知道它是否可能。
我知道可以为章节使用预先截取的屏幕截图，但我想自动化这个过程。
提前感谢您的回答。
【问题讨论】：
标签： javascript html video canvas vtt
这在理论上可以通过使用video.currentTime跳转到视频中的特定时间（比如每10秒），等待帧可用（使用progress事件），将帧绘制到画布（ canvas.drawImage) 并以某种方式存储它（比如一组具有image.src = canvas.toDataURL 的图像）。
但是，此过程需要时间，因为至少需要将视频的相关部分加载到浏览器中，以便抓取帧。在此过程中，视频将无法播放，因为它正在跳到不同的帧。
这种行为通常是不可接受的，但它确实取决于您的具体用例。
【讨论】：
<video> 元素：一个供用户观看，另一个用于截屏。
<video> 元素，并将视频的src 设置为playback range。绘制完视频元素后不要忘记删除它。此外，为了内存，存储 Blob 比存储 dataURI 字符串版本更好。
oncanplay 事件（不是progress），它可以工作，但它很诡异