2

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

4

1 回答 1

1

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

  1. 悬停时,使缩略图加载“imagename+n”,直到达到 404(或者您可以硬编码要加载的帧数)
  2. 自动从您的帧中生成 gif,并在悬停时将静态图像与 gif 交换
  3. 如果是我们所说的播放器,那么你可以使用与#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 回答