在移動(dòng)端，基于瀏覽器環(huán)境與微信及QQ的軟件內(nèi)部環(huán)境標(biāo)準(zhǔn)實(shí)現(xiàn)直播功能及在其基礎(chǔ)上的附加功能(例如，加上彈幕及其他覆蓋的DOM盒子)，這個(gè)過程還是有些要點(diǎn)需要總結(jié)記錄下的。
視屏流的兼容情況
主流瀏覽器支持的視屏流我了解到只有HLS格式，但是像B站播放的策略是將flv格式視屏流通過js將流數(shù)據(jù)分段解析轉(zhuǎn)變成MP4格式進(jìn)行播放，這個(gè)我不是很了解，后期有時(shí)間我會(huì)嘗試后者的做法，為了解決迫在眉睫的需求，這里我用的是HLS格式的流格式。很簡(jiǎn)單，html5的video標(biāo)簽就支持解析，移動(dòng)端在微信和QQ的環(huán)境里也支持良好，唯一的缺點(diǎn)就是有10-30s的延時(shí)。
IOS里的問題
-
視屏默認(rèn)全屏播放
這個(gè)問題很好解決，只要加上 playsinline webkit-playsinline 屬性標(biāo)記就能解決。
-
自動(dòng)播放
當(dāng)我們需要實(shí)現(xiàn)視屏自動(dòng)加載完成播放的需求時(shí)，官方默認(rèn)的屬性 autoplay屬性并不起作用，這里我為了在微信中實(shí)現(xiàn)自動(dòng)播放效果，借助微信自帶的X5瀏覽器里引入的微信腳本https://res.wx.qq.com/open/js/jweixin-1.2.0.js，它在加載過程中會(huì)在加載時(shí)間節(jié)點(diǎn)的回調(diào)函數(shù)WeixinJSBridgeReady，我在該回調(diào)中重新加載資源可以實(shí)現(xiàn)自動(dòng)播放，具體代碼如下：
document.addEventListener("WeixinJSBridgeReady", function () {
var view = document.getElementById('video');
view.play();
view.controls = false;
}, false);
安卓里的問題
安卓可以說是兼容的重災(zāi)區(qū)，因?yàn)榘沧磕J(rèn)視屏播放時(shí)是全屏的，并且不能滑動(dòng)，如果微信內(nèi)部的X5不提供支持，幾乎實(shí)現(xiàn)不了自定義播放時(shí)展現(xiàn)的尺寸。
微信X5瀏覽器的問題
-
video的層級(jí)問題
在X5瀏覽器里默認(rèn)video播放時(shí)的層級(jí)是最高的，無論你調(diào)多大的z-index參數(shù)都不能改變，所幸的是微信在2017年9月提供了支持，只要我們?cè)趘ideo中加上x5-video-player-type='h5'就可以實(shí)現(xiàn)在video上再加dom盒子。
-
部分安卓手機(jī)會(huì)出現(xiàn)黑邊
接下來就是一些優(yōu)化的問題了。通過上面的一些條件會(huì)發(fā)現(xiàn)在安卓端，視屏播放的時(shí)候，上下兩端會(huì)出現(xiàn)黑邊的問題，增加如x5-video-player-fullscreen=”true”這個(gè)屬性就行了。
