javascript - 悬停时动态视频缩略图

Question

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

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

这对 JS 和 Canvas 可行吗？

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

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

Answer 1

YouTube 具有预渲染的缩略图，这些缩略图存储在具有十列的网格中的单个图像中，需要多少行。我看到的大拇指图像是低质量的 jpg 800 像素，给大拇指 80 像素 ?? (取决于方面)当用户悬停最接近那个时间的拇指时。

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

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

尝试

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

但我发现这并不总是有效。因此，聆听所有适当的事件并仅在视频准备就绪时才寻找是值得的。这是 a list of media events这会有所帮助。

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