如何制作FLV视频的悬浮预览？

我正在开发一个托管视频的网站;我确实安装了ffmpeg并且功能正常。我知道如何从视频中提取单帧以用作显示图像，但是我需要找到一种方法，当某人悬停在视频上时，它会翻转几帧。我一直在寻找解决方案的日子，但似乎没有任何工作。任何帮助？如何制作FLV视频的悬浮预览？

来源

2013-02-13 keithp

重复此过程以获得跨越整个视频的10帧，然后使用javascript在悬停时通过它们进行闪光。 – 2013-02-13 00:54:31

这就是我想我必须要做的事情，但我不知道如何编写java。我可以理解，但如果你可以发表一个例子。 – keithp 2013-02-13 01:47:09

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

上悬停，使缩略图加载“imagename + N”，直到达到404（或者你可以硬编码的帧数来加载）
自动生成的GIF出在悬停时，用gif交换静态图像如果它是我们正在讨论的玩家，那么您可以使用与＃1相同的逻辑：按顺序加载每一帧。

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

HTML

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

$('.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}

这不是很优雅，绝对不会为多个缩略图工作（你必须如果你没有在每个缩略图的本地存储变量，或者使用它们的data-attribute或者使用闭包，那么问题就会出现），但它提供了一个想法。

来源

2013-02-13 00:57:03 Xananax

是的，我理解这个概念，采取x框架和交换与Java，但如果你可以发布的例子，将是惊人的！ – keithp 2013-02-13 01:46:12

使用jquery添加小提琴和更彻底的解释 – Xananax 2013-02-13 02:09:28

如何制作FLV视频的悬浮预览？

回答

相关问题