移動端視頻踩坑實錄

最近剛結束一個移動端涉及視頻播放的小項目，踩了很多坑，現記錄在此：

一、ios系統中讓視頻寬高都100%鋪滿所在父層

設置width="100%" height="100%"在ios中是沒法實現寬高都100%的，應該設置 video 的樣式：

width:100%;
height:100%;
object-fit:fill;

 

二、安卓系統中禁止視頻全屏

playsinline只能禁止ios全屏，不能禁安卓全屏，要在安卓禁止視頻全屏須在 video 中設置

x5-playsinline="true"

另外，在安卓手機若是不由止視頻全屏的話，在視頻播放完後會跳到一個視頻推薦頁面

 

三、視頻在谷歌瀏覽器不能自動播放

在 video 中加了 autoplay 發如今谷歌瀏覽器中並不能默認播放，若是強制 play() 則會出現 「Uncaught (in promise) DOMException」 錯誤，這是由於 Chrome 的 autoplay 政策在2018年4月作了更改，必須有用戶點擊等行爲發生時才能播放（音頻也是如此），想要解決這個問題必須在客戶端修改瀏覽器設置：

第一步，在chrome瀏覽器中輸入：chrome://flags/#autoplay-policy；

第二步，在Autoplay policy中將Default改成No user gesture is required；

第三步，點擊下方的「RELAUNCH NOW」重啓瀏覽器就大功告成了！

 

四、視頻在微信瀏覽器中打開的自動播放

在微信瀏覽器打開視頻若是想要實現自動播放須在 wx.ready 中設置該視頻 play()，或者用以下代碼：

document.addEventListener('WeixinJSBridgeReady', function () {
   mp4.play()
})

 

五、如何去掉視頻播放前的黑屏

視頻下載下來後在播放以前還須要處理流數據，若是視頻比較大處理流數據時間比較長就會致使播放前的黑屏（也多是一片白，總之是沒有播聽任何內容），這時能夠經過判斷視頻播放時間（currentTime）是否大於0來判斷視頻是否已經能夠播放了，若是currentTime大於0再把視頻層顯示出來就能夠有效跳過播放前的黑屏現象，視頻層顯示出來時注意要把視頻的currentTime從新設爲0，不然會出現視頻前面幾幀缺失的狀況。

 

六、mp4+mp3 在ios和安卓不一樣的表現

若是在播放視頻時有其餘的音頻背景音樂，在安卓中播放視頻的同事音頻不能同時播放，在 ios 中則能夠正常聽到背景音樂，由於在安卓中一個媒體播放是排斥其餘媒體播放的。