IOS APP中，使用h5播放器，默认打开网页的时候，会自动全屏，解决方法webkit-playsinline

最新推荐文章于 2024-07-31 09:27:51 发布
最新推荐文章于 2024-07-31 09:27:51 发布
阅读量2.2w 收藏 3
点赞数 1
分类专栏： 错误收集
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/s8460049/article/details/78517306
版权

这个问题，安卓6.0以上，大部分手机都不会产生额，主要是针对IOS

<video src="1.mp4" webkit-playsinline playsinline x5-playsinline x-webkit-airplay="allow"></video>

加上上述属性就可以了

BeArchitect
关注
专栏目录
html5的video在IOS端默认全屏和黑屏问题
吴孔云的博客
09-07 2万+
最近项目中需要使用video来代替有点复杂的动画（video循环自动播放），遇到了使用过程中的两个坑 ios端默认全屏解决办法查阅资料说在在video标签加如下属性<video webkit-playsinline="webkit-playsinline"></video>无奈测试机是ios10，上面这段代码在iOS8，9下生效 因项目是react工匠，不支持除data-*之外的自定义属性，需在c
解决H5在iOS中视频播放自动全屏问题
培根芝士的专栏
08-02 2566
在iOS端的Web控件上使用video标签播放视频时，视频会自动全屏播放。
解决video在ios中自动全屏问题
最新发布
weixin_42082342的博客
07-31 405
在开发APP的时候，发现video视频在ios中点击播放会自动全屏的问题，在小程序端正常，查了资料做出以下总结，顺便记录一下。
x5-playsinline， playsInline， webkit-playsinline， x5-video-player
Summer_Qzz的博客
07-09 5102
苹果微信默认视频打开会全屏播放，使用以下属性后可禁止。 x5-playsinline， playsInline， webkit-playsinline， x5-video-player
ios h5怎么不让视频全屏播放
湾流~ 的博客
04-23 829
在 iOS 中，H5 页面中的视频通常会在用户点击全屏按钮时自动进入全屏播放模式。使用 playsinline 属性：将 标签中的 playsinline 属性设置为 true。playsinline 属性告诉 iOS 在视频播放时将视频保持在页面内，而不是切换到全屏模式。
解决h5中video视频点击播放，ios自动全屏的问题
woderuiggya的博客
10-20 849
加上 webkit-playsinline='true' playsinline='true' 两个属性即可
网页背景H5视频自动播放---PC端、移动端兼容问题完美解决方案（IOS、安卓、微信端）
weixin_44626952的博客
10-24 3524
最近公司官网需要使用视频当做banner背景且自动播放，并且因为是官网需要做到PC端和移动端都可以适配兼容，这些问题很是头疼； 　　兵来将挡，水来土掩，进过查阅相关技术资料，现已完美兼容PC端和移动端。下面就为大家详细讲解： PC端： 　　PC端相应简单些，浏览器对<video>标签的兼容还是很好的，但是想要在浏览器中当做Banner视频自动播放就必须设置这些属性来更好地实现； ...
H5的视频解决方案(1) —— mobile video内联播放
热门推荐
Joyce的前端日常
08-03 1万+
mobile内联播放 (1) webkit-playsinline和playsinline (2) android微信 (3) 最佳实践 (4) 其他尝试和存在问题 mobile内联播放 内联播放指的是视频在文档流中直接进行播放，不会弹出新的播放窗口的方式。 &amp;amp;amp;amp;amp;amp;amp;lt;video id=&amp;amp;amp;amp;amp;amp;quot;video&amp;amp;amp;amp;amp;
记一次移动端H5开发所遇到的问题与细节,以及ios兼容
想飞的猪的博客
09-14 3895
第一次弄移动端H5项目开发，虽然是简单的页面展示，但也遇到了很多细节问题与兼容问题，尤其是h5视频标签video, 一.移动端禁止缩放 兼容 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> 主要属性是user-sca...
uniapp - 视频播放器插件，支持播放m3u8 / flv / mp4视频流等各种格式的视频文件，附带全屏播放、播放快进、循环播放、音量调节、视频解码等功能（详细示例代码，一键复制开箱即用！）
高级前端工程师
08-02 8398
uniapp小程序h5网页app安卓苹果平台视频播放器，uniapp中如何使用视频播放器组件,uniapp使用mui-player插件详细教程，uniapp微信小程序接入视频播放器功能插件，uniapp播放m3u8 / flv / mp4视频流，uniapp怎么播放m3u8格式的视频，uniapp如何播放flv视频流文件，uniapp怎么播放m3u8 / flv视频流文件，uniapp m3u8格式视频，uniapp 使用 mui-player 插件播放 m3u8/flv 视频流，uniapp网页h5端播放
微信网页全屏播放自动播放问题
Rings_G的博客
02-02 5058
video视屏播放在微信网页中的全屏自动播放一直是个很头疼的问提 1.自动播放问题 Android中是无法自动播放了，只能做用户引导页喽，微信app内核webkit版本低不支持 IOS中 加autoplay并且在onload事件之后调用一次play() id="Movies" src="./cdnfile/in.mp4" x5-playsinline="" x5-video-playe
iOS中H5视频默认全屏播放问题解决
培根芝士的专栏
11-18 2057
问题描述：iOS中视频在H5页面播放时会自动切换至全屏模式 解决方法：IOS10及以后,在 video标签页中只包含webkit-playsinline 是不够的，需要再增加playsinline. H5端重点代码： x5-video-player-type='h5' x5-video-player-fullscreen='true' playsinline webkit-playsinline 说明： iOS10以上H5视频不自动全屏播放识别playsinline这个属性 iOS10以下...
html5 打开网页自动全屏,html5 网页全屏显示
weixin_39538687的博客
05-30 2680
1.统一样式因为不同的浏览器的样式不一致，所以，最好统一样式:-webkit-full-screen {/* properties */}:-moz-full-screen {/* properties */}:-ms-fullscreen {/* properties */}:full-screen { /*pre-spec *//* properties */}:fullscreen { /*...
react是否支持给标签设置自定义的属性，比如给video标签设置webkit-playsinline？
zz130428的博客
12-06 1312
如果在react中这么样写： 在react 15中将被渲染成： 在react 16及之后的版本中将被渲染成： 但这个会有限制，如果自定义的属性不是 , 或者 ，该属性依然会被忽略。所以目前可以这样添加 webkit-playsinline 属性： 另外，还可以通过 进行设置，比如：
html ios 全屏播放,iOS APP 中H5视频默认全屏播放问题解决
weixin_30869777的博客
06-16 630
问题描述：在Android中，视频可以正常在H5页面局部播放，iOS中则自动切换至全屏模式. 查看资料得以解决，20190301记录下来。解决方法：IOS10及以后,在 video标签页中只包含webkit-playsinline 是不够的，需要再增加playsinline.H5端重点代码：x5-video-player-type='h5' x5-video-player-fullscreen...
h5视频微信禁止全屏 x5-playsinline
nabywe的博客
12-17 7661
&lt;video x-webkit-airplay="allow" x5-playsinline="" webkit-playsinline="" playsinline="true" src=""&gt;&lt;/video&gt;
css属性前的-webkit -moz-之类的前缀
iteye_4712的博客
08-03 630
在css属性中，为了兼容旧版的浏览器，会在css3的一些新属性 如 border-radius 前增加前缀   Firfox 是 Firfox Gecko内核，开发商是 Mozilla，因此使用 -moz-border-radius Safari 浏览器的内核是webkit , chrome浏览器的内核原型是webkit，因此使用-webkit-border-radius Opera 浏...
webkit-playsinline
12-08
webkit-playsinline是一个...在iOS设备上，如果没有使用webkit-playsinline属性，视频将在全屏模式下播放，这可能会干扰用户的浏览体验。 以下是一个使用webkit-playsinline属性的HTML5 video示例： ```html ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值