H5 播放視頻常見bug及解決方案

本文摘自：本文來自「小時光茶社（Tech Teahouse）」公衆號

原文：https://mp.weixin.qq.com/s/MM5ZwCiWLAeHalsNYMImnw

1. 自動播放問題

經過autoplay屬性
視頻的自動播放須要在video標籤上添加autoplay屬性, 如：

 <video autoplay><video/>

可是在不少瀏覽器裏，如iOS下並不支持這個屬性，在iOS下必須給webview設置：

self.wView.allowsInlineMediaPlayback = YES;self.wView.mediaPlaybackRequiresUserAction = NO;

才能讓這個屬性生效從而讓用戶一進入頁面就開始視頻的自動播放。

 

經過直接調用video.play()方法
在一些狀況下咱們想加入一些判斷邏輯，如判斷用戶網絡環境，在wifi下自動播放，在4g環境下給出提示，這中狀況下就適合直接選中video並調用video.play來播放視頻；

 

可是這種狀況下也須要webview的支持，如在手Q下能夠作到直接調用，在微信下由於不容許視頻直接播放，則必須經過用戶的真實操做來觸發調用 video.play() 這就是各類微信的h5活動頁面須要引導用戶進行一下點擊操做纔開始的緣由。

同時發現真實點擊必須使用觸發 touchend、click、doubleclick 或 keydown 事件等標準的事件才能觸發，使用Zepto封裝過的tap事件並不能觸發播放器的播放;

 

2. 頁面內聯播放問題

在iOS Safari和一些安卓的一些瀏覽器下播放視頻的時候，不能在h5頁面中播放視頻，系統會自動接管視頻;

若是須要在h5頁面內播放視頻，須要在視頻標籤上加上  webkit-playsinline ,在iOS10之後，須要加上 playsinline ,建議同時加上這兩個屬性，同時須要app支持這種模式，手Q和微信都支持這種模式;

 

3. 視頻的高度問題

在安卓下，一些瀏覽器如QQ瀏覽器和UC瀏覽器，系統會把視頻的層級調到最高，因此若是想在頁面上顯示dom元素，都會被視頻蓋住，單純的設置該dom的z-index是無效的;

解決方案：
1.在彈出會顯示在視頻上方dom的時候暫停視頻播放
2.將視頻所在的dom的父元素的高度設爲1
3.處理完彈出的事件後將視頻所在的父元素高度還原

4. 視頻的默認播放圖標

在iOS下會有一個默認的播放圖標，如圖所示:

 

在iOS都會默認顯示，不能經過js控制，可是能夠經過css樣式將其隱藏

video::-webkit-media-controls-start-playback-button {
   display: none;
}

 

5.視頻的刷新

咱們知道video暴露了play和pause方法來提供視頻的播放和暫停，可是h5沒有標準的刷新方法，若是咱們想實現視頻的刷新，則須要經過js實現

var player = $('#player')[0];
player.load();
setTimeout(function () {
     player.play();
})

 

6.視頻的全屏問題

(1)全屏API

h5暴露了一個webkitRequestFullScreen方法，可讓每一個dom都請求全屏，固然video標籤也能夠使用。
可是在測試中發現，一些安卓機不支持該屬性，如小米手機，因此須要在調用的時候進行一下判斷

 

var player = $('#player')[0];if (player.webkitSupportsFullscreen) {
    player.webkitEnterFullscreen();
} else {
   player.webkitRequestFullScreen();
}

(2)系統接管播放

咱們上邊說道調用h5的webkitRequestFullScreen方法來進入視頻的全屏，那麼這個方法會使瀏覽器徹底接管視頻播放，如圖所示

這種接管的後果是這時的咱們是沒有辦法控制視頻的播放，也沒有辦法在上面浮動咱們的dom元素，如彈幕，禮物這些，會徹底被視頻蓋在下面，因此咱們的目標便是解決這種系統接管的問題

(3)使用僞全屏（樣式全屏）

 樣式全屏的核心是設置video標籤的寬高，使其撐滿整個webview，看上去像全屏同樣可是由於視頻通常都是16:9的寬高比，因此在豎屏狀況下不能很好的作到鋪滿整個屏幕

而通常用戶進入頁面基本都是豎屏，因此咱們就要考慮怎麼讓用戶在豎屏點擊全屏按鈕時，能體驗到像終端app同樣自動進入橫屏全屏的體驗，下面有兩種方案：

1.在用戶點擊全屏時候，經過css3屬性旋轉屏幕

經過css的transform，咱們能夠把dom元素旋轉顯示經過 -webkit-transform: rotate(90deg) 並設置video的高度爲當前webview的寬度，video的寬度爲當前webview的高度來實現旋轉全屏。

這種模式的顯示沒有太大問題，但由於是經過css控制的頁面dom顯示，對於原生的空間不能很好的控制，如系統的鍵盤

 在拉起鍵盤輸入彈幕的時候，鍵盤不受控制仍是豎屏顯示了若是頁面不涉及與原生組件的交互，那麼這種方案是一種很可行且兼容性比較好的方案

2.用戶在點擊全屏時，經過js api來控制webview旋轉橫屏

在手Q裏，咱們和終端的同窗合做添加了控制webview橫豎屏的接口
在用戶點擊全屏的時候，先判斷當前是否橫屏

 

/*
 * 是否橫屏
 */
 function isHorizontal() {       
     if (window.orientation != undefined) {        
         return (window.orientation == 90 || window.orientation == -90);
     } else {         
         return window.innerWidth > window.innerHeight;
     }
 }
    
    
 //設置webview爲橫豎屏
 mqq.ui.setWebViewBehavior({         
     orientation: 0 //0是豎屏，1是橫屏
 });

若是是豎屏則強制webview旋轉進入橫屏，同時監聽頁面的resize方法，頁面橫豎屏變化的時候會觸發這個方法，在這個方法裏再動態的調整video的寬高來鋪滿整個屏幕

若是發如今x5內核下沒法使用僞全屏而被瀏覽器接管，能夠諮詢下x5同事爲你的域名開啓白名單，不接管你域名下的視頻播放

 

如今的h5的播放還有不少的表現和兼容性的問題，但願這份指南能夠幫你在遇到一樣的坑時能儘快爬出來，並優化你的h5播放體驗，吸引到更多的用戶