如何对flv视频进行悬停预览？

Question

我正在开发一个托管视频的网站；我确实安装了 ffmpeg 并且可以正常工作。我知道如何从视频中提取单帧以用作显示图像，但我需要找到一种方法，当有人将鼠标悬停在视频上时，它会翻转几帧。我几天来一直在寻找解决方案，但似乎没有任何效果。有什么帮助吗？

Answer 1

有很多方法可以解决这个问题。我真的不明白您是指播放器中的预览还是缩略图上的预览；我将假设后者（但无论如何逻辑都保持不变）。
从电影中提取帧后，最难的部分就完成了。你现在可以做什么：

1. 悬停时，使缩略图加载“imagename+n”，直到达到 404（或者您可以硬编码要加载的帧数）
2. 自动从帧中生成 gif，并在悬停时将静态图像与 gif 交换
3. 如果是我们所说的播放器，那么您可以使用与 #1 相同的逻辑：使其按顺序加载每一帧。

我很快fiddled something。 下面这个例子是解释小提琴的伪代码

html

<div class="thumbnail">
   <div class="image">
    <img src="something" class="loaded"/>
   </div>
</div>

js

$('.thumbnail')
    .on('mouseenter',function(){next($(this));})
    .on('mouseleave',function(){stop($(this));})

function next(){
   start timer
   on time, go to next thumbnail
   does it exist? then swap current thumbnail with next thumbnail and stop;
   does it not? check number of thumbnails loaded
     is it equal to 6? then we reached the end, loop back to start and stop;
     is it not? then add the new thumb and begin loading it
        while doing that, loop back to start;
}

function stop(){stop the timer}

它不是很优雅，并且绝对不适用于多个缩略图（如果您不为每个缩略图在本地存储变量，无论是使用它们的数据属性还是使用闭包，都会遇到问题），但它提供了一个想法。