关闭Video在ios设备上自动全屏播放

已于 2024-01-11 17:32:46 修改
阅读量1.1k 收藏 6
点赞数 9
CC 4.0 BY-SA版权
文章标签： ios
于 2024-01-11 17:27:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41733848/article/details/135534726
文章讲述了在开发中遇到的视频播放问题，即Android使用自定义样式，而iOS默认全屏。为实现跨平台统一，通过添加`playsinline=false`属性关闭iOS全屏并调整样式。给出了相应的HTML代码示例。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在开发过程中发现video播放在安卓设备上是在自定义的样式基础上播放，而在ios设备上是自动全屏播放，为了开发统一所以在ios上就不能自动全屏播放。

解决方案：添加 playsinline 属性 关闭ios自动全屏播放后统一设置播放样式。代码如下：

<video id="videos" src="./images/video1.mp4" playsinline="false"></video>

问题解决！

高亦寒欸
关注
iOS中视频播放自动全屏问题的解决方法
IOWEL的博客
10-01 1043
在iOS设备上，当我们在网页或应用中播放视频时，有时会面临视频自动全屏的问题。为了解决iOS中视频播放自动全屏的问题，我们可以利用HTML5的Video API以及JavaScript来控制视频的播放行为。具体而言，我们需要对视频元素进行事件监听，并在适当的时机执行相应的操作来阻止视频自动全屏。此外，通过调整样式，我们还可以保持视频元素在全屏播放时的大小和位置不变。如果你希望在视频全屏播放时，保持视频元素的大小和位置不变，可以通过CSS来实现。事件触发时，我们也执行相同的操作来阻止视频的全屏播放。
ios 原生video播控退出全屏之后 维持状态
我挚爱桃子
03-06 2563
ios 原生video播控退出全屏之后 会一直维持pause状态 https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/ControllingMediaWithJavaScript/ControllingMediaWithJavaScript...
解决video在ios中自动全屏问题
最新发布
weixin_42082342的博客
07-31 1277
在开发APP的时候，发现video视频在ios中点击播放会自动全屏的问题，在小程序端正常，查了资料做出以下总结，顺便记录一下。
禁止ios 播放视频自动全屏
jugt的博客
07-31 1267
在VIDEO标签中增加 x5-video-player-type=“h5-page” x5-video-orientation=“landscape|portrait”在VIDEO标签中增加 webkit-playsinline=“true” playsinline=“true”2.在IOS浏览中禁止全屏。1.在微信中禁止全屏。
ios使用video播放器，禁止自动全屏
weixin_51608296的博客
07-07 1737
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
【踩坑】video移动端禁止/阻止/取消默认的全屏播放
weixin_44945942的博客
03-02 5251
ios和安卓系统，使用video标签，点击播放按钮，会默认全屏播放， 而我们要实现的效果是：禁止/阻止/取消默认的全屏播放， 不整那些有的没的，直接上代码： <video x5-playsinline="true" playsinline="true" webkit-playsinline="true" x-webkit-airplay="true" ...
videoUI视频切换播放和全屏播放微信小程序
08-10
综上所述，`videoUI 视频切换播放和全屏播放 微信小程序` 主题涵盖了微信小程序的基础知识、`<video>` 组件的使用、自定义组件开发、全屏播放实现以及相关 JavaScript 技术。通过深入学习和实践，开发者能够构建出...
video在uniapp和小程序中横屏自动播放并且不静音
m0_67021283的博客
04-27 1629
放视频监控图片后端返回的数据里面有*图片*（监控最后一次播放的当时画面）。3.video标签自带的属性。1. uniapp配置横屏。2.一共有2个页面。放视频监控实时视频。
html5 video自动全屏
06-28
HTML5 Video可以添加属性，实现视频自动全屏的功能。需要使用“autoplay”, “playsinline”和“muted”属性。...Android设备则默认支持自动全屏播放。在不同设备和浏览器中进行测试，确保视频播放的体验最佳。
html5仿抖音全屏播放,仿抖音视频全屏播放&滑动切换
weixin_35795792的博客
06-10 4514
1 前言随着移动技术的快速迭代，数据流量费用的快速下降，视频、直播正成为全民的媒体盛宴，我司必然也不会缺席此次盛宴，这里讲述的是通过h5实现仿抖音视频全屏播放&滑动切换的效果,供我司直播鉴定回放视频使用。2 实现效果image3 设计方案视频播放video标签`video`标签是HTML5新增的用于视频播放的标签，MDN对其介绍如下：复制代码对于HTML 元素 用于在HTML或者XHTM...
禁止iPhone Safari video标签视频自动全屏的办法
09-03
本篇文章给大家分析有没有办法禁止iPhone Safari video标签视频自动全屏，以下给出好多种情况分享，感兴趣的朋友可以参考下
iOS实现视频播放全屏和取消全屏功能
08-25
主要为大家详细介绍了iOS实现视频播放全屏和取消全屏功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
关于video标签，禁止点击播放时自动全屏，和video出现诡异窗口重叠
qq_42780323的博客
04-29 3477
加上x5-playsinline属性或者x5-video-player-type=“h5”，都可以禁用全屏，其中x5-video-player-type="h5"可以解决视频层级过高问题。 我的代码如下： <videowidth="100%"height="100%"id="video"style="object-fit:contain;"controlswebkit-playsinline="true"playsinline="true"x5-video-play...
关闭ios video自动全屏播放以及陀螺仪检测
weixin_44397261的博客
05-18 840
问题描述： 今天需要在手机端测试一下视频播放，遇到ios video自动全屏问题，百度搜一下全是没用的答案，不知道网友为什么抄或转发这些简单而未经验证的文章。 一堆下面这样没用的代码： this.video=document.getElementId(id) ... ... this.video.playsinline = true // this.video.playsinline = ‘true‘ this.video.webkitPlaysinline = true // this.video.w.
APP端-阻止ios 默认全屏模式显示
weixin_43814775的博客
11-28 400
APP端-阻止ios 默认全屏模式显示
video 标签在 ios 会自动全屏播放
不二喵老师
02-27 1570
<video style="width:100%; height:200px;" :src="videoUrl" ref="videoRef" muted autoplay="autoplay" controls="controls" webkit-playsinline playsinline x5-playsinline x-webkit-airplay="allow" >您的浏览...
如何避免视频自动全屏现象
elephant230的博客
08-05 1555
在微信浏览器、苹果或安卓手机等浏览器，里面使用video标签，会自动变成全屏。 那么可以在video标签之中加入下列属性，就可避免出现视频自动全屏的现象： webkit-playsinlineplaysinlinex5-playsinlinex-webkit-airplay='allow' ...
苹果 ios 使用video 播放器，怎么禁止自动全屏
weixin_44542598的博客
04-13 3755
ios 禁用全屏播放
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值