文档章节

解决移动端浏览器 HTML 音频不能自动播放的三种方法

o
 osc_g8254g7s
发布于 2019/08/19 21:16
字数 427
阅读 18
收藏 0

精选30+云产品,助力企业轻松上云!>>>

https://blog.csdn.net/PY0312/article/details/90349386

 

由于Android,IOS移动端的浏览器以及微信自带的浏览器为了用户更好的体验,规定不自动播放音频视频,默认屏蔽了autoplay,如果要想达到自动播放效果,需要单独处理,方法有以下几种:

第一种:添加控制属性(controls)
原理:直接使用行内式添加controls属性,显示控制按钮,让用户手动触发音频播放
<audio autoplay="autopaly" loop="loop" controls="controls" id="audios">
<source src="music/bg.mp3" type="audio/mp3" />
</audio>
第二种:创建页面监听(WeixinJSBridgeReady)
原理:对页面加载进行监听,等待微信客户端页面加载完毕后,自动触发音频播放 
<audio autoplay="autopaly" loop="loop" id="audios">
<source src="music/bg.mp3" type="audio/mp3" />
</audio>

<script>
// 将以下代码添加到js入口函数内即可
// 这里使用了微信自带的WeixinJSBridgeReady事件
document.addEventListener('WeixinJSBridgeReady', function() {
document.getElementById('audios').play()
})

</script>
第三种:创建触摸监听(touchstart)
原理:当浏览器打开页面时,通过触摸屏幕事件,来触发音频播放 
<audio autoplay="autopaly" loop="loop" id="audios">
<source src="music/bg.mp3" type="audio/mp3" />
</audio>

<script>
// 将以下代码添加到js入口函数内即可
document.addEventListener('touchstart', function() {
document.getElementById('audios').play()
})

</script>
第四种:综合以上自定义Func实现交互触发play() 
不推荐此方法,上面三种方法足以解决日常问题
<audio src="bg.mp3" id="audios" autoplay preload loop="loop"></audio>
<script>
function audioAutoPlay(id){
var audio = document.getElementById(id),
play = function(){
audio.play();
document.removeEventListener("touchstart",play, false);
};
audio.play();
document.addEventListener("WeixinJSBridgeReady", function () {
play();
}, false);
document.addEventListener('YixinJSBridgeReady', function() {
play();
}, false);
document.addEventListener("touchstart",play, false);
}
audioAutoPlay('audios');

</script>
 

https://www.cnblogs.com/viphchok/p/5315031.html

 

图片加载完成:

https://blog.csdn.net/hbiao68/article/details/52683322

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
H5视频兼容安卓、IOS踩坑相关

1.视频暂停和播放 将JQ对象转换为原生JS对象 有遮罩层的视频播放和暂停 2.音乐开关 3.视频切换+音量播放 pug js 4.微信不能够自动播放 5.页面强制横屏问题 6.H5--移动端视频video的android兼...

谭瞎
2018/07/28
0
0
[JavaScript] audio在浏览器中自动播放

audio 在浏览器中自动播放 autoplay 属性 autoplay 属性规定一旦音频就绪马上开始播放。如果设置了该属性,音频将自动播放。 使用 autoplay 属性进行播放 oncanplaythrough 事件 oncanplayt...

osc_o8pkds53
2019/02/14
27
0
chrome播放video无法自动播放

Chrome下调用play后抱错:DOMException: play() failed because the user didn't interact with the document first. 声音无法自动播放这个在IOS/Android上面一直是个惯例,桌面版的Safari在......

东东笔记
06/09
31
0
Chrome 声音自动播放抱错问题【play() failed】

Chrome下调用play后抱错:DOMException: play() failed because the user didn't interact with the document first. 声音无法自动播放这个在IOS/Android上面一直是个惯例,桌面版的Safari在......

osc_20n6g71c
2018/12/06
27
0
Html5-audio标签简介及手机端不自动播放问题

1、audio:html5音频标签 不支持audio元素的浏览器会显示标签内文字 src:音频地址 autoplay:音频加载完毕后自动播放。 controls:显示播放控制条。 loop:播放完毕后会重复播放。 preload:1)au...

Jack088
2018/04/13
66
0

没有更多内容

加载失败,请刷新页面

加载更多

等到所有jQuery Ajax请求都完成了吗? - Wait until all jQuery Ajax requests are done?

问题: How do I make a function wait until all jQuery Ajax requests are done inside another function? 我如何让一个函数等到所有jQuery Ajax请求都在另一个函数中完成之后? In short...

富含淀粉
11分钟前
0
0
OSChina 周日乱弹 —— 那么长的绳子,你这是放风筝呢

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @ 巴拉迪维:黑豹乐队的单曲《无地自容》 耳畔突然响起旋律,是那首老歌。中国摇滚有了《一无所有》不再一无所有;中国摇滚有了《无地自容》不...

小小编辑
今天
65
1
《吐血整理》-顶级程序员书单集

你知道的越多,你不知道的越多 给岁月以文明,而不是给文明以岁月 前言 王潇:格局决定了一个人的梦想,梦想反过来决定行为。 那格局是什么呢? 格局是你能够看见的深度、广度和密度。 王潇认...

敖丙
2019/12/11
11
0
我可以在Android版式中加下划线吗? - Can I underline text in an Android layout?

问题: 如何在Android布局xml文件中定义带下划线的文本? 解决方案: 参考一: https://stackoom.com/question/A31z/我可以在Android版式中加下划线吗 参考二: https://oldbug.net/q/A31z/...

法国红酒甜
今天
26
0
干掉ELK | 使用Prometheus+Grafana搭建监控平台

什么是Prometheus? Prometheus是由SoundCloud开发的开源监控报警系统和时序列数据库(TSDB)。Prometheus使用Go语言开发,是Google BorgMon监控系统的开源版本。 Prometheus的特点 · 多维度...

木九天
今天
34
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部