解决H5在iOS中视频播放自动全屏问题

原创 于 2023-08-02 12:02:57 发布 · 3.6k 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ios

在iOS端的Web控件上使用video标签播放视频时，视频会自动全屏播放。

解决方案

ios端video标签必须加webkit-playsinline、playsinline属性。

android端部分视频也会存在自动全屏问题，添加webkit-playsinline属性。

在HTML修改video标签

<video src="" autoplay="true" muted="true" webkit-playsinline playsinline>

iOS中视频播放自动全屏问题的解决方法
IOWEL的博客
10-01 1172
在iOS设备上，当我们在网页或应用中播放视频时，有时会面临视频自动全屏的问题。为了解决iOS中视频播放自动全屏的问题，我们可以利用HTML5的Video API以及JavaScript来控制视频的播放行为。具体而言，我们需要对视频元素进行事件监听，并在适当的时机执行相应的操作来阻止视频自动全屏。此外，通过调整样式，我们还可以保持视频元素在全屏播放时的大小和位置不变。如果你希望在视频全屏播放时，保持视频元素的大小和位置不变，可以通过CSS来实现。事件触发时，我们也执行相同的操作来阻止视频的全屏播放。
h5在IOS使用videojs插件播放hls视频
weixin_42483208的博客
06-24 4672
公司h5需要实现查看监控的功能，通过嵌入页面的方式实现了看视频的功效，但是IOS不支持。所以IOS系统采用了videojs实现了监控的实时播放(hls格式)，下面是具体的方法：切换视频播放地址后内容不播放的解决方法 具体实现步骤 1. index.html页面引入(最好下载到本地) 2. npm install video-js 并且在需要看监控的页面引入 3. 在html中写入如下代码 然后在methods中创建video...
IOS APP中，使用h5播放器，默认打开网页的时候，会自动全屏，解决方法webkit-playsinline
xiao190128的专栏
07-11 4591
这个问题，安卓6.0以上，大部分手机都不会产生额，主要是针对IOS&lt;video src="1.mp4" webkit-playsinline playsinline x5-playsinline x-webkit-airplay="allow"&gt;&lt;/video&gt;加上上述属性就可以了版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.ne...
ios html5 video自动全屏问题
哈哈哈哈哈哈
03-07 9408
最近做一个wap页面需插入视频，我用的是video.js，然后有个问题，ios11下面点击播放视频时总会自动全屏，安卓不会。查找一翻解决： &lt;video playsinline="" webkit-playsinline="" &gt;&lt;/video&gt; 亲测ios11和9有效。...
解决h5中video视频点击播放，ios自动全屏的问题
woderuiggya的博客
10-20 983
加上 webkit-playsinline='true' playsinline='true' 两个属性即可
Android WebView H5视频播放实现全屏播放功能、全屏按钮不显示、灰显、点击无效问题解决方案
weixin_44158429的博客
04-18 8663
Android WebView H5视频播放实现全屏播放功能。问题全屏按钮不显示、灰显、点击无效解决方案。HTML5 Video Support。 1. 打开硬件加速(3.0以上版本支持) ，防止h5重新加载，切换横屏时，屏幕的H5内容始终以竖屏显示。 2. set一个WebChromClient，实现onShowCustomView() 方法和onHideCustomView()方法。 3. 全屏支持。
iOS中H5视频默认全屏播放问题解决
培根芝士的专栏
11-18 2403
问题描述：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 APP 中H5视频默认自动播放 全屏播放
qq_46113552的博客
03-19 750
在video标签里加上 playsinline=‘true’ webkit-playsinline=‘true’ 可以解决video标签在ios app中自动播放和全屏播放的问题 <video class="img_a" :src="title.useingVideo" controls="controls" playsinline='true' webkit-playsinline='true'></video> //controls="controls" playsi
VideoPlayer解决H5在微信中播放视频弹窗问题的插件
08-11
然而，由于浏览器安全策略以及平台特定的限制，H5中的视频播放经常会出现一些问题，比如在微信内点击视频时，会弹出一个全屏播放窗口，这可能不符合开发者或设计师的预期。为了解决这个问题，`VideoPlayer` 插件...
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
10-15
在本文中，我们将深入探讨如何使用vue-video-player组件在微信环境中解决自动全屏播放以及横竖屏导致的样式错乱问题。vue-video-player是一个流行的Vue.js插件，用于实现视频播放功能，但它可能在某些特定环境下，如...
video H5微信点击播放自动全屏
我叫陈小皮。
07-16 1094
本身ios是支持自动全屏的，但是安卓不可以，所以引入了插件videojs，亲测没啥问题 <video ref="video" class="video-js vjs-default-skin" preload="auto" x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="landscape" style='object-fit: c
h5 video 点击自动全屏
weixin_30401605的博客
11-25 3530
加上如下属性 https://blog.youkuaiyun.com/weixin_40974504/article/details/79639478 可阻止自动全屏播放,感谢 https://blog.youkuaiyun.com/weixin_40974504/article/details/79639478 转载于:https://www.cnblogs.com/zonglonglong/p/10...
ios h5怎么不让视频全屏播放
湾流~ 的博客
04-23 1396
在 iOS 中，H5 页面中的视频通常会在用户点击全屏按钮时自动进入全屏播放模式。使用 playsinline 属性：将 标签中的 playsinline 属性设置为 true。playsinline 属性告诉 iOS 在视频播放时将视频保持在页面内，而不是切换到全屏模式。
微信H5视频/VIDEO/全屏/不全屏/自动播放等相关问题
热门推荐
不懂小彬的博客
12-28 3万+
做过微信H5视频的大胸弟们肯定受到过成吨的伤害甚至多到怀疑人生的地步，自动全屏，不能全屏，不能自动播放，Android，IOS，巴拉巴拉……多到令人发指！今天整理了一下相关的解决办法，以上并不是全部解决了，但是起码能打个60分…… 第一步:设置 x5­video­player­type 启用Ｈ5同层播放器通过video属性“x5­video­player­type”声明启用同层H5播放器 x5­v
html视频自动全屏代码,HTML5视频播放器全屏（fullScreen）方法实例
weixin_39615643的博客
05-30 1420
首先来说，这个标题具有误导性，但这样的设置改标题也是主要因为video使用的比较多在html5中，全屏方法可以适用于很多html元素，多个视频代码如下： 全屏问题 title> * { 填充：0像素； 边距：0px; }正文div.videobox { 宽度：400像素； 高度：320像素； 边距：100px自动; 背景颜色：＃000; }正文div.videobox video....
html5 video标签在IOS里面默认全屏播放问题
非专业前端
01-26 3277
H5 移动端点击图片自动全屏播放视频，退出隐藏video控件，android/ios兼容！
weixin_40291248的博客
11-07 2162
功能分析：用户N张轮播+1个视频，播放按钮始终位于最底部，点击播放视频video 控件要直接全屏播放出来，退出则隐藏视频,以下为gif效果图： 页面布局就不说了 swiper + 底部的播放按钮 position：absolute ;然后z-index:1,video事先display：none $("#video_play").clic...
微信 安卓 H5 video视频播放自动全屏
TO_Web的博客
04-29 1956
这里写自定义目录标题(安卓手机)微信中禁止点击视频自动全屏 (安卓手机)微信中禁止点击视频自动全屏 最近在做到一个项目是要求微信(企业微信)中打开视频播放,但是微信在安卓手机上播放视频时会自动全屏,解决办法:( 2020-04-29测试有效,华为,小米,苹果 ) <video id="my-video" class="video-js" ...
H5使用video.js在安卓和ios上无法自动播放视频流的解决方法
最新发布
11-22
在H5中使用video.js在安卓和iOS系统上遇到无法自动播放视频流的问题，可以参考以下解决办法： ### 针对iOS系统 #### 1. 启用静音自动播放 在iOS系统中，为了改善用户体验，防止不必要的打扰，浏览器通常会限制自动播放有声视频。可以通过设置视频为静音来实现自动播放。在HTML的`<video>`标签中添加`muted`属性，同时添加`playsinline`、`webkit-playsinline`等属性确保视频在页面内播放，而不是全屏播放。示例代码如下： ```html <video style="width: 100%; height: 100%;object-fit: fill" class="player" ref='player_big_box' controls preload autoplay muted playsinline="true" webkit-playsinline="true" x5-video-player-type="h5" x-webkit-airplay="allow"> <source :src="videoUrl? videoUrl : ''" type="application/x-mpegURL"> </video> ``` 这里的`muted`属性将视频设置为静音，`playsinline`和`webkit-playsinline`允许视频在页面内播放，`x5-video-player-type="h5"`启动X5内核h5播放器等。这种方式可以绕过iOS系统对自动播放的限制，实现视频的自动播放[^4]。 #### 2. 用户交互触发 iOS系统要求视频播放必须由用户交互触发。可以通过监听用户的点击等事件，在事件回调中调用video.js的播放方法。示例代码如下： ```javascript import videojs from 'video.js'; // 获取视频元素 const videoElement = document.getElementById('my-video'); const player = videojs(videoElement); // 监听用户点击事件 document.addEventListener('click', function() { player.play(); }, { once: true }); ``` 当用户点击页面时，视频开始播放，并且该事件监听器只执行一次。 ### 针对安卓系统 #### 1. 检查权限和设置 确保安卓设备的浏览器或应用允许自动播放视频。有些安卓设备可能会在浏览器设置中限制自动播放，需要检查并调整相关设置。 #### 2. 确保视频格式支持 安卓设备对不同视频格式的支持情况可能有所不同。建议使用常见的、广泛支持的视频格式，如MP4、HLS等。在使用video.js时，可以通过设置合适的`type`属性来指定视频格式。例如，对于HLS视频流： ```javascript this.player.src([ { src: res.data.datas, type: "application/x-mpegURL" } ]); ``` 这样可以确保安卓设备能够正确识别和播放视频流[^3]。 ### 通用建议 #### 1. 引入必要的插件 在使用video.js时，确保引入了必要的插件。例如，对于HLS视频流，需要引入`videojs-contrib-hls`插件。可以通过以下方式引入： ```html <link href="https://cdn.bootcss.com/video.js/6.3.3/video-js.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/video.js/6.3.3/video.min.js"></script> <script src="https://cdn.bootcss.com/videojs-contrib-hls/5.11.0/videojs-contrib-hls.js"></script> <script src="https://cdn.jsdelivr.net/npm/videojs-flash@2/dist/videojs-flash.min.js"></script> ``` 这些插件可以增强video.js对不同视频格式和播放场景的支持[^3]。 #### 2. 检查网络状况 不稳定的网络可能导致视频无法正常播放或自动播放失败。确保设备的网络连接稳定，并且视频源的网络带宽足够。 #### 3. 检查视频源地址 确保视频源地址正确且可访问。可以在浏览器中直接访问视频源地址，检查是否能够正常播放。如果视频源地址存在问题，需要及时更正。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值