H5的音视频自动播放问题

Posted 2023-03-15

参考技术A

（chrome浏览器）项目中用到了一个短视频页面加载动画，一开始视频无声正常。接着需求变更，让视频动画加上一个背景音乐，然后就不能播放了。然后开始了各种尝试和api文档查询。为何一个带声音的视频文件在 chrome 浏览器里无法有声自动播放呢？
经过调研和尝试，发现：

首先看看MDN对 video 标签的相关属性的描述 ，你会发现，对 autoplay 的描述里，多了一些关于 chrome 浏览器的补充描述：
In some browsers (e.g. Chrome 70.0) autoplay doesn\'t work if no muted attribute is present.
大致意思就是： 静音播放。
然后，查询些其他资料，发现 chrome 的版本更新里，也有相关描述，连接如下：
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
不能翻墙的可以直接看下面截图：

里面也介绍了 chrome 浏览器对视频播放的一些限制：静音自动播放；手动触发播放等等。
查询了一下，发现 chrome 浏览器之所以加这种限制，也是为了解决用户痛点：各种自动播放视频广告。如果是移动端上自动播放，那么流量就是用户自己承担了，而用户还不自知。只能说该浏览器在关注用户体验方面走在了其他浏览器厂商的前面。

暂时只有2种方式：