h5視訊播放踩坑記錄

william_li發表於2019-03-23
H5

隨著抖音、快手這類的視訊類app的火爆，移動端h5視訊類應用也隨之興起，使用video播放的場景也越來越多，本篇文章主要例舉了移動端視訊播放的一些場景和個人在開發過程中遇到的一些問題，希望在看過這篇文章後，能對開發者在移動端使用video播放時快速開發減少踩坑

全屏播放

視訊的全屏播放是移動端一個很常見的場景，因此我們需要對video設定全屏播放，全屏播放用到的方法是requestFullscreen()，再加上考慮瀏覽器的相容性問題，需要加上相容程式碼：

let ele = document.getElementById('video')
if (ele.requestFullscreen) {
  ele.requestFullscreen()
} else if (ele.mozRequestFullScreen) {
  ele.mozRequestFullScreen()
} else if (ele.webkitRequestFullScreen) {
  ele.webkitRequestFullScreen()
}
ele.play()
複製程式碼

獲取video元素節點，然後判斷不同瀏覽器的requestFullscreen屬性，呼叫不同的請求全屏的方法，這樣就能保證視訊的全屏播放

微信瀏覽器全屏播放

為什麼要單獨提及微信瀏覽器下的視訊全屏播放能？因為在微信下你可以選擇使用原生瀏覽器核心渲染video還是啟用騰訊的x5核心渲染，有什麼區別呢？如果使用原生渲染，那就和在普通瀏覽器渲染一樣，但是如果啟用騰訊x5核心渲染，當視訊播放時，x5核心會強制視訊全屏播放，但是目前並不支援ios，接下來就一起來看微信中x5核心全屏播放表現

x5核心同層播放

通過給video標籤新增x5-video-player-type="h5"屬性啟用x5核心，啟用x5核心渲染video雖然會全屏播放視訊，但是這樣也提供了更好的使用者體驗，同時x5核心渲染還有一個優點就是支援同層渲染，video播放時層級不再是最高階，可以有元素浮在video上方，大概效果如下圖： WechatIMG310.jpeg

h5視訊播放踩坑記錄
如上圖所示，這是全屏播放的視訊，同時在這個視訊上面層疊了一個透明的浮層，但是會明顯發現視訊播放時有黑邊，那是因為沒有宣告x5-video-player-fullscreen，如果不申明此屬性，頁面得到視口區域為原始視口大小(視訊未播放前)，比如在微信裡，會有一個常駐的標題欄，如果不宣告此屬性，這個標題欄高度不會給頁面，播放時會平均分為兩塊（上下黑塊），設定了屬性效果圖如下： WechatIMG312.jpeg
h5視訊播放踩坑記錄
會明顯看到視訊上頂到標題欄，黑邊消失，如果此時視訊的寬高使用的並不是動態計算的單位，你還需要重新賦值視訊寬高：

window.onresize = function(){
  test_video.style.width = window.innerWidth + "px";
  test_video.style.height = window.innerHeight + "px";
}
複製程式碼

playsinline

當在微信瀏覽器下想用x5核心渲染，但是又不想強制全屏播放怎麼辦呢？這個時候就要playsinline屬性了，這個屬性也能解決一些其他的移動端瀏覽器強制全屏播放的問題，只需要設定playsinline="true"，webkit-playsinline="true"宣告，就可以了，但是在x5下渲染，也就是說在android下如果要用x5渲染一定會全屏播放

事件差異

loadedmetadata

此事件表示媒體的後設資料已經載入完畢，現在所有的屬性包含了它們應有的有效資訊，常用的資訊有duration，獲取視訊的時長，但是這個屬性在android和ios下有點差別，在android中，在載入完視訊後就會觸發，獲取到相應視訊資訊，但是在ios下，微信瀏覽器中此事件視訊載入完成後並不會觸發，點選播放後才會觸發，但是在safari瀏覽器中視訊載入完成後就會觸發

canplay

此事件表示在媒體資料已經有足夠的資料（至少播放數幀）可供播放時觸發，此事件在android下視訊載入的時候就會觸發，但是在ios中要視訊播放後才會觸發

自動播放

在android中autoplay屬性只有chrome瀏覽器中同時設定autoplay和muted（禁音）才能自動播放，其他瀏覽器均不支援讓視訊自動播放，並且在android微信瀏覽器中同時設定autoplay和poster屬性，poster屬性也會失效，視訊封面展示不出來，在ios移動端中autoplay並不能直接自動播放，但是mac safari中在video中設定autoplay和muted屬性可以自動播放，這和在網上看到的文章有點出入，在MDN上有一個video屬性支援表：

h5視訊播放踩坑記錄

總結

隨著移動流量時代的到來，移動端的上網體驗的優化，更多的視訊播放場景和需求都會承載到移動端上，但是移動端的視訊播放由於瀏覽器核心、系統等限制性導致視訊在播放時表現不一，需要開發人員花時間精力去處理此類問題，希望這篇文章能對大家在移動端使用video標籤時有幫助。如果有錯誤或不嚴謹的地方，歡迎批評指正，如果喜歡，歡迎點贊。

相關文章