微信內(nèi)置瀏覽器 如何小窗不全屏播放視頻?

在最新的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);

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容