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

如上圖所示，這是全屏播放的視頻，同時在這個視頻上面層疊了一個透明的浮層，可是會明顯發現視頻播放時有黑邊，那是由於沒有聲明x5-video-player-fullscreen，若是不申明此屬性，頁面獲得視口區域爲原始視口大小(視頻未播放前)，好比在微信裏，會有一個常駐的標題欄，若是不聲明此屬性，這個標題欄高度不會給頁面，播放時會平均分爲兩塊（上下黑塊），設置了屬性效果圖以下： WechatIMG312.jpeg

會明顯看到視頻上頂到標題欄，黑邊消失，若是此時視頻的寬高使用的並非動態計算的單位，你還須要從新賦值視頻寬高：

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屬性支持表：

總結

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