移动端禁止video在ios系统中自动全屏播放

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

需求是：当video在ios上面点击播放效果自动全屏播放，这个体验非常不好，因为上面有全屏播放提示，如果用户真的需要全屏会自己的点击全屏播放的按钮，所以要禁止video在ios系统自动全屏播放。(Android没有这个问题，所以不用单独去处理)

只需要在标签里面写上：

webkit-playsinline=‘true’

playsinline=‘true’

（html5 webkit-playsinline这个属性是ios 10中设置可bai以让视频在小du窗内播放，也就是不是全屏zhi播放的video标签的dao一个属性）

如何使用如下：
在这里插入图片描述

Ren大大
关注
专栏目录
H5 移动端点击图片自动全屏播放视频，退出隐藏video控件，android/ios兼容！
weixin_40291248的博客
11-07 1917
功能分析：用户N张轮播+1个视频，播放按钮始终位于最底部，点击播放视频video 控件要直接全屏播放出来，退出则隐藏视频,以下为gif效果图： 页面布局就不说了 swiper + 底部的播放按钮 position：absolute ;然后z-index:1,video事先display：none $("#video_play").clic...
jsmpeg 全屏_移动端vue中使用video.js播放m3u8视频，解决自动全屏。
weixin_39720865的博客
12-19 2210
最近一个项目中需要在移动端播放m3u8格式的视频，刚开始用了vue-video-player 这个插件，在IOS手机体验良好，本以为完事了， 结果安卓手机一点播放就自动全屏。查了资料说是安卓微信浏览器是X5内核与IOS的不同。折腾了好半天还是解决不了，于是决定换个插件，于是用了video.js。1、首先安装，在你的vue项目中npm install --save video.jsnpm inst...
ios微信浏览器video不能自动播放
weixin_39499356的博客
08-06 414
ios微信浏览器video不能自动播放 <video id="video" controls="" preload="none" mediagroup="myVideoGroup"> <source src="video/test.mp4" type="video/mp4"> </video> <!-- 必须加在微信api资源 --> <script src="http://res.wx.qq.com/open/js/jwei.
禁止iPhone Safari video标签视频自动全屏的办法
09-03
本篇文章给大家分析有没有办法禁止iPhone Safari video标签视频自动全屏，以下给出好多种情况分享，感兴趣的朋友可以参考下
解决video在ios中自动全屏问题
最新发布
weixin_42082342的博客
07-31 378
在开发APP的时候，发现video视频在ios中点击播放会自动全屏的问题，在小程序端正常，查了资料做出以下总结，顺便记录一下。
苹果 ios 使用video 播放器，怎么禁止自动全屏
weixin_44542598的博客
04-13 3095
ios 禁用全屏播放
移动端video不全屏播放
weixin_34199335的博客
04-24 673
1 <div class="m-video"> 2 <video x5-playsinline="" playsinline="" webkit-playsinline="" preload="none" poster="images/img7.jpg"> 3 <source src="video/myvideo.mp4" typ...
Cordova下video在ios下禁止播放全屏
TuKien的博客
12-10 387
在video便标签上加上playsinline="true" 和 webkit-playsinline="true" 在config.xml中platform=ios下加上<preference name="AllowInlineMediaPlayback" value="true" />
解决video禁止自动全屏播放问题（ios、安卓）
趙小二啊
01-28 2285
同层页面内播放是标准的视频播放形态，安卓在video标签中添加且只需要添加一个(不要与x5-playsinline同时存在):x5-video-player-type='h5-page'属性来控制网页内部同层播放，可以在视频上方显示html元素 ios 在video标签中添加webkit-playsinline="true"playsinline="true" 即可 ...
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
11-21
然而，在实际开发过程中，尤其在移动设备上，尤其是在微信内置浏览器中，可能会遇到一些特定的问题，如自动全屏播放、横竖屏切换导致的样式错乱等。 在微信环境中，由于它使用了不同的渲染引擎（如腾讯自家的 X5 ...
videojs vue 静态source_手把手从零开始封装一个vue移动端视频播放器组件ios播放视频时自动全屏如何取消
05-20
在 Video.js 中取消 iOS 播放器自动全屏，可以使用 `playsinline` 属性。该属性告诉 iOS 在原生的 Safari 浏览器中播放视频时不要自动全屏。 在 Vue 组件中，你可以将 `playsinline` 传递给 `video-js` 组件的 `...
IOS实现自定义视频全屏播放
12-29
自定义播放视频网络和本地均可。能够自定义全屏！
自定义video播放组件-可全屏可加速兼容移动端
10-21
例如，使用`-webkit-playsinline`属性可以让视频在iOS设备上不自动全屏播放，保持在页面内播放。 此外，JavaScript（简称js）在自定义组件中起着至关重要的作用。通过JS，开发者可以监听视频事件（如播放、暂停、...
ios使用video播放器，禁止自动全屏
weixin_51608296的博客
07-07 1566
ios系统怎么在微信中禁用video 全屏展示 在video标签中 增加x5-video-player-type=“h5-page” x5-video-orientation=“landscape|portrait ios系统怎么在浏览器中禁用video 全屏展示 在video标签中 增加 webkit-playsinline=“true” playsinline=“true” 百分百有效 转载：苹果 ios 使用video 播放器，怎么禁止自动全屏_Big Cole的博客-CSDN博客_ios v
ios html5 自动全屏播放,iOS开发-WKWebView禁用HTML5的video标签默认全屏播放
weixin_39722759的博客
06-04 1284
问题描述：在Android中，视频可以正常在H5页面局部播放。iOS中则自动切换至全屏模式，需要禁止视频自动全屏播放。解决方法：H5端：iOS10以上H5视频不自动全屏播放识别 playsinline这个属性iOS10以下H5视频不自动全屏播放识别 webkit-playsinline这个属性x5-video-player-type='h5' x5-video-player-fullscreen=...
禁止ios 播放视频自动全屏
jugt的博客
07-31 910
在VIDEO标签中增加 x5-video-player-type=“h5-page” x5-video-orientation=“landscape|portrait”在VIDEO标签中增加 webkit-playsinline=“true” playsinline=“true”2.在IOS浏览中禁止全屏。1.在微信中禁止全屏。
禁止video在ios上自动全屏播放
weixin_33414202的博客
06-25 501
在<video>标签上添加webkit-playsinline="true" playsinline="true" ios端需添加 webview.allowsInlineMediaPlayback = YES;
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值