微信端开发H5页面的时候，audio标签在苹果机上无法进行自动播放

最新推荐文章于 2024-06-13 14:55:33 发布
最新推荐文章于 2024-06-13 14:55:33 发布
阅读量2.3w 收藏 4
点赞数 3
分类专栏： H5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wp_boom/article/details/52161138
版权
在微信端开发H5时，audio标签在苹果设备上无法自动播放。通过分析，发现在iOS系统中由于设计规范限制了自动播放。解决方案包括：利用touch事件触发播放，或者使用微信提供的官方API来监听并启动播放功能。
摘要由CSDN通过智能技术生成

所遇问题

在微信端开发H5的时候，audio标签在苹果机上无法进行自动播放

原因分析及解决方案

<audio controls="controls" id="music" loop="loop">
    <source src="./assets/sound/music.mp3" type="audio/ogg" />
    <source src="./assets/sound/music.ogg" type="audio/ogg" />
</audio>

这是我html上的代码，经过运行发现android机上能够良好的呈现并播放，但是在苹果机上呈现的是一条白杠和一个无法使用的三角形按钮。
使用Audio标签的属性进行检测

最低0.47元/天 解锁文章
jocchoc
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
H5背景音乐播放暂停加图标自动旋转功能，支持微信内自动播放代码实例
12-16
实现html页面背景音乐自动播放，右上角增加播放图标状态显示，支持暂停，使用最新微信JDK支持微信内打开自动播放功能
HTML5页面音视频在微信和app下自动播放的实现方法
09-28
现在大部分的H5页面都有实现播放背景音乐，播放视频功能。那怎么实现自动播放呢？下面小编给大家带来了HTML5页面音视频在微信和app下自动播放的实现方法
HTML5音频标签audio无法播放的问题
热门推荐
reborn的博客
01-07 3万+
HTML5音频标签无法播放的问题 先说下audio标签的一些属性 属性 值 描述 autoplay autoplay 如果出现该属性，则音频在就绪后马上播放。 controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。 loop loop 如果出现该属性，则每当音频结束时重新开始播放。 muted muted 规定视频输出...
【html5的video标签在移动端的使用】【微信内部浏览器video自动播放】【vue-video-player】
最新发布
Min_Fox的博客
06-13 848
在移动端的首页用视频做背景动画，让动画循环，自动播放，静音。
Mac 下QWebEngine 支持h5播放mp3、mp4
weixin_38261823的博客
03-22 1152
在Mac下用QWebEngine 遇到了点问题，网页用h5的video、audio标签来播放mp4、mp3都不成功，后来在网上找了许多资料，说是没有解码的库。也有说是把QWebEngine源码重新编译下就好了。但是按网上的资料来根本编译不了，最后还是用qt的帮助文档来解决。 我的qt版本是5.14.1.是在mac下编译的，只需要编译QWebEngine模块就成功地播放mp4、mp3文件了。 1...
audio / video 媒体标签在IOS端触发不了的两种解决方法，亲测有效~
Umbrella_Um的博客
04-02 5190
什么？？音视频标签在IOS手机上播放不了，你一定踩了这个坑，来看看怎么解决吧~
微信H5背景音乐自动播放
少吃点肉的博客
06-30 922
<script> function audioAutoPlay(id){ var audio = document.getElementById(id); audio.play(); document.addEventListener("WeixinJSBridgeReady", function () { audio.play(); },
iOS系统和微信中不支持audio自动播放问题的解决方法
08-29
在本文中，我们将探讨如何解决这一问题，以便在iOS设备上的微信环境下实现H5页面的音频自动播放。 首先，我们需要了解iOS系统对音频播放的策略。苹果设备为了节约电量和防止用户被打扰，要求音频播放必须由用户交互...
H5 Video标签调用摄像头进行录像，兼容苹果、安卓系统、可在微信浏览器正常使用
04-02
在这个场景中，我们利用`<video>`标签的特定属性来实现调用用户设备的摄像头进行录像，并且确保这个功能在苹果iOS系统（如iPhone和iPad）和安卓Android系统上的浏览器，以及微信内置的浏览器中都能正常工作。...
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
10-16
微信H5项目，ios端出现了软键盘输完隐藏后页面不会回弹，下方会有一大块留白。这篇文章主要介绍了决微信H5页面软键盘弹起后页面下方留白的问题（iOS端） ,需要的朋友可以参考下
解决ios上audio不能自动播放的问题以及监听audio播放状态
J_W_Xie
06-27 1万+
最近做了个H5产品的宣传活动，用到了audio标签并且要求自动播放，我们都知道safri on ios里面明确指出等待用户的交互动作后才能播放media，也就是说如果你没有得到用户的action就播放的话就会被safri拦截。百度了许多方法，其实很多都说亲测可用，然而都是骗子，用上去之后再iphone还是不能自动播放，这里我是做微信上的H5活动，所以使用了微信上的插件配合就能达到自动播放的效果，在
微信H5网页自动播放背景音乐
a_靖的博客
06-13 3112
微信网页自动播放音乐实现
iphone手机上微信自动播放H5背景音乐
weixin_34209851的博客
06-23 352
2019独角兽企业重金招聘Python工程师标准>>> ...
微信h5，背景音乐自动播放
coder_daiwang的博客
11-02 2670
之前项目被误导，一直都以为微信ios不支持自动播放,使用如下代码安卓可以自动播放，但是ios需要触摸。js代码 app.sound = new Howl({ urls: [app.assetsPath + 'audio/bgn.mp3'], loop: true, sprite: { comp
H5进入页面音乐播放兼容微信，浏览器，APP内嵌
u010411325的博客
04-28 2218
最近公司接到要做个活动页，需要背景音乐，要进入页面就播放H5与浏览器都要兼容，但看了浏览器好像禁止页面，进入播放音乐，然后就各种招文档。废话不多说上代码。。。 HTML代码 <input type="hidden" value="<{$system_config.statics_url}>/activity/images/music2.mp3" id="audio"> <audio autoplay="autoplay" controls loop hidden="tru
微信内h5 audio无法自动播放问题解决
weixin_44064067的博客
06-24 2059
微信端内的audio播放问题
移动端H5页面在微信浏览器内audio无法自动播放问题解决
qq_35606727的博客
01-11 4655
相信许多小伙伴都遇见过这话种情况，在微信浏览器内添加的audio 无法自动播放 之前写过好多那种活动页添加的背景音乐都可以自动播放，直到后来ios 增加了限制就出现了这个问题 怎么解决的只需给audio标签增加一个属性就可以解决如下图 <audio ref="bgSound" :src="musicSrc" autoplay loop preload></audio> ......
html audio 在iphone不能播放,H5 audio标签在ios微信上不能播放音乐
weixin_33481022的博客
06-18 920
原文: http://n1.tuxi.com.cn/to/weixin/satjam/mtsahn.html解决方案关键就是微信的WeixinJSBridgeReady事件。这个是微信自带提供的事件，测试发现，上面说的少部分的机子微信只要做微信ready后执行播放，就可以用代码实现自动播放功能了！具体代码请看下面：function audioAutoPlay(id){var audio = doc...
微信h5使用audio不会自动播放
Smile_ping的博客
03-10 2176
微信h5使用audio不会自动播放 文章目录微信h5使用audio不会自动播放demotemplatejs解决安卓不会自动播放其他方式 JS-SDK demo h5引入vue.js 实现背景音乐暂停/播放 这里引入JS-SDK , 此外实现微信分享… 如果不支持自动播放时，触摸滑动时自动播放 template <audio id="audio" loop preload="auto" autoplay="autoplay" src="./music/StevenBurke.mp3">
H5把页面分享到微信，再在微信进行分享改页面
05-25
您可以通过以下步骤将 H5 页面分享到微信并进行转发： 1. 在 H5 页面中添加微信分享功能，可以使用第三方的分享插件或者自己开发分享功能； 2. 点击分享按钮后，调用微信分享 API 将 H5 页面分享到微信； 3. 在微信...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值