微信内置浏览器 如何小窗不全屏播放视频?

2017-03-14  本文已影响0人  paddy12345

在最新的ios微信6.5.3及其之后的版本中,webview默认支持小窗播放,

开发者需要特别注意小窗播放需要前端同时适配iOS10和iOS10以下的低版本

适配建议:需要完全按照以下代码设置video标签才可同时兼容不同的iOS版本

<video webkit-playsinline playsinline></video>

经测试安卓里不行,需要用canvas绘图方式解决。

解决步骤

video标签增加属性,使浏览器调用h5原生video

增加css使video隐藏

video{display:none}

在页面中添加canvas画布

写入js代码

//获取video

var oLiveVideo=document.getElementById("liveVideo");

//获取canvas画布

var oLiveCanvas=document.getElementById("liveCanvas");

//设置画布

var oLiveCanvas2D=oLiveCanvas.getContext('2d');

//设置setinterval定时器

var bLiveVideoTimer=null;

//监听播放

oLiveVideo.addEventListener('play',function() {

bLiveVideoTimer=setInterval(function() {

oLiveCanvas2D.drawImage(myPlayer,0,0,640,320);

},20);

},false);

//监听暂停

oLiveVideo.addEventListener('pause',function() {

clearInterval(bLiveVideoTimer);

},false);

//监听结束

oLiveVideo.addEventListener('ended',function() {

clearInterval(bLiveVideoTimer);

},false);

上一篇 下一篇

猜你喜欢

热点阅读