解决video在ios中自动全屏问题

于 2024-07-31 09:27:51 发布
阅读量381 收藏 1
点赞数 2
文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42082342/article/details/140813821
版权

在开发APP的时候，发现video视频在ios中点击播放会自动全屏的问题，在小程序端正常，查了资料做出以下总结，顺便记录一下。

一、IOS端处理方案：

webkit-playsinline='true'    playsinline='true'

<video src="" webkit-playsinline='true' playsinline='true' />

二、安卓端处理方案（部分机型会出现）：

x5-video-player-type='h5-page'

<video src="" x5-video-player-type='h5-page' />

Promise-proto
关注
iOS实现视频播放全屏和取消全屏功能
08-25
主要为大家详细介绍了iOS实现视频播放全屏和取消全屏功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
关闭Video在ios设备上自动全屏播放
qq_41733848的博客
01-11 841
在开发过程中发现video播放在安卓设备上是在自定义的样式基础上播放，而在ios设备上是自动全屏播放，为了开发统一所以在ios上就不能自动全屏播放。解决方案：添加 playsinline 属性 关闭ios自动全屏播放后统一设置播放样式。
video视频播放自动进入全屏模式
最新发布
weixin_42401268的博客
04-26 832
通过设置 playsinline 有的设备会不生效，可以设置 webkit-playsinline。两个可以同时设置，保证包含所有情况。另外，验证时，发现点击视频的时候会出现切换画中画的按钮，实际需求是不需要的。其中介绍了playsinline属性可以设置视频播放的时候不直接全屏播放。但是每次进入页面，视频加载完成播放的时候，会直接进入全屏模式播放。同过mdn查询video标签的参数发现并没有相关介绍。混合开发， 原生使用webview内嵌h5页面。转移思路，查询多媒体相关的设置。
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 使用video 播放器，怎么禁止自动全屏
weixin_44542598的博客
04-13 3097
ios 禁用全屏播放
【已解决】ios系统下video标签全屏的问题解决方案
热门推荐
Linda的前端开发路
06-26 1万+
ios系统下video标签全屏的问题解决方案
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
10-15
在本文中，我们将深入探讨如何使用vue-video-player组件在微信环境中解决自动全屏播放以及横竖屏导致的样式错乱问题。vue-video-player是一个流行的Vue.js插件，用于实现视频播放功能，但它可能在某些特定环境下，如...
禁止iPhone Safari video标签视频自动全屏的办法
09-03
尽管开发者们尝试了各种方法来解决这个问题，但遗憾的是，目前在纯Web环境下，没有一种完美的解决方案能够完全禁止iPhone Safari中的视频自动全屏播放。 一个常见的尝试是在`<video>`标签上添加`webkit-playsinline...
h5使用video标签解决自动全屏问题
qq_24978681的博客
10-19 9926
h5使用video标签解决自动全屏问题
html5 video全屏播放/自动播放的实现示例
01-21
近期开始开发公司新版官网， 首页顶部（header）是一个全屏播放的小视频, 现简单总结如下： 页面代码 <header class=header xss=removed> <?php if(!Helper::isMobile()) { ?> <video id=homeVideo class=home-video autoplay loop muted poster=res/video/cover.jpg> <source src=res/video/home_video.mp4 ty
HTML5 video播放器全屏(fullScreen)方法实例
09-28
主要介绍了HTML5 video播放器全屏(fullScreen)方法实例,本文直接给出一个完整代码实例,需要的朋友可以参考下
ios html5 video自动全屏问题
哈哈哈哈哈哈
03-07 9273
最近做一个wap页面需插入视频，我用的是video.js，然后有个问题，ios11下面点击播放视频时总会自动全屏，安卓不会。查找一翻解决： &lt;video playsinline="" webkit-playsinline="" &gt;&lt;/video&gt; 亲测ios11和9有效。...
video 全屏播放
weixin_41874683的博客
03-21 563
  iPad上navigator.userAgent "Mozilla/5.0 (iPad; CPU OS 11_2_5 like Mac OS X) AppleWebKit/604.5.6 (KHTML, like Gecko) Version/11.0 Mobile/15D60 Safari/604.1"的safari没有以下全屏方法 if(element.requestFullScre...
Html线插上播放视频没有音乐,html5中使用video标签播放本地视频不显示图像，只有声音，全屏没问题，求解决方案...
weixin_29201933的博客
06-03 875
如题。不全屏时，无法看到图像。目前是通过默认全屏来规避的。代码如下html,body {height: 100%;}.mui-content {position: fixed;top: 50px;bottom: 10px;left: 0;right: 0;}video {display: block;margin: 0 auto;max-width: 100%;}播放视频选择mui.init();...
禁止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.在微信中禁止全屏。
html5 video全屏播放/自动播放
zezeadede555的博客
02-14 688
页面代码 <header class="header" style="width:100%;position: relative;"> <?php if(!Helper::isMobile()) { ?> <video id="homeVideo" class="home-video" autoplay loop muted poster="res...
微信浏览器播放video自动全屏问题
qq_43592064的博客
04-09 1295
微信浏览器用的是chrome的内核 播放会自动将视频全屏
（已解决）video标签在ios端默认全屏播放（h5开发）
weixin_48156531的博客
08-03 3711
Video在ios全屏播放 这两天一直在做h5开发，项目马上完结，就是到最后项目上线之后，在ios上面测试，突然发现原来的视频默认全屏播放，这样就有很大的限制，很不利于开发，我这边是已经解决这个问题了的，在你的video标签上加上（playsinline=‘false’ webkit-playsinline=‘false’）这两个属性即可， 代码如下： <video poster="../image/a.png" id="${videId}" src="${videoUrl}" playsinlin
微信浏览器 ios video 全屏 静音
06-01
微信浏览器在 iOS 设备上播放视频时会自动进入全屏模式，但是它默认不允许自动播放和静音。因此，为了在微信浏览器中实现全屏静音的视频播放，你需要在用户交互后手动播放视频，并将 `playsinline` 和 `muted` 属性添加到视频元素中。 下面是一个示例代码： ```html <video id="myVideo" playsinline muted> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> </video> <script> var video = document.getElementById("myVideo"); // 用户触发播放事件 document.addEventListener("WeixinJSBridgeReady", function() { video.play(); }); // 进入全屏模式时 function enterFullscreen() { video.webkitEnterFullscreen(); // 进入全屏 } // 退出全屏模式时 function exitFullscreen() { video.webkitExitFullscreen(); // 退出全屏 } </script> ``` 在这个示例中，我们将 `playsinline` 和 `muted` 属性添加到视频元素中，并在用户触发播放事件后手动播放视频。当进入全屏模式时，我们使用 `webkitEnterFullscreen()` 方法进入全屏模式。当退出全屏模式时，我们使用 `webkitExitFullscreen()` 方法退出全屏模式。 请注意，这个示例只适用于微信浏览器在 iOS 设备上播放视频的情况。如果你想要更通用的解决方案，请考虑使用 `autoplay` 和 `muted` 属性，并在用户交互后通过 JavaScript 启动视频播放。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值