解决音频在ios环境下播放会全屏的bug方法

最新推荐文章于 2025-04-30 14:38:09 发布
原创 最新推荐文章于 2025-04-30 14:38:09 发布 · 754 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#audio #前端 #ios #全屏

本文介绍了一个常见的移动端网页设计问题——自动全屏播放的解决方法。通过在音频标签中添加特定属性，可以有效避免移动端网页在加载音频或视频时自动进入全屏状态，提升用户体验。

网页设计在移动端的时候，会出现播放自动全屏的效果的，说实在这个问题还是蛮棘手的，以下为次bug的解决方法：

<audio id="video" preload="none" class="hide video" width="0" height="0"></audio>

这个时候需要给sudio加上autoplay属性就可以不实现全屏自动播放了

<audio id="video" preload="none" class="hide video" width="0" height="0" autoplay></audio>

 

84、iOS音乐播放开发全解析
fox11的博客
07-08 73
本文全面解析了iOS音乐播放开发的核心内容，涵盖音乐库的持久化与变更管理、MPMusicPlayerController的使用、播放队列控制、播放状态监听、进度更新、MPVolumeView定制、AV Foundation音频播放方案，以及媒体选择器的应用。同时对比了不同播放方式的性能特点，总结了常见问题的解决方案，并展望了未来发展趋势，为iOS开发者提供了详尽的音乐播放功能开发指南。
移动端 h5 ios不能自动播放音乐的问题，且播放会全屏等问题
qq_36029761的博客
09-24 507
最近踩了个坑 项目方要求视频播放如下效果 问题1：ios无法自动播放，往上搜到的都是静音播放 话不多说，上代码 首先姚引用微信的js <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <script> document.getElementById('video').play(); //微信必须加入Weixin JSAPI的WeixinJSB
iOS中视频播放自动全屏问题的解决方法
IOWEL的博客
10-01 1175
在iOS设备上，当我们在网页或应用中播放视频时，有时会面临视频自动全屏的问题。为了解决iOS中视频播放自动全屏的问题，我们可以利用HTML5的Video API以及JavaScript来控制视频的播放行为。具体而言，我们需要对视频元素进行事件监听，并在适当的时机执行相应的操作来阻止视频自动全屏。此外，通过调整样式，我们还可以保持视频元素在全屏播放时的大小和位置不变。如果你希望在视频全屏播放时，保持视频元素的大小和位置不变，可以通过CSS来实现。事件触发时，我们也执行相同的操作来阻止视频的全屏播放。
IOS APP中，使用h5播放器，默认打开网页的时候，会自动全屏，解决方法webkit-playsinline
satisfy
11-13 2万+
这个问题，安卓6.0以上，大部分手机都不会产生额，主要是针对IOS 加上上述属性就可以了
【xgplayer】xgplayer填坑记 | xgplayer全屏与css全屏冲突
此人太懒，没有任何简介
03-07 3418
【xgplayer】xgplayer填坑记 && xgplayer全屏与css全屏冲突
禁止ios 播放视频自动全屏
jugt的博客
07-31 1344
在VIDEO标签中增加 x5-video-player-type=“h5-page” x5-video-orientation=“landscape|portrait”在VIDEO标签中增加 webkit-playsinline=“true” playsinline=“true”2.在IOS浏览中禁止全屏。1.在微信中禁止全屏。
西瓜播放器全屏功能源码分析
脚步
03-10 1545
剩下的else if语句主要针对，firefox, webkit类型webview，ie浏览器进行兼容，如果都不支持requestFullScreen方法，就通过给播放器的包裹元素添加样式的方式实现全屏效果。自定义事件 webkitpresentationmodechanged 相对的处理，这个事件会在画中画相对应操作触发，退出全屏删除全屏样式，触发exitFullScreen()方法。这里根据用户是否配置roateFullScreen来决定进入和退出全屏执行的方法，执行的方法略有差异，下面详细说明。
iOS视频播放新体验：KrVideoPlayerPlus-master分析
KrVideoPlayerPlus-master作为一个第三方库，提供了一套完整的解决方案，能够帮助开发者在开发iOS应用时，高效地实现视频播放功能。了解并掌握这些知识点将有助于在进行iOS视频播放功能开发时，更加游刃有余。
iOS9 视频播放器 支持本地和网络
12-11
本项目专注于iOS9版本，通过改写开源代码库，提供了一个无bug的视频播放解决方案。下面将详细介绍这个项目涉及的关键知识点。 首先，iOS9中的视频播放通常依赖于AVFoundation框架。AVFoundation是Apple提供的多媒体...
ios 直播集成好的IJKMediaFramework.framework(0.8.8版本)
03-31
3. **配置Info.plist**: iOS为了保护用户隐私，不允许应用在后台播放音频。因此，需要在Info.plist文件中添加`UIBackgroundModes`键，值为数组，包含`audio`，使得应用在后台时可以继续播放音频。 4. **导入头文件*...
iOS音乐播放与管理全解析
在iOS开发中，音乐的播放与管理是一个常见且重要的功能。下面将详细介绍iOS中音乐库的持久化与变化监测、音乐播放器的使用、音量视图、使用AV Foundation播放歌曲以及媒体选择器的相关内容。 ## 1. 音乐库的持久化...
【Xgplayer】xgplayer基本使用 | xgplayer使用 | 超好的前端视频播放器 | xgplayer前端最好视频播放器
此人太懒，没有任何简介
03-08 1万+
【Xgplayer】xgplayer基本使用 & xgplayer使用 & 超级牛逼的前端视频播放器 && xgplayer前端最好视频播放器
西瓜播放器xgplayer设置自动播放踩坑
Hero_rong的博客
06-02 1821
上图是官网的介绍，相信大家都是按照官网配置去做的，但是并没有什么用，插件很好用，但是属性不全，真的很悔恨，找遍 api 都没有找到自动播放的属性！最终看了大佬的文章发现了autoplayMuted属性。'autoplayMuted':true, 允许自动播放。设置了这一属性，立马生效，都不需要什么 autoplay。
使用 西瓜播放器，可添加全屏水印，安卓苹果环境都兼容
最新发布
qq_57477371的博客
04-30 418
继前两篇文档之后，我发现，原生的video，没有倍速调整，需要添加也比较麻烦，所以我查阅多篇文档，发现使用西瓜播放器替换原生video是一个不错的方案。
前端-h5直播视频流（xgplayer 篇）
weixin_43909743的博客
05-21 1万+
前言 1、通过接口获取媒体流地址或静态地址；（省略） 2、通过 西瓜播放器插件xgplayer + video标签实现直播 本质：始终在调用流地址实现视频播放（个人理解） 使用 template <div ref="video" id="mmid" v-show="islivea" ></div> 安装西瓜播放器插件 官网 $ npm install xgplayer $ npm install xgplaye
h5播放器，视频控件xgplayer-西瓜播放器
qq_27309221的博客
07-01 7287
在这里写这篇文章是因为先前用了Video.js这款JS库插件，实现是可以实现，但是用户体验度不怎么好，所以今天就换了xgplayer的西瓜播放器，在自定义样式与插件上，xgplayer有更高的灵活性和可控性，它可以自定义关闭效果并自行开发，并且文档可读性强，快速上手。下面来看看它的使用： 一、安装 // 最新稳定版本 npm install xgplayer --save 二、使用 1、在页面提供占位 DOM <div id="mse"></div> 2、实例化 import
dplayer js控制 自动全屏_DPlayer简单用法
weixin_42496225的博客
12-23 4795
DPlayer是一个支持弹幕的 HTML5 视频播放器。支持 Bilibili 视频和 danmaku，实时视频(HTTP Live Streaming，M3U8格式)以及 FLV 格式。用法HTML选项var dp = new DPlayer({element: document.getElementById('player1'), // 可选，pl...
html5 video全屏播放/自动播放
热门推荐
编程架构三分天下：分层、分治、分时序。
09-07 5万+
近期开始开发公司新版官网， 首页顶部（header）是一个全屏播放的小视频，开发过程中遇到一些麻烦，还好借助互联网解决了这个问题, 现简单总结如下： &amp;amp;amp;amp;lt;header class=&amp;amp;amp;quot;header&amp;amp;amp;quot; style=&amp;amp;amp;quot;width:100%;position: relative;&amp;amp;amp;quot;&amp;amp
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值