H5的音视频自动播放问题

1. 背景和问题由来

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

• video标签的有声自动播放在ie和firefox以及低版本的chrome浏览器都能正常。
• video标签的有声自动播放在高版本的chrome浏览器里，第一次播放正常，第二次和之后不正常。强刷新（清理浏览器缓存）后又正常。
  -video标签用js动态加载，本页面的url变化后，视频正常播放；不变化视频不能正常播放。有点像重定向的可播放的味道。

2.调研发现

首先看看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
不能翻墙的可以直接看下面截图：

google禁止自动播放条款.png

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

3.解决方法

暂时只有2种方式：

• 静音自动播放：<video src="xxx.mp4" autoplay muted></video>。
• 非静音手动触发播放。