在用H5做短视频的需求中，碰到视频不能自动播放的问题，踩过很多坑，总结了一些问题和方案。
不能自动播放的原因：
其实，严格的来说，是浏览器不允许在用户对网页进行交互之前播放音频，而视频其实是不受限制的。但因为视频文件同样包含了音频，所以也一同被禁止了。浏览器这样做的目的是为了防止开发者滥用自动播放功能而对用户产生骚扰。
参考1
参考2
据新政策，媒体内容将在满足以下至少一个的条件下自动播放：
- 音频被静音或其音量设置为0
- 用户和网页已有交互行为（包括点击、触摸、按下某个键等等）。
注：这里的可以自动播放，只是针对交互过的视频。
例：仿短视频交互的，有video标签A，video标签B上下两个视频。初始用户交互，播放video标签A的视频。滑动到B，企图播放B，是无法播放的。滑回A，可以播放A。
- 用户和网页已有交互行为（包括点击、触摸、按下某个键等等）。
- 网站已被列入白名单；如果浏览器确定用户经常与媒体互动，这可能会自动发生，也可能通过首选项或其他用户界面功能手动发生
- 自动播放策略应用到
<iframe>或者其文档上
- 自动播放策略应用到
第3、4点没懂具体怎么实现，知道的小伙伴请指教。
方案：
方案一：
video标签设置muted属性使它静音，这样视频就能自动播放了。
<video controls="controls" autoplay muted style="width: 100%">
<source src="//player.alicdn.com/video/editor.mp4" />
</video>
这个方案是最简单的，所有设备和浏览器都适用。像优酷，爱奇艺在浏览器上自动播放就是这么做的。
缺陷：
- 播放中但会没有声音。你是不是想，设置了静音自动播放后，我再用js偷偷的打开声音。不行哦，打开声音，视频就暂停了。
- 体验问题，去说服需求吧。
方案二：
使用单页应用 + 用户交互 + 一个video复用来实现。
参考：https://vring.kuyin123.com/
示例：https://gitee.com/songyuanlu/daily/tree/develop/src/video-autoplay
缺陷：
1、它需要有一个前置页或者让用户交互的入口。没有的话第一个视频需要用户点击。
2、只能有一个video标签。在切换播放过的视频时，进度更新会有点卡。（具体细节的坑需要继续踩）
方案三：
让浏览器放开限制。
不知道QQ浏览器有没有特别给腾讯视频白名单，未验证（反正验证了我们也进不去白名单不是），感兴趣的可以去验证。
如果你的H5是跑在自己的APP中，可以让Native支持在WebView给与H5自动播放权限，具体策略与Native商量吧，总之Native是有办法的。如果他说没有，他可能在忽悠你。
这个对H5来说应该是属于最完美的方案。
缺陷：
- 是否可行，完全依赖于Native。
方案四：
在微信中可以 wx.ready 后调用 video.play() 来自动播放。我实践的结果是，有时候可以有时候不行。
const $video = document.getElementById('XXX');
wx.ready(() => {
$video.play();
});
以上努力后，其它是否可以自动播放就随缘吧~~~~我没招了。
