2
A
回答
1
將n
幀轉換成動畫gif。使用視頻的單個幀作爲默認狀態圖像,並在懸停時進行交換。
Stop a gif animation onload, on mouseover start the activation
6
你不會找到一個特定的插件,將捕獲所有的這種行爲,創建這將涉及使用幾個不同的技術。
捕捉幀
第一步將來自視頻稍後捕捉的幀使用。如果網站允許用戶上傳視頻,那麼您將需要某種方式來處理它們,命令行工具ffmpeg(http://ffmpeg.org/)將允許您這樣做,如何提取單個幀的類似問題已在此處得到解答:http://ubuntuforums.org/showthread.php?t=1141293
如果您使用Rails作爲您的框架,那麼您使用Paperclip或CarrierWave等文件上傳工具爲shell提供了一些很好的鉤子,供您在上傳完成後使用並需要處理它。您可能還想將視頻轉換爲兼容的格式,以便在瀏覽器中投放和顯示,可能通過Flash播放器或HTML5視頻元素。
顯示幀
一旦幀已被抓獲,你需要將它們存儲在服務器上,並將它們與視頻文件相關聯,再次回形針或CarrierWave會使這更容易做到。前端邏輯將按照以下步驟操作:
- 將視頻文件渲染到頁面,將第一個捕獲的幀顯示爲默認值。
- 用戶將鼠標移動到觸發mouseenter事件的元素上。
- 您捕獲mouseenter事件並啓動一個setInterval計時器。
- 間隔的每一步,您將顯示的縮略圖替換爲列表中的下一個縮略圖。也許你可以用這種方式來命名服務器上的文件,以便構建下一個文件的名稱。當您到達列表的末尾時,只需再次顯示第一個縮略圖即可。
- 當用戶將鼠標移出元素時,使用clearInterval命令清除間隔。
相關問題
- 1. 如何創建縮略圖或預覽視頻?
- 2. JavaScript的視頻縮略圖預覽
- 3. WCF服務創建視頻縮略圖
- 4. 從路徑創建視頻縮略圖
- 5. ASP.Net:上傳視頻,創建縮略圖
- 6. ffmpeg-php創建視頻縮略圖
- 7. iPhone:創建視頻縮略圖
- 8. 創建HTML5視頻縮略圖
- 9. Bing視頻搜索如何獲取縮略圖並製作視頻預覽?
- 10. 如何創建嵌入視頻代碼的縮略圖圖像
- 11. 如何創建可調整大小的Qt縮略圖預覽?
- 12. 視頻縮略圖
- 13. 如何使用Python從視頻創建縮略圖
- 14. 如何使用魔杖爲視頻創建縮略圖?
- 15. 如何創建視頻縮略圖(extension.wmv,.avi)
- 16. 如何在Codename中創建視頻縮略圖?
- 17. 如何使用C創建視頻縮略圖#
- 18. 如何在視頻上傳時創建縮略圖? [php/codeigniter]
- 19. 如何使用django爲視頻創建縮略圖?
- 20. 如何在android apilevel> 14中爲視頻創建縮略圖?
- 21. 從大圖像動態創建縮略圖預覽圖像
- 22. Powerpoint預覽和縮略圖
- 23. 如何獲得縮略圖視頻
- 24. 如何顯示YouTube視頻縮略圖
- 25. 如何獲取視頻縮略圖?
- 26. 如何在Slick.js中創建帶圖像預覽的縮略圖旋轉木馬?
- 27. 從視頻文件創建縮略圖返回null位圖
- 28. 從視頻網址創建縮略圖圖像!
- 29. 從PHP文件,視頻,圖像創建縮略圖
- 30. 使用php或Firefox擴展創建網頁預覽縮略圖
創建縮略圖並使用onmouseover事件來滑動圖像。 – Ibu
是你的視頻嗎? – naveen