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

視屏流的兼容情況

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

IOS里的問題

視屏默認(rèn)全屏播放

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

自動播放

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

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

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

view.play();

view.controls = false;

}, false);

安卓里的問題

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

微信X5瀏覽器的問題

video的層級問題

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

部分安卓手機(jī)會出現(xiàn)黑邊

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。