HTML5 video（PC和移动端）自动播放学习指北

一.背景

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

二.自动播放

 

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

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

//

videoElement.play()

audioElement.play()

• 为什么不能自动播放
• 为什么自动播放时没有声音
• 为什么在我的网站上自动播放会静音，在别的视频网站上就不会
• ....

 

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

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

 

 

三.自动播放的策略

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

• 视频设置为静音或音量设置为0
• 用户与网站进行了交互，例如由用户触发的事件，如(click, tap, keypress)之类的事件里调用视频的播放
• 网站被列入白名单，用户在网站上使用媒体比较频繁，媒体参与度分值足够高，或者在浏览器的设置里设置了允许自动播放(如IE, safari)
• 在iframe的标签上设置了允许自动播放（应该需要父页面也能自动播放）

 

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

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

 

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)
红米k20 Prp	不能	允许	允许	不能	不能	允许	允许
小米5s

五.检测页面是否支持自动播放

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

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

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

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

 

六.特殊的情况

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

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

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

七.自动播放的参考资料

• chrome浏览器自动播放策略(需要科学上网)
• Feature-Policy: autoplay
• MDN 自动播放指南