admin管理员组文章数量:1562465
最近接手的项目中,有一个需求是要在手机浏览器上播放视频,但是一直会出现进入页面后全屏播放视频的问题。
网上找到了一个解决思路是利用画布来控制视频播放在画布中,但是测试后发现在谷歌浏览器的手机模拟中可以成功显示视频。但是真机测试则无法显示。
源作者的博客找不到了,贴一下解决代码————
/*以下是渲染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/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浏览器中需要手动触发后即可固定播放。
记录下自己前端开发出现的问题
版权声明:本文标题:视频在手机浏览器关闭默认自动放大播放的问题(安卓) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1727473312a1116300.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论