video標簽,在移動端獲取第一幀作為展示


寫在前面

video標簽,獲取第一幀作為poster。網上能找着很多案例,很容易實現,在pc端 效果明顯。但是在移動端,這些實現方式並不能起作用。原因是 移動端 對video標簽的限制,許多video事件  譬如 loadeddata 等事件 並不好使。

解決思路:

使用自動播放,利用timeupdate 事件,讓其停留在第一幀。

實現(vue)

特殊處理:

華為瀏覽器 無法自動播放, timeupdate 事件會導致 第一次播放出現暫停。解決 方式就是 video 上方覆蓋一層div,利用 點擊事件 手動轉換。

寫在最后

該方式只是一種 折中方案,最好的體驗效果 還是由后台 傳輸圖片過來,設置poster


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM