200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > html手机不能自动播放音乐 解决移动端浏览器 HTML 音频不能自动播放的三种方法...

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

时间:2018-07-10 16:52:41

相关推荐

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

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

第一种:添加控制属性(controls)

原理:直接使用行内式添加controls属性,显示控制按钮,让用户手动触发音频播放

第二种:创建页面监听(WeixinJSBridgeReady)

原理:对页面加载进行监听,等待微信客户端页面加载完毕后,自动触发音频播放

// 将以下代码添加到js入口函数内即可

// 这里使用了微信自带的WeixinJSBridgeReady事件

document.addEventListener('WeixinJSBridgeReady', function() {

document.getElementById('audios').play()

})

第三种:创建触摸监听(touchstart)

原理:当浏览器打开页面时,通过触摸屏幕事件,来触发音频播放

// 将以下代码添加到js入口函数内即可

document.addEventListener('touchstart', function() {

document.getElementById('audios').play()

})

第四种:综合以上自定义Func实现交互触发play()

不推荐此方法,上面三种方法足以解决日常问题

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');

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。