谷歌html不能自动播放,关于谷歌浏览器不支持html5中audio的autoplay解决方法(js代码解决)...

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

ccc2c7d4282ff515fe205904ac83249d.png

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

f87e0d6b953500f23ce2240d2ab5aa8d.png

控制台还会报错

398e223d095cb6e40c323d1c449fac4c.png

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

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

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

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

1f66dff3c9a4cbec86ce3fefecf9bde9.png

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

172ec924a8e572b0d4a7b905d36d9b6c.png

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

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

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值