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

已于 2024-01-11 17:32:46 修改
阅读量685 收藏 6
点赞数 8
文章标签： ios
于 2024-01-11 17:27:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41733848/article/details/135534726
版权

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

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

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

问题解决！

高亦寒欸
关注
  • 8
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
10-15
在iOS设备上，通常可以通过设置`webkit-playsinline`和`playsinline`属性来阻止视频自动全屏播放。然而，在基于腾讯X5内核的安卓微信浏览器中，这些属性可能不起作用，需要额外的属性如`x5-playsinline`来达到相同...
html5 video全屏播放/自动播放的实现示例
01-21
近期开始开发公司新版官网， 首页顶部（header）是一个全屏播放的小视频, 现简单总结如下： 页面代码 <?php if(!Helper::isMobile()) { ?> <video id=homeVideo class=home-video autoplay loop muted ...
ios使用video播放器，禁止自动全屏
weixin_51608296的博客
07-07 1507
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
解决H5在iOS中视频播放自动全屏问题
培根芝士的专栏
08-02 2149
在iOS端的Web控件上使用video标签播放视频时，视频会自动全屏播放。
浏览器样式 IOS下移除原生样式
lyl117363的博客
01-24 569
-webkit-appearance:none; https://www.html.cn/book/css/webkit/visual/appearance.htm
关闭ios video自动全屏播放以及陀螺仪检测
weixin_44397261的博客
05-18 669
问题描述： 今天需要在手机端测试一下视频播放，遇到ios video自动全屏问题，百度搜一下全是没用的答案，不知道网友为什么抄或转发这些简单而未经验证的文章。 一堆下面这样没用的代码： this.video=document.getElementId(id) ... ... this.video.playsinline = true // this.video.playsinline = ‘true‘ this.video.webkitPlaysinline = true // this.video.w.
ios video标签不自动播放和自动播放一直全屏播放问题处理、video视频填充容器
林中明月间丶
01-18 3332
https://blog.csdn.net/qq_37604446/article/details/102485110 object-fit:cover; 视频设置为视频外层容器大小 fill:此值为boject-fit的默认值，替换内容的大小被设置为填充元素的内容框，也就是说，元素的内容扩大到完全填充容器的外形尺寸，即使这打破其内在的宽高比。 contain：替换元素内容大小保持长宽比例...
iOS实现视频播放全屏和取消全屏功能
08-25
iOS视频播放全屏和取消全屏功能实现 iOS实现视频播放全屏和取消全屏功能是iOS开发中常见的一种功能，主要是通过自定义的视频类和全屏vc来实现视频的全屏和取消全屏功能。下面将详细介绍实现视频播放全屏和取消全屏...
解决video标签在安卓webview下无法自动播放问题
09-04
主要介绍了video标签在安卓webview下无法自动播放问题的解决方法 ,需要的朋友可以参考下
react-native-video实现视频全屏播放的方法
08-27
在 Android 端，gradle 中已经完成了配置，而在 iOS 端，需要手动配置一下，移除自动 link 进来的 libRCTVideo.a 库，然后重新添加 libRCTVideo.a 库。 使用 react-native-video 组件时，需要设置 source 属性来...
【踩坑】video移动端禁止/阻止/取消默认的全屏播放
weixin_44945942的博客
03-02 4972
ios和安卓系统，使用video标签，点击播放按钮，会默认全屏播放， 而我们要实现的效果是：禁止/阻止/取消默认的全屏播放， 不整那些有的没的，直接上代码： <video x5-playsinline="true" playsinline="true" webkit-playsinline="true" x-webkit-airplay="true" ...
【已解决】ios系统下video标签全屏的问题解决方案
热门推荐
Linda的前端开发路
06-26 1万+
ios系统下video标签全屏的问题解决方案
解决ios在微信内置浏览器中video播放的全屏问题
蓝色之恋love的博客
08-08 2881
video 标签在部分的安卓微信和iOS的微信浏览器上点击播放会默认全屏展示
（已解决）video标签在ios端默认全屏播放（h5开发）
weixin_48156531的博客
08-03 3580
Video在ios全屏播放 这两天一直在做h5开发，项目马上完结，就是到最后项目上线之后，在ios上面测试，突然发现原来的视频默认全屏播放，这样就有很大的限制，很不利于开发，我这边是已经解决这个问题了的，在你的video标签上加上（playsinline=‘false’ webkit-playsinline=‘false’）这两个属性即可， 代码如下： <video poster="../image/a.png" id="${videId}" src="${videoUrl}" playsinlin
阻止ios播放视频自动全屏
weixin_42792507的博客
08-05 2001
1.js监听视频全屏事件webkitfullscreenchange <video class="playerVideo" playsinline="true" webkit-playsinline="true"> //视频缩放,ios播放视频不会全屏 let flag = false; //是否进入全屏，默认未进入 document.addEventListener("webkitfullscreenchange", function (e) { if ($('.playerVi
APP端-阻止ios 默认全屏模式显示
weixin_43814775的博客
11-28 224
APP端-阻止ios 默认全屏模式显示
iOS中H5视频默认全屏播放问题解决
培根芝士的专栏
11-18 1946
问题描述：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以下...
苹果 ios 使用video 播放器，怎么禁止自动全屏
weixin_44542598的博客
04-13 2920
ios 禁用全屏播放
【uniapp-ios】App端与webview端相互通信的方法以及注意事项
最新发布
菜菜的博客
07-08 339
本文描述的uniapp开发的app端和web端通信问题
ios html5 自动全屏播放,iOS实现<video>标签全屏播放时自动横屏
05-25
在iOS上，<video>标签默认是不支持自动全屏播放的。但是，你可以通过以下方式实现自动全屏播放，并且在横屏时自动切换到横屏模式： 1. 在<video>标签中添加webkit-playsinline属性，这将允许视频在页面内播放而不是全屏播放。 ``` <video src="video.mp4" webkit-playsinline></video> ``` 2. 为了实现自动全屏播放，你需要使用JavaScript来控制<video>标签。在页面加载完成后，使用以下代码将视频播放： ``` var video = document.querySelector('video'); video.play(); ``` 3. 为了在横屏时自动切换到横屏模式，你需要在JavaScript中监听屏幕旋转事件（orientationchange），并在事件发生时修改<video>标签的样式，将其宽度设置为屏幕的高度，将其高度设置为屏幕的宽度，同时还需要将页面的viewport元标签设置为允许横屏显示： ``` //监听屏幕旋转事件 window.addEventListener("orientationchange", function() { if (window.orientation == 90 || window.orientation == -90) { //横屏时将视频全屏，并修改viewport元标签 document.querySelector('video').style.width = window.innerHeight + 'px'; document.querySelector('video').style.height = window.innerWidth + 'px'; document.querySelector('meta[name=viewport]').setAttribute('content', 'width=device-height, initial-scale=1.0'); } else { //竖屏时将视频恢复原始尺寸，并修改viewport元标签 document.querySelector('video').style.width = '100%'; document.querySelector('video').style.height = 'auto'; document.querySelector('meta[name=viewport]').setAttribute('content', 'width=device-width, initial-scale=1.0'); } }); ``` 这样就可以实现iOS上<video>标签的自动全屏播放，并且在横屏时自动切换到横屏模式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值