很多在做直播的朋友经常会问:微信、QQ浏览器使用video标签播放时如何不自动全屏?我需要在video容器中播放!
腾讯官方的答复是:
之前开放过“白名单”,现在已经取消,只有当初加入到“白名单”中的域名才可以不自动全屏,我们将会在9月(2016年9月)更新X5内核,开放代码让用户自行控制。
结果,9月的更新很令人失望,使用 <video x5-video-player-type='h5' x5-video-player-fullscreen='true'>的结果是这样:
面对腾讯给出的结果,我们后来者就只能听从官方的答复,破坏视频在微信、QQ中的用户体验吗?答案当然不是!
我们进一步分析:video标签自动全屏,那canvas画布呢?
经过试验证明,微信、QQ自带的X5内核浏览器支持canvas渲染视频,问题解决!
解决步骤
-
video标签增加属性,使浏览器调用h5原生video
<video id="liveVideo" x5-video-player-type='h5' x5-video-player-fullscreen='true'>
-
增加css使video隐藏
video{display:none}
-
在页面中添加canvas画布
<canvas id="canvas"></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);
需要源代码的朋友,在公众号回复 demo 即可获得下载地址
需要源代码的朋友,在公众号回复 demo 即可获得下载地址