HTML 视频中的章节自动 Thumbnails/Screenshots
Automatic Thumbnails/Screenshots for Chapter in HTML Video
我找到了一些示例，其中人们使用 canvas 和 javascript 对 运行 视频进行了多次截屏。
你可以看到这些例子 here or here.
代码设置时间间隔，将当前时间范围绘制到 canvas 并使用它来创建屏幕截图。
我想知道是否可以使用类似的技术来自动为视频的章节创建一种预览。
但这需要在视频开始之前抓取一堆屏幕截图。
我没能实现这个，所以我想知道它是否可能。
我知道可以为章节使用预先截取的屏幕截图，但我想自动执行此过程。
提前感谢您的回答。
这在理论上可以通过使用 video.currentTime 跳转到视频中的特定时间（比如每 10 秒），等待帧可用（使用 progress 事件），绘图来完成帧到 canvas (canvas.drawImage) 并以某种方式存储它（比如具有 image.src = canvas.toDataURL 的图像数组）。
但是，此过程需要时间，因为至少需要将视频的相关部分加载到浏览器中才能抓取帧。视频在播放过程中将无法播放，因为它被跳到不同的帧。
这种行为通常是不可接受的，但这实际上取决于您的具体用例。
我找到了一些示例，其中人们使用 canvas 和 javascript 对 运行 视频进行了多次截屏。 你可以看到这些例子 here or here.
代码设置时间间隔，将当前时间范围绘制到 canvas 并使用它来创建屏幕截图。
我想知道是否可以使用类似的技术来自动为视频的章节创建一种预览。 但这需要在视频开始之前抓取一堆屏幕截图。 我没能实现这个，所以我想知道它是否可能。
我知道可以为章节使用预先截取的屏幕截图，但我想自动执行此过程。
提前感谢您的回答。
这在理论上可以通过使用 video.currentTime 跳转到视频中的特定时间（比如每 10 秒），等待帧可用（使用 progress 事件），绘图来完成帧到 canvas (canvas.drawImage) 并以某种方式存储它（比如具有 image.src = canvas.toDataURL 的图像数组）。
但是，此过程需要时间，因为至少需要将视频的相关部分加载到浏览器中才能抓取帧。视频在播放过程中将无法播放，因为它被跳到不同的帧。
这种行为通常是不可接受的，但这实际上取决于您的具体用例。