2 windper windper 于 2016.04.19 16:55 提问

禁止video标签自动全屏播放
 <video  loop onClick="javascript:clickVideo();" ><source src="" type="video/webm">  </video>

原本是在被点击时才播放,但是在华为mate8手机上进入页面后,总是自动全屏播放,求大神指点。

5个回答

showbo
showbo   Ds   Rxr 2016.04.19 17:05

video用div代替,放个播放按钮做背景水平垂直居中,onclick加到div上,然后动态设置div的innerHTML为video的html代码,添加autoplay="autoplay"试试

  <video  loop onClick="javascript:clickVideo();" ><source src="" type="video/webm">  </video>
showbo
showbo 回复windper: 是啊,你要兼容华为就用这种办法,其他牌子的手机应该也没有问题
大约 2 年之前 回复
windper
windper 不好意思,我应该是没说清楚,我是想禁止手机上自动播放这一行为,想让它在mate8上也是被点击后才会播放。其他手机都好,只是客户在他自己的华为mate8手机上测试时有了这个问题。
大约 2 年之前 回复
json_ligege
json_ligege   2016.04.19 20:07

可以试试这样

controls 如果出现该属性,则向用户显示控件,比如播放按钮。

json_ligege
json_ligege   2016.04.19 20:09

代码 为:

<video loop onClick="javascript:clickVideo();" ><source src="" type="video/webm"> </video>

json_ligege
json_ligege   2016.04.19 20:10

' ' 不好意思不会发代码

json_ligege
json_ligege 在video标签上添加 controls=“controls”
大约 2 年之前 回复
zjl199303
zjl199303   2016.09.05 10:42

你的 clickVideo 怎么写的呢? play 方法调用他就直接全屏了呢?

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
禁止video在ios系统中自动全屏播放
在移动端用video播放视频时,会自动全屏播放,我们可以用如下设置来禁止自动全屏播放。 webkit-playsinline='true'  playsinline='true'使用方法如下&amp;lt;video width=&quot;100%&quot; height=&quot;auto&quot; id=&quot;videoPlay1&quot; poster=&quot;/hyData/weixinPages/images/video-img.png&quot;  c...
html5阻止video的默认全屏播放
ios上禁止不了,尝试用了<video src="src.mp4" id="video" -webkit-playsinline webkit-playsinline></video>根本没有软用啊!弄了挺久,在看iphone-inline-video这个插件的时候找到了一个方法。<video id="video1" playsinline width="100%" height="100%"
Android HTML5 Video视频标签自动播放与自动全屏问题解决
为了解决 HTML5Video视频标签自动播放与全屏问题,在网上找了很多相关资料,网上也很多关于此问题解决方法,但几乎都不能解决问题,特别对各大视频网站传回来的html5网页视频自动播放与全屏问题,我是这样解决的: webview.setWebChromeClient(new WebChromeClient() {             public void onShowC
HTML5新标签video在iOS上默认全屏播放
今天做一个app时发现一个问题,应用html5中的video标签加载视频,在android手机上默认播放大小,但是换成iPhone手机上出问题了,默认弹出全屏播放,查找了好多论坛,都没有谈论这个的。然后几经波折终于找到其解决的方法了,在video标签下的source中加入这个-webkit-playsinline=true完美解决全屏问题。  例如:
微信H5视频/VIDEO/全屏/不全屏/自动播放等相关问题
做过微信H5视频的大胸弟们肯定受到过成吨的伤害甚至多到怀疑人生的地步,自动全屏,不能全屏,不能自动播放,Android,IOS,巴拉巴拉……多到令人发指!今天整理了一下相关的解决办法,以上并不是全部解决了,但是起码能打个60分…… 第一步:设置 x5­video­player­type 启用H5同层播放器通过video属性“x5­video­player­type”声明启用同层H5播放器 x5­v
解决移动端中video点击视频播放会自动全屏
video标签中加几条属性x5-playsinline=&quot;&quot; playsinline=&quot;&quot; webkit-playsinline=&quot;&quot;可以解决移动端video点击播放自动全屏问题
【暂未解决】video标签在移动端页面播放时默认全屏的问题
状况描述:在微信打开移动端页面的视频,点击播放后自动进入全屏模式,给标签添加webkit-playsinline后,一些机型无效,如小米。华为mate9是默认不全屏的。 解决方案: https://mp.weixin.qq.com/s?__biz=MzIzMjU4NDEyNw==&mid=2247483672&idx=1&sn=679b17e465c63d6143780beae1dca56a&c
html5 video标签在IOS里面默认全屏播放问题
-
Android HTML5 Video视频标签自动播放与自动全屏问题解决
版权声明:本文为博主原创文章,未经博主允许不得转载。               为了解决 HTML5Video视频标签自动播放与全屏问题,在网上找了很多相关资料,网上也很多关于此问题解决方法,但几乎都不能解决问题,特别对各大视频网站传回来的html5网页视频自动播放与全屏问题,我是这样解决的: [java] view plain copy w
微信浏览器视频video标签自动变成全屏的解决
微信内置的浏览器是QQ浏览器,个人感觉挺渣的(可能我使用不多对QQ浏览器无感)。 在微信浏览器里面使用video标签,一点击放视频会自动变成全屏,这个很蛋疼。 可以用一些H5的video属性:  video id="videoID"webkit-playsinline="true" x-webkit-airplay="true"  playsinline="true"x5-video