本文來自「小時光茶社(Tech Teahouse)」公衆號css
做者簡介:
文赫,2015年加入騰訊,做爲前端開發工程師參與過手Q遊戲公會,遊戲中心,企鵝電競等項目,具備豐富的移動端開發和直播開發經驗。html
企鵝電競項目,直播和視頻播放是其中的核心。面對着產品同窗不斷的詢問:爲何h5的體驗這麼差?爲何不能和app的播放體驗保持一致?咱們對着h5不明確的文檔和不一樣瀏覽器的怪異表現欲哭無淚。 通過一系列的調研爬坑,斬荊披棘,咱們一步步提高了體驗,作到了和app基本一致的體驗。在摸索優化背後,咱們也想把這些問題和解決方法總結下來,讓其餘同窗作到直播的時候能夠自豪的說,這就是咱們的h5直播體驗前端
<video autoplay><video/>
可是在不少瀏覽器裏,如iOS下並不支持這個屬性,在iOS下必須給webview設置css3
self.wView.allowsInlineMediaPlayback = YES;self.wView.mediaPlaybackRequiresUserAction = NO;
才能讓這個屬性生效從而讓用戶一進入頁面就開始視頻的自動播放web
在iOS Safari和一些安卓的一些瀏覽器下播放視頻的時候,不能在h5頁面中播放視頻,系統會自動接管視頻api
若是須要在h5頁面內播放視頻,須要在視頻標籤上加上 webkit-playsinline,在iOS10之後,須要加上playsinline,建議同時加上這兩個屬性,同時須要app支持這種模式,手Q和微信都支持這種模式瀏覽器
//在html <video id="player" webkit-playsinline playsinline > //在app內設置webview屬性 webview.allowsInlineMediaPlayback = YES;
在安卓下,一些瀏覽器如QQ瀏覽器和UC瀏覽器,系統會把視頻的層級調到最高,因此若是想在頁面上顯示dom元素,都會被視頻蓋住,單純的設置該dom的z-index是無效的,如圖所示微信
解決方案:網絡
在iOS下會有一個默認的播放圖標,如圖所示app
在iOS都會默認顯示,不能經過js控制,可是能夠經過css樣式將其隱藏
video::-webkit-media-controls-start-playback-button { display: none; }
在h5播放的時候,若是在video標籤上設置了controls屬性,則會在視頻裏顯示控制欄
須要注意的是這個控制欄是系統webview自帶的,沒法經過css控制其樣式,建議不要使用這個屬性而是本身經過dom本身製做一套控制條
咱們知道video暴露了play和pause方法來提供視頻的播放和暫停,可是h5沒有標準的刷新方法,若是咱們想實現視頻的刷新,則須要經過js實現
var player = $('#player')[0]; player.load(); setTimeout(function () { player.play(); })
h5暴露了一個webkitRequestFullScreen方法,可讓每一個dom都請求全屏,固然video標籤也可使用。
可是在測試中發現,一些安卓機不支持該屬性,如小米手機,因此須要在調用的時候進行一下判斷
var player = $('#player')[0];if (player.webkitSupportsFullscreen) { player.webkitEnterFullscreen(); } else { player.webkitRequestFullScreen(); }
咱們上邊說道調用h5的webkitRequestFullScreen方法來進入視頻的全屏,那麼這個方法會使瀏覽器徹底接管視頻播放,如圖所示
這種接管的後果是這時的咱們是沒有辦法控制視頻的播放,也沒有辦法在上面浮動咱們的dom元素,如彈幕,禮物這些,會徹底被視頻蓋在下面,因此咱們的目標便是解決這種系統接管的問題
樣式全屏的核心是設置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 官方操做系統,鵝廠的工程師都在使用,快來加入咱們吧!