浏览器 Autoplay 限制

问题来源

浏览器在播放音频或包含声音的视频文件时，若用户没有主动点击播放按钮或与页面有交互的行为，而仅仅是通过在 audio 或 video 标签上添加 autoplay 属性，或通过 js 直接调用 play 方法时 ，往往被报错类似于 NotAllowedError: play() failed because the user didn't interact with the document first. 这样的错误，这就触发了浏览器的自动播放限制。

不同浏览器上的不同表现

1. 报错信息

Chrome 浏览器上，NotAllowedError: play() failed because the user didn't interact with the document first.

Safari 浏览器上，NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

Firefox 浏览器上，NotAllowedError: The play method is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

2. 浏览器自动播放策略执行时间及版本

Chrome - 2018年4月, Chrome 66

Safari - 2018年9月, Safari 11.0

Firefox - 2017年11月, Firefox 59

3. 如何绕开自动播放限制

通用的方法，是静音播放，适用于有音频的视频，给 video 标签添加 muted 属性，并在页面中给用户提示在静音播放，由用户点击后触发音频的播放。（但这里在 Firefox 中可能存在问题，譬如 Firefox 可对所有站点都设置为不允许音频和视频的自动播放）

Chrome

• 在播放前，提示用户与页面先进行交互，譬如点击页面某个地方
• 大量访问某一网站并播放其内声音，这里涉及到 Chrome 的 MEI，白名单

Safari

• 通过浏览器设置，手动添加白名单
• 需要播放时，提示用户与页面进行交互，譬如点击按钮来触发播放

Firefox

• 通过浏览器设置
• 与页面进行交互，（未完整实验，信息缺失）

注：Safari 有些坑， 如果页面中包含多个音频源，假设有 A，B 两个音频源都需要播放。

1. 必须在与页面有交互时，立即调用 play 方法，否则可能无法正常播放。
2. A 正常播放并停止后，若长时间不播放 B，在播放 B 的时候仍然可能会受到自动播放的限制。

其他

1. 关于 Chrome 的 MEI，全称 Media Engagement Index，站点名单及得分排行，可以通过浏览器里访问 chrome://media-engagement/ 进行查看。

2. 关于 play 后立即调用 pause 或换源导致 interrupted 或 aborted 的问题，不同浏览器报错信息也不同

   1. Chrome 参见 DOMException: The play() request was interrupted
      • The play() request was interrupted by a call to pause().
      • The play() request was interrupted by a new load request.
   2. Safari
      • AbortError: The operation was aborted.
   3. Firefox
      • AbortError: The fetching process for the media resource was aborted by the user agent at the user’s request.

参考

1. To Play, or Not to Play #2 – Firefox blocks audible autoplay by default!
2. Chrome 66禁止声音自动播放之后
3. Autoplay Policy Changes