微信内置浏览器 如何小窗不全屏播放视频?
在最新的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);