美文网首页
微信内置浏览器 如何小窗不全屏播放视频?

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

作者: paddy12345 | 来源:发表于2017-03-14 18:34 被阅读0次

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

相关文章

网友评论

      本文标题:微信内置浏览器 如何小窗不全屏播放视频?

      本文链接:https://www.haomeiwen.com/subject/yhnhnttx.html