【html5的audio标签无法播放】html5的audio标签无法再移动设备上自动播放

更新时间:2020-10-22    来源:微信    手机版     字体:

【www.bbyears.com--微信】

做了个微信应用,想加一个背景音乐,使用html5的audio标签在电脑浏览器上上可以自动播放,而在移动设备上无论是设置autoplay属性还是使用js调用play()方法,都不能自动播放,请问有何解决方案。

原因分析

HTML5中的autoplay属性是设置为自动播放。如果设置了该属性,视频或音频将自动播放。
但是需要注意的是部分浏览器比如Safari屏蔽了autoplay属性。因为autoplay在移动网络环境下可能会造成用户流量费剧增。

iOS 3.2之前可以通过js模拟一个点击事件来触发,但在之后的版本中就不再有效了,Safari完全屏蔽了autoplay,除非用户自己点击播放,目前没有其他任何办法可以实现autoplay

在Android的机子是可以实现自动播放的,在iOS的机子里没有办法,可以通过为页面绑定touchstart事件来实现播放。

曲线救国,比如:

 代码如下

Create an iframe and set its source to the media file"s URL and append the iframe to the body.
var ifr=document.createElement("iframe");
ifr.setAttribute("src", "http://cms.hovertree.com/hovertreesound/hovertreesnow.mp3");
ifr.setAttribute("width", "1px");
ifr.setAttribute("height", "1px");
ifr.setAttribute("scrolling", "no");
ifr.style.border="0px";
document.body.appendChild(ifr);

本文来源:http://www.bbyears.com/shoujikaifa/106207.html

热门标签

更多>>

本类排行