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

視屏流的兼容情況

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

IOS里的問題

視屏默認全屏播放

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

自動播放

當我們需要實現視屏自動加載完成播放的需求時，官方默認的屬性 autoplay屬性并不起作用，這里我為了在微信中實現自動播放效果，借助微信自帶的X5瀏覽器里引入的微信腳本WeixinJSBridgeReady，我在該回調中重新加載資源可以實現自動播放，具體代碼如下：

document.addEventListener("WeixinJSBridgeReady", function () {

var view = document.getElementById('video');

view.play();

view.controls = false;

}, false);

安卓里的問題

安卓可以說是兼容的重災區，因為安卓默認視屏播放時是全屏的，并且不能滑動，如果微信內部的X5不提供支持，幾乎實現不了自定義播放時展現的尺寸。

微信X5瀏覽器的問題

video的層級問題

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

部分安卓手機會出現黑邊

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

總結

以上是生活随笔為你收集整理的android 直播 h5,H5移动端直播的要点的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。