视频在手机浏览器关闭默认自动放大播放的问题(安卓)

最近接手的项目中，有一个需求是要在手机浏览器上播放视频，但是一直会出现进入页面后全屏播放视频的问题。

网上找到了一个解决思路是利用画布来控制视频播放在画布中，但是测试后发现在谷歌浏览器的手机模拟中可以成功显示视频。但是真机测试则无法显示。

源作者的博客找不到了，贴一下解决代码————

/*以下是渲染CANVAS画布中的视频*/
            //获取video
            var TestVideo=document.getElementById("videoid");
            //获取canvas画布
            var TestCanvas=document.getElementById("testCanvas");
            //设置画布
            var TestCanvas2D=TestCanvas.getContext('2d');
            //设置setinterval定时器
            var TestVideoTimer=null;
            //监听播放
            TestVideo.addEventListener('play',function() {
                TestVideoTimer=setInterval(function() {
                    TestCanvas2D.drawImage(videoid,0,0,300,200);
                },20);
            },false);
            //监听暂停
            TestVideo.addEventListener('pause',function() {
                clearInterval(TestVideoTimer);
            },false);
            //监听结束
            TestVideo.addEventListener('ended',function() {
                clearInterval(TestVideoTimer);

            },false);

后来继续找的时候发现了一个帖子

————https://www.fedte.cc/p/686.html

这个帖子说了x5内核下视频会强制显示自动播放，我接手的代码段中video中有一段属性是

x5-video-player-type="h5"

删除并添加部分属性

<video id="videoid" src="" class="video-js vjs-default-skin" controls=""
                           x5-playsinline="" playsinline="" webkit-playsinline="" poster="" style="height: 100%;width: 100%; z-index: 0;"
                           x-webkit-airplay="allow" preload="auto"></video>

测试后在qq手机浏览器可以自动播放，不会放大，UC浏览器中需要手动触发后即可固定播放。

 

记录下自己前端开发出现的问题