H5直播要點

在移動端，基於瀏覽器環境與微信及QQ的軟件內部環境標準實現直播功能及在其基礎上的附加功能(例如，加上彈幕及其餘覆蓋的DOM盒子)，這個過程仍是有些要點須要總結記錄下的。

視屏流的兼容狀況

主流瀏覽器支持的視屏流我瞭解到只有HLS格式，可是像B站播放的策略是將flv格式視屏流經過js將流數據分段解析轉變成MP4格式進行播放，這個我不是很瞭解，後期有時間我會嘗試後者的作法，爲了解決迫在眉睫的需求，這裏我用的是HLS格式的流格式。很簡單，html5的video標籤就支持解析，移動端在微信和QQ的環境裏也支持良好，惟一的缺點就是有10-30s的延時。

IOS裏的問題

1. 視屏默認全屏播放

   這個問題很好解決，只要加上 playsinline webkit-playsinline 屬性標記就能解決。

2. 自動播放

   當咱們須要實現視屏自動加載完成播放的需求時，官方默認的屬性 autoplay屬性並不起做用，這裏我爲了在微信中實現自動播放效果，藉助微信自帶的X5瀏覽器裏引入的微信腳本https://res.wx.qq.com/open/js/jweixin-1.2.0.js，它在加載過程當中會在加載時間節點的回調函數WeixinJSBridgeReady，我在該回調中從新加載資源能夠實現自動播放，具體代碼以下：

   document.addEventListener("WeixinJSBridgeReady", function () { 
               var view = document.getElementById('video');
               view.play();
               view.controls = false;    
           }, false);

安卓裏的問題

安卓能夠說是兼容的重災區，由於安卓默認視屏播放時是全屏的，而且不能滑動，若是微信內部的X5不提供支持，幾乎實現不了自定義播放時展示的尺寸。

微信X5瀏覽器的問題

1. video的層級問題

   在X5瀏覽器裏默認video播放時的層級是最高的，不管你調多大的z-index參數都不能改變，所幸的是微信在2017年9月提供了支持，只要咱們在video中加上x5-video-player-type='h5'就能夠實如今video上再加dom盒子。

2. 部分安卓手機會出現黑邊

   接下來就是一些優化的問題了。經過上面的一些條件會發如今安卓端，視屏播放的時候，上下兩端會出現黑邊的問題，增長如x5-video-player-fullscreen=」true」這個屬性就好了。