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

时间:2017-01-26 18:12:26

标签: javascript html5 video canvas vtt

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

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

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

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

提前感谢您的回答。

1 个答案:

答案 0 :(得分:0)

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

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

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