1. 程式人生 > >H5 直播避坑指南

H5 直播避坑指南

作者簡介:

文赫,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活動頁面需要引導使用者進行一下點選操作才開始的原因。

同時發現真實點選必須使用觸發 touchendclickdoubleclick 或 keydown 事件等標準的事件才能觸發,使用Zepto封裝過的tap事件並不能觸發播放器的播放

2. 頁面內聯播放問題

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

如果需要在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下會有一個預設的播放圖示,如圖所示

在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

相關推薦

H5直播指南

本文來自“小時光茶社(Tech Teahouse)”公眾號 作者簡介: 文赫,2015年加入騰訊,作為前端開發工程師參與過手Q遊戲公會,遊戲中心,企鵝電競等專案,具有豐富的移動端開發和直播開發經驗。 導語 企鵝電競專案,直播和視訊播放是其中的

H5 直播指南

作者簡介: 文赫,2015年加入騰訊,作為前端開發工程師參與過手Q遊戲公會,遊戲中心,企鵝電競等專案,具有豐富的移動端開發和直播開發經驗。 導語 企鵝電競專案,直播和視訊播放是其中的核心。面對著產品同學不斷的詢問:為什麼h5的體驗這麼差?為什麼不能和app的播放體驗

Windows 下安裝 tensorflow & keras & opencv 的指南

amp markdown ras == lib pen 5.0 ont -m 安裝 Anaconda3 關鍵的一步: conda install pip 下面再去安裝各種你需要的包,一般不會再報錯。 pip install tensorflow-gpu ==1.5.0rc

python指南02——logging模塊日誌重復打印問題

偽代碼 get xls exceptio 驗證 控制臺輸出 alt sea clas 目錄 [TOC] 一、問題拋出 python的logging模塊是python使用過程中打印日誌的利器。我們可以使用logging模塊的logger、Handler、for

增刪改查下載-指南

修改 sql 情況 錯誤 list 決定 項目 object exc 最近學習了站在項目整體上去看問題,決定總結一下開發中常見的問題,爭取提高代碼質量,降低bug率,在看代碼時候及時發現問題。 1.下載問題:   1.下載過程就是從數據庫查出數據,寫在Excel中。在寫的時

.NET+PostgreSQL實踐與指南

直接 一段時間 超時值 令行 真的 var 數據庫 傳遞 exception 簡介 .NET+PostgreSQL(簡稱PG)這個組合我已經用了蠻長的一段時間,感覺還是挺不錯的。不過大多數人說起.NET平臺,還是會想起跟它“原汁原味”配套的Micr

electron 編譯 sqlite3指南

electron 編譯 sqlite3避坑指南 sqlite很好用,不需要安裝,使用electron開發桌面程式,sqlite自然是儲存資料的不二之選,奈何編譯出錯,並且出現各種問題。也見識到了各種各樣的錯誤。現在就把成功的方法告訴你們,並且附一些錯誤的貼圖或者錯誤碼。 首先編譯這個東西,需要準備的東西,

介面taobao.tbk.sc.order.get(淘寶客訂單查詢)指南

發現了訂單查詢介面的幾個東西 : 1、貌似不用什麼渠道ID,直接可以拿賬號的session去查訂單。 按之前官方的文件,是要配合渠道介面用的,現在獨立出來了。 2、Node.js版的SDK有個bug。 如圖,同一個response資料,一個是raw_body欄位的字串格式資料,一

11月21日雲棲精選夜讀 | 20條關於Kafka叢集應對高吞吐量的指南

Apache Kafka是一款流行的分散式資料流平臺,它已經廣泛地被諸如New Relic(資料智慧平臺)、Uber、Square(移動支付公司)等大型公司用來構建可擴充套件的、高吞吐量的、高可靠的實時資料流系統。 熱點熱議 20條關於Kafka叢集應對高吞吐量的避坑指南 作者:技術小能手 

BootstrapTagsInput-基礎指南

1.簡介 BootstrapTagsInput是一個基於jQuery和Bootstrap.css的用於管理標籤的外掛。 官網在這:官網 這個官網呢,怎麼說呢,比較簡潔。示例聊勝於無。 最簡單的用法就是在引入jquery,和Bootstrap的前提下,在input標籤中新增 data-role="ta

