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

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

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

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

 

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

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

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

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

 

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

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

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

 
 
 

 
 

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

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

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

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

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

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

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

发布了11 篇原创文章 · 获赞 19 · 访问量 6万+