X5内核浏览器video自动全屏解决办法

很多在做直播的朋友经常会问：微信、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渲染视频，问题解决！

解决步骤

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

   <video id="liveVideo" x5-video-player-type='h5' x5-video-player-fullscreen='true'>

   
   

2. 增加css使video隐藏

   video{display:none}

   
   

3. 在页面中添加canvas画布

   <canvas id="canvas"></canvas>

   
   

4. 写入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 即可获得下载地址