ios 原生video播控退出全屏之后 维持状态

最新推荐文章于 2024-07-31 09:27:51 发布
原创 最新推荐文章于 2024-07-31 09:27:51 发布 · 2.6k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

在iOS设备上，使用原生video标签播放视频，当从全屏模式退出后，视频会自动保持在暂停状态。开发者可以参考Apple的官方文档《Using HTML5 Audio & Video》中关于使用JavaScript控制媒体的部分，来解决这一问题。

ios  原生video播控退出全屏之后 会一直维持pause状态

https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css"></style>
    <title>test</title>
</head>
<body>
  <div>
       <video  id="myvideo" src="" width="400" height="700" controls  controlslist="nodownload"  webkit-playsinline playsinline  preload="none"></video>
  </div>

</body>
最低0.47元/天 解锁文章
【微信小程序】iOS中swiper组件嵌套video组件导致全屏错位解决方案 微信小程序 swiper video全屏 iOS错位 navbar遮挡 swiper嵌套video
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
07-16 214
🧠总结一句话iOS 微信小程序中video全屏依赖，但会被任何父级的破坏，从而导致错位。✅推荐做法给所有video的父组件都设置为默认的若必须嵌套在swiper或中，确保它们的外层容器也不设置position不建议在中使用带有定位的自定义布局（比如用来计算位置或遮罩），容易误伤如果你也遇到类似问题，希望这篇文章能帮你少走一点弯路。踩坑虽痛，但解决之后的满足感是前端人最大的快乐！
【踩坑】video移动端禁止/阻止/取消默认的全屏播放
weixin_44945942的博客
03-02 5307
ios和安卓系统，使用video标签，点击播放按钮，会默认全屏播放， 而我们要实现的效果是：禁止/阻止/取消默认的全屏播放， 不整那些有的没的，直接上代码： <video x5-playsinline="true" playsinline="true" webkit-playsinline="true" x-webkit-airplay="true" ...
超级简单的Vue中引入Video.js播放1
milijiangjun的博客
09-22 939
1.安装 依赖 $ npm install video.js 注册main.js import Video from 'video.js' import 'video.js/dist/video-js.css' Vue.prototype.$video = Video 界面使用 <template> <div class="test_two_box"> <video id="myVideo" class="vide
关闭Video在ios设备上自动全屏播放
qq_41733848的博客
01-11 1213
在开发过程中发现video播放在安卓设备上是在自定义的样式基础上播放，而在ios设备上是自动全屏播放，为了开发统一所以在ios上就不能自动全屏播放。解决方案：添加 playsinline 属性 关闭ios自动全屏播放后统一设置播放样式。
Android 监听全屏,ios、安卓在微信video监听播放结束后，怎么退出全屏播放？
weixin_39644139的博客
06-01 772
问题如题如何监听视频全屏播放结束后，触发退出全屏事件？在网上找了些案例下面监听视频的进入全屏、退出全屏事件//进入全屏function FullScreen() {var ele = document.documentElement;if (ele .requestFullscreen) {ele .requestFullscreen();} else if (ele .mozRequestFul...
解决video在ios中自动全屏问题
weixin_42082342的博客
07-31 1441
在开发APP的时候，发现video视频在ios中点击播放会自动全屏的问题，在小程序端正常，查了资料做出以下总结，顺便记录一下。
HTML5新标签video在iOS上默认全屏播放
Enn的数据库
06-30 4670
今天做一个app时发现一个问题，应用html5中的video标签加载视频，在android手机上默认播放大小，但是换成iPhone手机上出问题了，默认弹出全屏播放，查找了好多论坛，都没有谈论这个的。然后几经波折终于找到其解决的方法了，在video标签下的source中加入这个-webkit-playsinline=true完美解决全屏问题。  例如：
ios端video.js退出全屏和画中画之后 维持播放状态
qq_37111820的博客
12-03 1660
// 监听ios退出全屏之后 维持播放状态 var _exitfullscreen = true; var timer; var pauseTimestamp; var exitTimeStamp; // 监听进入全屏 video.addEventListener('webkitbeginfullscreen', function() { _exitfullscreen = false; }); // 监听退出全屏 video.addEventListener("webkitendfullscre
禁止iPhone Safari video标签视频自动全屏的办法
09-03
苹果出于用户体验考虑，限制了在Safari中非全屏播放视频的能力，因此，对于纯Web环境，我们可以说没有直接的方法可以禁止iPhone Safari中的`<video>`标签视频自动全屏。 总结起来，尽管开发者社区提出了许多尝试和...
跨平台HTML5视频全屏播放解决方案_支持iOS和Android设备自动适配_通过原生video标签属性设置和JS动态生成两种方式实现全屏播放_解决移动端浏览器视频播放兼容性问题_.zip
07-18
首先，我们通过原生video标签属性的设置，优化了视频播放器的兼容性。在HTML5中，video标签是基本的视频播放容器，但不同的浏览器对它的支持存在差异。我们通过设置合适的video标签属性，如自动播放、静音等，以及...
【已解决】ios系统下video标签全屏的问题解决方案
热门推荐
Linda的前端开发路
06-26 1万+
ios系统下video标签全屏的问题解决方案
iOS实现视频播放全屏和取消全屏功能
01-03
本文实例为大家分享了iOS实现视频播放和取消全屏功能具体代码，供大家参考，具体内容如下 iOS 视频播放全屏和取消全屏功能实现，所需全屏的视频所在的vc需要导航控制器控制 自定义 全屏vc VedioPlayerViewController 并定义属性 /// 自定义的那个视频类 ///@property (nonatomic,strong) VedioPlayer *vedioPlayer; 在VedioPlayer中定义属性 ///视频展示的view 的父视图 @property (nonatomic,strong) UIView *currentSuperView; 在视频类定义方法
vue实现全屏效果
yjtt__的博客
07-30 444
1.绑定点击事件 2.在methods写入方法 以下为代码 ceshiClick(){ letelement=document.documentElement if(this.isFullscreen){ if(document.exitFullscreen){ document.exitFullscreen() }elseif(document.webkitCancelFullScr...
uniapp 视频全屏IOS兼容
weixin_40638895的博客
07-06 472
开发者,IDE相关视频讲解：美国禁用中国大学MATLAB快四年，国产替代完成了吗？C语言程序设计入门之环境安装实现uniapp视频全屏IOS兼容指南 1. 流程概述 为了实现uniapp视频全屏IOS兼容，我们需要按照以下步骤进行操作： 步骤 操作 1 检查视频组件是否支持全屏功能 2 在uniapp...
ios支持video标签吗_video标签移动端兼容性问题总结
weixin_32115639的博客
02-23 3311
最近开发了一个wap版的贵金属营销直播间，直播间主要由视频区和互动区组成。视频区使用了原生的video标签实现视频播放；互动区展示了分析师和用户之间的文本对话。直播间开发过程中遇到了不少兼容性问题，这些问题大多数都是由移动端浏览器对video标签的实现差异造成的。现总结如下：视频无法自动播放autoplay属性失效HTML5标准规定：video标签设置autoplay属性后，当页面加载完成时，媒体...
JS控制全屏，监听退出全屏事件
qq_27628085的博客
08-22 3824
实现方案： //进入全屏 function requestFullScreen(de) { if(de.requestFullscreen){ //W3C de.requestFullscreen(); }else if (de.mozRequestFullScreen){ //FI...
iOS12网页视频播放点击全屏按钮会导致闪退
CodingFire的博客
10-17 5642
最近在app中有一个h5界面，是一个视频播放的列表，然后在iOS12的手机上发生了如下几个问题： 第一，自动全屏播放，这个问题历来就有，很好解决； 第二，全屏后取消全屏，状态栏消失； 第三，多个视频间来回点全屏按钮导致app崩溃闪退； 以上三个问题，我们下面一一来说明： 1.自动全屏播放，历来如此，想要解决也很简单： //在video标签中加上下面属性 &amp;lt;video playsinline=...
编译原理实验代码及相关文法项目_包含LL1分析LR1分析语法分析器词法分析器文法文件实验报告Python实现编译器前端语法树生成错误处理代码示例教学资.zip
最新发布
12-10
编译原理实验代码及相关文法项目_包含LL1分析LR1分析语法分析器词法分析器文法文件实验报告Python实现编译器前端语法树生成错误处理代码示例教学资.zip
video播放自动全屏
07-25
在网页或应用中实现视频播放时自动全屏的功能，可以通过 HTML5 和 JavaScript 结合使用，同时需要注意不同浏览器和设备（尤其是移动端）对自动播放和全屏模式的限制。以下是实现 HTML5 视频自动全屏播放的技术方案： ### 视频自动播放并进入全屏模式 在 HTML 页面中使用 `<video>` 标签，并结合 JavaScript 控制播放与全屏切换： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Video Auto Fullscreen</title> <style> video { width: 100%; height: auto; object-fit: cover; } </style> </head> <body> <video id="myVideo" autoplay muted controls></video> <script> const video = document.getElementById('myVideo'); const clipPaths = [ 'video1.mp4', 'video2.mp4', 'video3.mp4' ]; let currentClipIndex = Math.floor(Math.random() * clipPaths.length); video.src = clipPaths[currentClipIndex]; video.addEventListener('play', () => { if (video.requestFullscreen) { video.requestFullscreen(); } else if (video.webkitRequestFullscreen) { video.webkitRequestFullscreen(); // Safari } else if (video.msRequestFullscreen) { video.msRequestFullscreen(); // IE/Edge } }); video.addEventListener('ended', () => { // 播放结束后切换到下一个随机视频 let newIndex; do { newIndex = Math.floor(Math.random() * clipPaths.length); } while (newIndex === currentClipIndex); currentClipIndex = newIndex; video.src = clipPaths[currentClipIndex]; video.play(); }); </script> </body> </html> ``` ### 注意事项 - **自动播放限制**：大多数现代浏览器要求视频在自动播放时必须静音（`muted` 属性），否则会阻止自动播放。 - **全屏 API 权限**：全屏模式通常需要用户交互后才能触发，部分浏览器在自动播放视频时允许全屏，但移动端（如 iOS）限制较多。 - **iOS 特殊处理**：iOS 上的 Safari 对自动全屏支持有限，可以通过设置 `webkit-playsinline` 和 `playsInline` 属性来控制是否内联播放，部分设备需用户手动点击触发全屏[^2]。 ### 移动端适配建议 - 对于 iOS 设备，推荐在用户点击播放按钮后触发全屏操作，避免自动播放带来的限制。 - 使用 `video.webkitEnterFullscreen()` 方法可以尝试强制进入全屏模式。 - 在 iOS 上，建议结合原生应用逻辑进行更精细的控制，例如监听屏幕方向变化或使用原生通知机制[^2]。 ---
评论 4
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值