H5直播避坑指南

本文來自「小時光茶社(Tech Teahouse)」公衆號css

做者簡介:
文赫,2015年加入騰訊,做爲前端開發工程師參與過手Q遊戲公會,遊戲中心,企鵝電競等項目,具備豐富的移動端開發和直播開發經驗。html

導語

企鵝電競項目,直播和視頻播放是其中的核心。面對着產品同窗不斷的詢問:爲何h5的體驗這麼差?爲何不能和app的播放體驗保持一致?咱們對着h5不明確的文檔和不一樣瀏覽器的怪異表現欲哭無淚。 通過一系列的調研爬坑,斬荊披棘,咱們一步步提高了體驗,作到了和app基本一致的體驗。在摸索優化背後,咱們也想把這些問題和解決方法總結下來,讓其餘同窗作到直播的時候能夠自豪的說,這就是咱們的h5直播體驗前端

1. 自動播放問題

  • 經過autoplay屬性
    視頻的自動播放須要在video標籤上添加autoplay屬性, 如:
<video autoplay><video/>

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

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

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

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

2. 頁面內聯播放問題

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

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

//在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下會有一個默認的播放圖標,如圖所示app

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

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

5. 視頻的控制欄

在h5播放的時候,若是在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橫豎屏的接口
在用戶點擊全屏的時候,先判斷當前是否橫屏

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

知足條件的video標籤全屏時都會被X5接管,另外調用webkitEnterFullscreen方法時,X5也會接管播放器。

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

總結:

在經歷過各類優化和調整後,咱們能夠在h5直播頁作到看直播,看彈幕,發彈幕,發送禮物,表情,查看排名等各類功能,再配合上手Q裏的隱藏titlebar的_wv=16777217,能夠實現全屏播放效果,作到了媲美原生播放的體驗。

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


更多精彩內容歡迎關注騰訊 Bugly的微信公衆帳號:

騰訊 Bugly是一款專爲移動開發者打造的質量監控工具,幫助開發者快速,便捷的定位線上應用崩潰的狀況以及解決方案。智能合併功能幫助開發同窗把天天上報的數千條 Crash 根據根因合併分類,每日日報會列出影響用戶數最多的崩潰,精準定位功能幫助開發同窗定位到出問題的代碼行,實時上報能夠在發佈後快速的瞭解應用的質量狀況,適配最新的 iOS, Android 官方操做系統,鵝廠的工程師都在使用,快來加入咱們吧!

相關文章
相關標籤/搜索