移動端視頻踩坑實錄
阿新 • • 發佈：2019-01-31
weixin 還需要 lin 移動端 代碼 時間 播放視頻 禁止 自動播放
最近剛結束一個移動端涉及視頻播放的小項目，踩了不少坑，現記錄在此：
1、ios系統中讓視頻寬高都100%鋪滿所在父層
設置width="100%" height="100%"在ios中是無法實現寬高都100%的，應該設置 video 的樣式：
width:100%;
height:100%;
object-fit:fill;
2、安卓系統中禁止視頻全屏
playsinline只能禁止ios全屏，不能禁安卓全屏，要在安卓禁止視頻全屏須在 video 中設置x5-playsinline="true"
另外，在安卓手機如果不禁止視頻全屏的話，在視頻播放完後會跳到一個視頻推薦頁面
3、video中src的地址不能為相對路徑
video 中路徑須為絕對路徑或者 base64 數據
4、視頻在微信瀏覽器中打開的自動播放
在微信瀏覽器打開視頻如果想要實現自動播放須在 wx.ready 中設置該視頻 play()，或者用如下代碼：
document.addEventListener(‘WeixinJSBridgeReady‘, function () { mp4.play() })
5、如何去掉視頻播放前的黑屏
視頻下載下來後在播放之前還需要處理流數據，如果視頻比較大處理流數據時間比較長就會導致播放前的黑屏（也可能是一片白，總之是沒有播放任何內容），這時可以通過判斷視頻播放時間（currentTime）是否大於0來判斷視頻是否已經可以播放了，如果currentTime大於0再把視頻層顯示出來就可以有效跳過播放前的黑屏現象，視頻層顯示出來時註意要把視頻的currentTime重新設為0，否則會出現視頻前面幾幀缺失的情況。
6、mp4+mp3 在ios和安卓不同的表現
如果在播放視頻時有其他的背景音樂，在安卓中背景音樂不能播放，在 ios 中則可以正常聽到背景音樂，因為在安卓中一個媒體播放是排斥其他媒體播放的。這個時候如果想要兼容
移動端視頻踩坑實錄