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

Posted 2023-03-07

【中文标题】HTML 视频中章节的自动缩略图/屏幕截图

【英文标题】：Automatic Thumbnails/Screenshots for Chapter in HTML Video

【发布时间】：2017-01-26 18:12:25

【问题描述】：

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

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

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

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

提前感谢您的回答。

【参考方案1】：

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

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

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

【讨论】：

提示：使用两个<video> 元素：一个供用户观看，另一个用于截屏。

其他提示：如果服务器可以处理，您甚至可以使用更多<video> 元素，并将视频的src 设置为playback range。绘制完视频元素后不要忘记删除它。此外，为了内存，存储 Blob 比存储 dataURI 字符串版本更好。

谢谢，我也想出了两个想法，但在实施时遇到了问题。我不知道进度事件。我会试试看，哪一个运行最流畅。

我在这里做了一个演示，看看这个想法是否可行：codepen.io/giladaya/pen/ygzWKN 它使用oncanplay 事件（不是progress），它可以工作，但它很诡异