我正在开发一个托管视频的网站;我确实安装了 ffmpeg 并且可以正常工作。我知道如何从视频中提取单帧以用作显示图像,但我需要找到一种方法,当有人将鼠标悬停在视频上时,它会翻转几帧。我几天来一直在寻找解决方案,但似乎没有任何效果。有什么帮助吗?
问问题
1500 次
1 回答
1
有很多方法可以解决这个问题。我真的不明白您是指播放器中的预览还是缩略图上的预览;我将假设后者(但无论如何逻辑都保持不变)。
从电影中提取帧后,最难的部分就完成了。你现在可以做什么:
- 悬停时,使缩略图加载“imagename+n”,直到达到 404(或者您可以硬编码要加载的帧数)
- 自动从您的帧中生成 gif,并在悬停时将静态图像与 gif 交换
- 如果是我们所说的播放器,那么你可以使用与#1相同的逻辑:让它按顺序加载每一帧。
我赶紧摆弄着什么。下面的这个例子是解释小提琴的伪代码
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}
它不是很优雅,并且绝对不适用于多个缩略图(如果您不为每个缩略图本地存储变量,无论是使用它们的数据属性还是使用闭包,您都会遇到问题),但它提供了一个想法。
于 2013-02-13T00:57:03.187 回答