寫在前面
video標簽,獲取第一幀作為poster。網上能找着很多案例,很容易實現,在pc端 效果明顯。但是在移動端,這些實現方式並不能起作用。原因是 移動端 對video標簽的限制,許多video事件 譬如 loadeddata 等事件 並不好使。
解決思路:
使用自動播放,利用timeupdate 事件,讓其停留在第一幀。
實現(vue)
特殊處理:
華為瀏覽器 無法自動播放, timeupdate 事件會導致 第一次播放出現暫停。解決 方式就是 video 上方覆蓋一層div,利用 點擊事件 手動轉換。
寫在最后
該方式只是一種 折中方案,最好的體驗效果 還是由后台 傳輸圖片過來,設置poster