悬停时的动态视频缩略图

Question

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

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

这与JS和画布有关吗？

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

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

Answer 1

YouTube有预先渲染的拇指，这些拇指存储在一个包含十列的网格中的单个图像中，并且需要多少行。我见过的图像是低质量的jpg 800像素，大拇指80像素？ （取决于方面）当用户悬停最接近该时间的拇指时。

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

空白问题可能是因为没有等待搜索事件。

尝试

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

但这并不总是有效我找到了。因此，听取所有适当的事件是有收获的，并且只在视频准备好时才进行搜索。这是a list of media events，这将有所帮助。

由于视频没有改变，最好的办法是在视频上传后在服务器上创建拇指。低质量的jpgs似乎已成为现实，客户可以比视频的一小部分更快地加载。

Answer 2

但是，这可以通过结合使用HTML5 canvas来实现。您将必须执行以下操作。

1. 向HTML5视频添加一个timeupdate事件监听器
2. 每1秒钟捕获一次当前时间并创建一个元素（在这种情况下为span），并将当前时间的值绑定到新创建的span的特殊属性中。
3. 将每个创建的span元素追加到HTML5 progress元素（我想您使用的是'div'而不是'progress'元素。
4. 将mouseenter事件侦听器添加到创建的跨度中。
5. 每当用户悬停进度条时，鼠标最终都会触摸跨度之一。然后，动态创建视频元素，并使用主要HTML5视频源设置src属性。然后，将currentTime设置为悬停跨度的值，并将其快照到一个已经画布的元素。
6. 在那里，向用户显示当前的frameRate。

脚本编写完全是关于使代码段起作用的操纵和逐步过程。