作者簡介：

文赫，2015年加入騰訊，作為前端開發工程師參與過手Q遊戲公會，遊戲中心，企鵝電競等專案，具有豐富的移動端開發和直播開發經驗。

導語

企鵝電競專案，直播和視訊播放是其中的核心。面對著產品同學不斷的詢問：為什麼h5的體驗這麼差？為什麼不能和app的播放體驗保持一致？我們對著h5不明確的文件和不同瀏覽器的怪異表現欲哭無淚。 經過一系列的調研爬坑，斬荊披棘，我們一步步提升了體驗，做到了和app基本一致的體驗。在摸索優化背後，我們也想把這些問題和解決方法總結下來，讓其他同學做到直播的時候可以自豪的說，這就是我們的h5直播體驗

1. 自動播放問題

• 通過autoplay屬性
  視訊的自動播放需要在video標籤上新增autoplay

  屬性, 如：

    <videoautoplay><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

    //在html
    <video id="player" webkit-playsinline playsinline >    //在app內設定webview屬性
    webview.allowsInlineMediaPlayback = YES;

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.視訊的控制欄

在h5播放的時候，如果在video標籤上設定了controls屬性，則會在視訊裡顯示控制欄

    //在html
    <video controls >

需要注意的是這個控制欄是系統webview自帶的，無法通過css控制其樣式，建議不要使用這個屬性而是自己通過dom自己製作一套控制條

6.視訊的重新整理

我們知道video暴露了play和pause方法來提供視訊的播放和暫停，但是h5沒有標準的重新整理方法，如果我們想實現視訊的重新整理，則需要通過js實現

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

7.視訊的全屏問題

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橫豎屏的介面
在使用者點選全屏的時候，先判斷當前是否橫屏

    /**
     * 是否橫屏
     */
    functionisHorizontal() {       
        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插入了一段js來劫持視訊的全屏的事件

滿足條件的video標籤全屏時都會被X5接管，另外呼叫webkitEnterFullscreen方法時，X5也會接管播放器。

如果發現在x5核心下無法使用偽全屏而被瀏覽器接管，可以諮詢下x5同事為你的域名開啟白名單，不接管你域名下的視訊播放

總結：

在經歷過各種優化和調整後，我們可以在h5直播頁做到看直播，看彈幕，發彈幕，傳送禮物，表情，檢視排名等各種功能，再配合上手Q裡的隱藏titlebar的_wv=16777217，可以實現全屏播放效果，做到了媲美原生播放的體驗。

現在的h5的播放還有很多的表現和相容性的問題，希望這份指南可以幫你在遇到同樣的坑時能儘快爬出來，並優化你的h5播放體驗，吸引到更多的使用者 : D