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

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

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

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


/*以下是渲染CANVAS画布中的视频*///获取videovar 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浏览器中需要手动触发后即可固定播放。

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

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

新版本 chrome 手机浏览器关闭为您推荐的文章方法
注: 文章摘自 fisher爱吃鱼 - 简书新版本 chrome 手机浏览器关闭为您推荐的文章方法,之前的老版本关闭方法已失效!将图片上的两处选项关闭即可方法: 打开手机 chrome 浏览器地 ...
手机如何关闭微信“自动扣费”？
日常工作生活中,常常出现支付盗刷导致财产损失的情况,使用微信支付的朋友,建议关闭"自动扣费",取消授权某些商户的"免密支付". 下面介绍一下"手机如何 ...
手机浏览器点击input放大问题
最近在做一个html5页面功能,在电脑端开发好,用火狐,google浏览器访问都没有问题,用手机浏览器访问问题来了点击输入项后,页面莫名的变大.网上找了好多资料,大多是: <meta name ...
Android WebView无法播放视频或直播，关闭界面后任在播放的问题；
1.设置webview属性: webView.setWebChromeClient(new MyWebChromeClient()); webSettings = webView.ge ...
android 关闭直播视频,Android WebView无法播放视频或直播，关闭界面后任在播放的问题；...
1.设置webview属性: webView.setWebChromeClient(new MyWebChromeClient()); webSettings = webView.getSetting ...
三星C8手机如何关闭语言自动报号,三星手机解锁
<三星手机解锁>由会员分享,可在线阅读,更多相关<三星手机解锁(6页珍藏版)>请在人人文库网上搜索. 1.三星手机话机解锁秘籍荟萃三星常用指令三星解话机锁: *2767*2 ...
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结（附代码）
可能大家发现自己制作的手机端页面,默认打开的时候并不是在理想的缩放状态下. 遇到这样的问题,需要在head标签下,添加meta解决. 代码如下: ? 1 2 3 4 5 6 7 8 9 10 11 1 ...
chrome浏览器关闭http自动跳转https
1.首先在浏览器输入 chrome://net-internals/#hsts 2.点击Domain Security Policy在Query HSTS下输入域名先查询自动转换的域名,点击Query ...
手机浏览器如何默认隐藏顶部导航栏和底部的状态栏，求大神支招！！！
目前已试用了mate标签处理,但只有QQ浏览器可以其它浏览器都不兼容,js没有达到预期效果只能上滑才能隐藏,想要默认隐藏, 以下是我用添加的mate标签和js方法: <meta name=&qu ...

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

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

最新文章

热门文章