html5-video - 如何为 HTML 视频创建类似 youtube 的搜索栏预览图像

Question

对于 Youtube 上的许多视频，如果将鼠标悬停在搜索栏上，则会弹出一个小图像，反映视频中该位置的帧。

如果使用 HTML 视频元素，有什么方法可以创建它吗？

标签： html5-video

Answer 1

缩略图实际上通常包含在单独的媒体流或“轨道”中，该媒体流或“轨道”在服务器端创建并作为流式视频的一部分交付。

客户端下载此流，当用户搜索时，它会显示最接近用户搜索时间的缩略图。

您可以看到播放器如何使用 dash.js 参考播放器处理此问题的一个很好的示例：

• https://reference.dashif.org/dash.js/latest/samples/thumbnails/thumbnails.html

在浏览器上动态生成缩略图将需要传送、解码视频并在用户正在寻找的点显示帧，这通常在可用的时间内无法用于流式视频。