如何製作FLV視頻的懸浮預覽？

Question

我正在開發一個託管視頻的網站;我確實安裝了ffmpeg並且功能正常。我知道如何從視頻中提取單幀以用作顯示圖像，但是我需要找到一種方法，當某人懸停在視頻上時，它會翻轉幾幀。我一直在尋找解決方案的日子，但似乎沒有任何工作。任何幫助？

Answer 1

有很多方法可以解決這個問題。我不太明白，如果您是在播放器中預覽或在縮略圖上預覽，我將假設後者（但邏輯在任何情況下都保持不變）。
一旦你從電影中提取了你的幀，那麼最難的部分就完成了。你現在可以做什麼：

1. 上懸停，使縮略圖加載「imagename + N」，直到達到404（或者你可以硬編碼的幀數來加載）
2. 自動生成的GIF出在懸停時，用gif交換靜態圖像如果它是我們正在討論的玩家，那麼您可以使用與＃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} 

這不是很優雅，絕對不會爲多個縮略圖工作（你必須如果你沒有在每個縮略圖的本地存儲變量，或者使用它們的data-attribute或者使用閉包，那麼問題就會出現），但它提供了一個想法。