在最新的ios微信6.5.3及其之后的版本中,webview默認(rèn)支持小窗播放,
開發(fā)者需要特別注意小窗播放需要前端同時適配iOS10和iOS10以下的低版本
適配建議:需要完全按照以下代碼設(shè)置video標(biāo)簽才可同時兼容不同的iOS版本
<video webkit-playsinline playsinline></video>
經(jīng)測試安卓里不行,需要用canvas繪圖方式解決。
解決步驟
video標(biāo)簽增加屬性,使瀏覽器調(diào)用h5原生video
增加css使video隱藏
video{display:none}
在頁面中添加canvas畫布
寫入js代碼
//獲取video
var oLiveVideo=document.getElementById("liveVideo");
//獲取canvas畫布
var oLiveCanvas=document.getElementById("liveCanvas");
//設(shè)置畫布
var oLiveCanvas2D=oLiveCanvas.getContext('2d');
//設(shè)置setinterval定時器
var bLiveVideoTimer=null;
//監(jiān)聽播放
oLiveVideo.addEventListener('play',function() {
bLiveVideoTimer=setInterval(function() {
oLiveCanvas2D.drawImage(myPlayer,0,0,640,320);
},20);
},false);
//監(jiān)聽暫停
oLiveVideo.addEventListener('pause',function() {
clearInterval(bLiveVideoTimer);
},false);
//監(jiān)聽結(jié)束
oLiveVideo.addEventListener('ended',function() {
clearInterval(bLiveVideoTimer);
},false);