关于h5中audio的autoplay属性失效问题

最近在做h5活动页时,需要背景音自动播放功能,原本简单的一个autoplay属性可以解决,但因为浏览器的禁止行为,需要各种解决方案才能处理大部分机型的自动播放。

以下引自google开发文档(谷歌译文):查看完整原文

2017年9月,我们宣布即将对Chrome中的自动播放行为政策如何处理音频进行更改。政策更改于2018年5月与Chrome 66 Stable一起发布。
……
对于希望能够自动播放其内容的网站,此更改将阻止默认播放。
……
我们会检测用户在大多数访问网站时是否经常让音频播放超过7秒,并启用该网站的自动播放功能。

以下引自apple开发文档(谷歌译文):查看完整原文

在iOS上的Safari(适用于所有设备,包括iPad)中,用户可能位于蜂窝网络上并按数据单元收费,因此禁用预加载和自动播放。在用户启动数据之前不会加载任何数据。这意味着在用户启动回放之前,JavaScript play()和load()方法也处于非活动状态,除非用户操作触发play()或load()方法。换句话说,用户启动的播放按钮有效,但onLoad="play()"事件却没有。

现象1:
直接使用autoplay属性,部分Android自带浏览器、微信可以自动播放,但企业微信不能播放,iOS中safari浏览器、微信、企微均不能播放。

现象2:
js中调用,如window.onload = function() { audio.play(); }
报错:Uncaught (in promise) NotAllowedError: play() can only be initiated by a user gesture.

经过各处搜集的方法,并尝试后,发现以下方法可以解决绝大部分机型(除部分小米自带浏览器、安卓部分机型app内嵌的webview)的自动播放问题。

方法1:使用iframe的自动播放(目前暂未被禁止,可以解决部分机型)
假如你的页面只需要播放背景音,不需要循环播放:

现在问题来了,iframe不能循环播放,怎么办?
可以利用iframe播放一个无声音频文件(无声音频下载地址),来触发浏览器的自动播放功能:

方法2:由touchstart或touchend触发(解决iOS中的播放问题)

关于touchend触发audio.play()曾遇到失效的情况,在touchstart中加上audio.load()可以解决。

网上还有提供调用微信WeixinJSBridgeReady解决微信中自动播放失败的问题,因为以上两个方法可以解决,所以没有实践。

但是以上方法依旧不能解决所有机型的安装的所有浏览器。

经测试发现,有部分安卓手机的webview(app内嵌)不能通过以上两个方法解决,首次打开网页audio.paused为true,不自动播放,但是再次刷新H5就可以自动播放。。。

小米6自带浏览器也不能通过以上两个方法解决,打开网页audio.paused为false,但其实并未真正播放,这个会影响我们对真实播放状态的判断。

综上,要兼容所有机型,最好还是在页面上设计一个可以点击的区域(按钮等),因为目前click事件是可以正常调用audio.play()方法的。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复