关于移动端自动播放的方案，可以参考我在掘金写的这篇文章 传送门

--------以下是之前的内容-------

自动播放的问题在工作中时常遇到，针对自动播放做了一下简单的总结。

自动播放就是未经用户的允许，播放音频或视频的行为。

在HTML里，通过给video标签， audio标签设置autoplay的属性，或者通过JS的代码去执行播放的逻辑自动播放经常会碰到这些问题：

关于这些问题，后面会慢慢补充解释，我们还是从用户体验的方面去思考，为什么浏览器会限制自动播放

如果一个网页在没有任何警告的情况下自动播放带声音的媒体资源，如果发出一些噪音或对人造成困扰，讨厌的声音，对用户的体验是非常不好的。所以，浏览器会限制自动播放，在特定的情况下才能带声音自动播放。

一些主流的浏览器对自动播放会有以下的规则,如 chrome， firefox ：

根据浏览器的自动播放策略，上面的一些问题就可以得到解释，如自动播放时没有声音是因为要静音才能自动播放，也可以说明自动播放无效，是不是没有设置静音。

在一些视频网站上能带声音自动播放，就是视频网站了多次观看视频，媒体参与度分值足够高了。

chrome自动播放策略简略截图：(详细请参考文档末尾资料的chrome自动播放策略)

测试demo代码： https://codepen.io/zackxiong/pen/oNvqZVw

video标签设置autoplay, muted属性。测试mp4在主流浏览器自动播放的情况。(有空更新)

机型

安卓微信浏览器(7.0.13)

小米浏览器(11.11.22)

安卓QQ浏览器(10.2.1.6632)

安卓UC浏览器(12.9.7.1077)

安卓猎豹浏览器(5.20.4)

安卓Chrome浏览器(80.0.3987.119)

搜狗浏览器(5.27.8.86541)

基本上主流的浏览器都没有一个直接的方法，属性，或者回调去检测页面是否支持自动播放。需要从另外的方向去检测页面是否支持自动播放。

可以从play() 方法去入手， play() 会返回一个 Promise对象，如果播放失败，Promise对象的状态就会变为rejected. 这时候可以通过catch去捕捉这个错误，如果捕捉的错误是NotAllowedError，那么就可以说明页面不支持自动播放。

当然，也要注意一下浏览器的兼容性，要检测play() 返回是不是undefined.

codepen demo： https://codepen.io/zackxiong/full/wvKJbZe

用户通过点击跳转到新页面，新页面视频设置了自动播放，此时也可以带声音自动播放，但是刷新页面后就无法自动播放了

测试demo : (暂时不方便放测试demo地址，小伙伴们可以自己写两个简单的页面， 页面A通过a标签跳转到页面B, 页面B有自动播放的逻辑)

这种情况应该是由用户点击跳转的页面，新页面也符合由用户进行交互的规则。但是刷新页面就没有用户的交互了，所以也就无法自动播放。