如何創建視頻預覽縮略圖？

Question

我想在用戶將鼠標懸停在視頻的縮略圖上時創建效果，它將通過顯示該視頻的特定數量的幀來預覽視頻。

是否有一個jQuery插件或教其他類型的教程，教這種效果？

Answer 1

將n幀轉換成動畫gif。使用視頻的單個幀作爲默認狀態圖像，並在懸停時進行交換。

Stop a gif animation onload, on mouseover start the activation

Answer 2

你不會找到一個特定的插件，將捕獲所有的這種行爲，創建這將涉及使用幾個不同的技術。

捕捉幀

第一步將來自視頻稍後捕捉的幀使用。如果網站允許用戶上傳視頻，那麼您將需要某種方式來處理它們，命令行工具ffmpeg（http://ffmpeg.org/）將允許您這樣做，如何提取單個幀的類似問題已在此處得到解答：http://ubuntuforums.org/showthread.php?t=1141293

如果您使用Rails作爲您的框架，那麼您使用Paperclip或CarrierWave等文件上傳工具爲shell提供了一些很好的鉤子，供您在上傳完成後使用並需要處理它。您可能還想將視頻轉換爲兼容的格式，以便在瀏覽器中投放和顯示，可能通過Flash播放器或HTML5視頻元素。

顯示幀

一旦幀已被抓獲，你需要將它們存儲在服務器上，並將它們與視頻文件相關聯，再次回形針或CarrierWave會使這更容易做到。前端邏輯將按照以下步驟操作：

• 將視頻文件渲染到頁面，將第一個捕獲的幀顯示爲默認值。
• 用戶將鼠標移動到觸發mouseenter事件的元素上。
• 您捕獲mouseenter事件並啓動一個setInterval計時器。
• 間隔的每一步，您將顯示的縮略圖替換爲列表中的下一個縮略圖。也許你可以用這種方式來命名服務器上的文件，以便構建下一個文件的名稱。當您到達列表的末尾時，只需再次顯示第一個縮略圖即可。
• 當用戶將鼠標移出元素時，使用clearInterval命令清除間隔。