悬停动态视频缩略图

Question

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

模仿youtube视频播放器，当你在进度栏和弹出式显示与一个缩略图。我知道youtube保存了一张图片，并根据悬停的位置将精灵重新定位在缩略图查看器框架中。

这与JS和canvas有关吗？

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

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

Answer 1

YouTube预先呈现了拇指，这些拇指存储在一个包含10列的网格中的单个图像中，以及需要多少行。我所见过的thum图像是低质量的jpg 800像素，大小为80像素?？(取决于方面)当用户悬停时，最接近那个时间的拇指就会显示出来。

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

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

试一试

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

但这并不总是起作用，我发现。所以，只在视频准备好的时候才能听到所有适当的事件，这是值得的。这里是媒体事件列表，它会有所帮助。

由于视频没有改变，你最好的选择是在视频上传后在服务器上创建拇指。低质量的jpgs似乎是上上下下的，而且客户将比视频中的一小部分更快地加载。

Answer 2

但是，这可以通过使用HTML5画布的组合来实现。您必须执行以下操作。

1. 向HTML5视频添加时间更新事件侦听器
2. 每1秒，获取当前时间并创建一个元素(这种情况下是span )，并将当前时间的值绑定到新创建的span的一个特殊属性中。
3. 将每个创建的span元素附加到您的HTML5进度元素(我想您使用的是'div‘而不是' progress’元素。
4. 向创建的span中添加一个mouseenter事件侦听器。
5. 每当用户在进度栏上盘旋时，鼠标最终都会触及其中一个跨度。然后，动态创建一个视频元素，并使用主HTML5视频源设置src属性。然后，将currentTime设置为悬浮span的值，并将其快照为已经具有的画布元素。
6. 在这里，您向用户显示当前的frameRate。

脚本是所有的操作和逐步的过程，使代码块的工作。