Javascript 悬停时动态视频缩略图

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

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

使用JS和canvas是否可行

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

---

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

YouTube已经预先渲染了拇指，它们存储在一个网格中的单个图像中，有十列，需要多少行。我所看到的图姆图像是低质量的jpg 800像素，给拇指80像素乘？？（取决于方向）当用户将拇指悬停在离屏幕最近的位置时，将显示该时间

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

空白的问题可能是因为没有等待seek事件

试一试

但我发现这并不总是有效的。因此，聆听所有适当的事件，并且只在视频准备好时进行搜索是值得的。这是有帮助的

---

因为视频不会改变，所以最好在上传视频后在服务器上创建拇指。低质量的JPG似乎很流行，客户端加载JPG的速度甚至比视频的一小部分都要快。

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

将timeupdate事件侦听器添加到HTML5视频

每隔1秒，获取当前时间并创建一个元素（本例中为span），并将当前时间的值绑定到新创建的span的特殊属性中

将每个创建的span元素附加到HTML5进度元素中（我假设您使用的是'div'而不是'progress'元素）

将mouseenter事件侦听器添加到创建的范围

每当用户悬停在进度条上时，鼠标最终会触及其中一个跨度。然后，动态创建一个视频元素，并使用主HTML5视频源设置src属性。然后，将currentTime设置为悬停跨度的值，并将其快照为已存在的画布元素

在这里，向用户显示当前帧速率

---

脚本编写是关于操作和逐步处理代码的过程。

您还可以编写一个函数，用于侦听播放/缓冲区事件并在画布上创建快照。因此，在任何给定时间，我们都会在当前缓冲区上创建屏幕截图。这些画布被标记到每个关键帧，默认情况下隐藏。When用户将鼠标悬停在时间线上，我们将显示相关的画布。我可以创建一个JSFIDLE并与您共享一个示例。是的@VijayDev我希望看到这个简单实现。我曾想过这个，但似乎它可以开始使用大量内存？但不确定……您现在可能已经移动和/或修复了这个问题，我看到您已经使用了我想知道如果画布中的空白图像问题是CORS相关的。如果图像来自不同的域，Cuvas需要特殊的标题，即使CSS背景图像不这样。@ Trasy:是的，我已经开始了，我不知道我用它做了什么。谢谢。是“挑战”，我感觉到了限制。我会尝试新的事件监听器并报告。我知道我可以制作预制作的图像，但为什么不尝试解决一个好的挑战，你知道吗？谢谢你的2美分@Blindman67祝你好运，如果你找到了解决方案，一定会回来。你最好的办法是以最快的速度播放视频它有速度，每隔一段时间抓住大拇指，因为一旦你停下来，寻找或尝试穿梭播放，你会有很大的减速。如果你能控制视频编码，webm和许多关键帧将有帮助。是的，我将控制编码，所以我可能会保存一个超级蹩脚的版本，适合80px的宽度，等等…和我怀疑在视频中寻找任何一个点的大小都不应该太糟糕。

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