谷歌浏览器怎么改html5,关于谷歌浏览器不支持html5中audio的autoplay解决方法(js代码解决)...

当我们直接写autoplay时,在chrome中浏览器并没有自动播放音频;

9ad0176fa634958be2e885248dbefad4.png

如果直接通过js来调用audio的play()方法也不行;

1056aaffede78f377f9c2cb2b8497e1d.png

控制台还会报错

4c33567d72ce5eb34b10a4c172b93e44.png

大概意思:play()调用失败,因为用户没有与文档进行交互

经过网上的查找:原博客:https://blog.csdn.net/baiding1123/article/details/104945759

谷歌为优化用户体验关闭了audio中的autoplay方法(屏蔽广告和节省用户流量);

那么如何实现autoplay呢,既然报错说用户没有与文档交互,我们就设置一个事件使用户与文档交互就行了;如下给整个页面添加一个点击事件

c145bab085b82ffa38b0fec4ef8c5df8.png

此时,当用户点击页面后就会触发play();chrome也不会报错,并且开始播放音乐

efd20adf3ea1c920c1366bc3640a78ac.png

亲测把onclick事件换成onmousemove后(想优化用户体验),但还是需要点击页面才能触发play(),相当于把audio的点击播放绑定在整个window上面;

借鉴此博客的更改:https://blog.csdn.net/baiding1123/article/details/104945759

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值