【面向小白使用者】virtualbox虛擬機器 安裝ubuntu 系統 指南

坑很多,此貼主要記錄遇到的坑,面向Linux系統的小白使用者。 1、安裝教程大同小異網上都有。建議:按照預設選項進行安裝即可。 2、關於自帶的火狐瀏覽武器不能上網: (1)、 設定 ->網路 ->橋接(這一步應該沒問題跟多教程都有寫) (2)、管理 -&g

生活用品指南

生活用品避坑指南 1.選擇矽油還是無矽油洗髮水: 矽油:讓頭髮扁塌,但還沒證實會脫髮,不必太驚慌,好處是順滑 無矽油:溫和清潔和養護頭皮 2.無氟還是含氟牙膏 含氟:有防護齲齒的功能,但小孩子如果吞嚥了,對身體不好,成年人一天刷兩次不會有氟過量問題 無氟:防止氟過量而推出

實踐出真知:博雲微服務經驗之指南_Kubernetes中文社群

目前每個企業都想做微服務,但如何做好微服務?微服務改造過程中有哪些必須重視的問題?博雲通過自己的實踐,總結了一些經驗之談。日前InfoQ對博雲高階解決方案架構師趙安全就此話題進行了專訪,以茲各位對微服務感興趣的朋友們。 微服務是一種軟體架構風格,以專注於單一責任與功能的小型功能區塊 (Sma

[折騰日記]win10 ,ubuntu雙系統安裝指南

這篇部落格可以解決 1.如何安裝win10,ubuntu雙系統 2.如何使用win10引導Ubuntu,並且設定win10引導介面 win10,ubuntu雙系統的安裝 為什麼要裝雙系統,之前用的虛擬機器,但是虛擬機器沒有顯示卡,使用gazebo之類

Pycharm配置Spark指南

PS:本文建立在使用Mac或者linux系統的基礎上,也不建議使用window系統進行spark配置=_= 安裝JAVA環境 這部沒啥好說的吧,上網搜java安裝一大把。 切記配置java全域性變數 vim ~/.bash_profile

Pytorch安裝指南

Pytorch安裝避坑指南 需要換回conda的預設源時。查看了conda config的文件後,發現直接刪除channels即可。命令如下: conda config --remove-key channels 直接本地下載: 如果安裝包檔案很大,那麼可以

Hadoop偽分散式叢集搭建過程及指南

一個偶然的機會,讓我進了hadoop這個坑。我不得不說,Google真是個非常厲害的公司。為計算機行業貢獻了很多亮瞎雙眼額技術。初入Hadoop一般都要了解HDFS,YARN,Mapreduce。現在來總結一下Hadoop分散式叢集的搭建過程。1.首先準備好相應的安裝包,同時

微信被動回覆訊息失敗所有的!Java篇【指南

背景: 隨便一個微信訂閱號都可以,使用者在訂閱號傳送訊息,然後我們自己的伺服器做出訊息回覆,之間的過程處理好多坑。 我這裡是從接入成功後開始踩到的坑,關於接入的沒什麼,微信公眾號文件很清楚。 開始了: 我的伺服器使用的ssm框架 1.坑列表: 獲取微信請求我方伺服

跳槽找工作指南(2019版)

成功 專業 行為 方式 redirect 套路 職場 要去 活動 雖說年前就有很多人在修改簡歷、刷新簡歷,但是為了大家心中所謂的年終獎,99.9999%的人都會選擇沈默,有一種「明修棧道,暗度陳倉」意味。 拿完了年終獎,過完了春節,老子早TMD的不想幹了,終於不用在你「對

博客園寫作指南【持續更新】

white 無法識別 英文單詞 分享 頁面 done 正常 code don 以下是花了一晚上調格式之後的血淚經驗,如果之後有新的發現會持續更新…… 關於英文單詞自動斷行 如果你和我一樣需要寫英文博文,你會發現遇到行尾的英文單詞全部被攔腰截斷,看上去怪怪的。 這是因為博客園