悬停时的动态视频缩略图

Question

我正在用 HTML5 和 Javascript 创建一个视频播放器，我想知道是否有人解决了创建动态缩略图的挑战。

模仿 youtube 视频播放器，将鼠标悬停在进度条上，并显示一个带有缩略图的弹出窗口。我知道 youtube 会保存图像并根据悬停在缩略图查看器框架中的位置重新定位精灵。

这对 JS 和画布可行吗？

我现在正在做的是...将鼠标悬停在我的进度条上会创建视频元素的副本。然后我在复制的元素上设置 currentTime。然后我使用画布抓取快照。我不知道为什么，但图像似乎是空白的。

也许有人遇到过这个问题？

Answer 1

YouTube 已预渲染拇指存储在一个网格中的单个图像中，该网格有十列以及需要多少行。我看到的拇指图像是低质量的 jpg 800 像素，大拇指 80 像素 ?? （取决于方面）当用户悬停最接近该时间的拇指时会显示。

在客户端创建拇指会有问题，因为视频不是完全随机访问的。寻找随机位置涉及将视频移动到最近的前一个关键帧，然后解码所有帧，直到到达您请求的帧。根据格式、编码选项、关键帧的间距（如果有滚动的眼睛）以及如果已加载查找位置，则查找某个位置可能会非常慢。获得一组视频的拇指可能需要很长时间。HTML5 视频 API 的另一个问题是它只有一个播放通道，因此当您在寻找拇指时，您无法观看视频。

您的空白问题可能是由于没有等待搜索事件。

尝试

video.addEventListener("seeked",function(e){
    // snap shot code here
});

但是我发现这并不总是有效。因此，收听所有适当的事件是值得的，并且仅在视频准备好时才寻找。以下是有帮助的媒体活动列表。

由于视频不会改变，因此您最好的办法是在视频上传后在您的服务器上创建拇指。低质量的 jpg 似乎很流行，并且会比视频的一小部分更快地被客户端加载。