# 浏览器音视频自动播放策略

浏览器为了防止网页在用户非自愿的情况下主动播放声音，对网页上的自动播放（Autoplay）功能做了限制：通常，浏览器在没有用户交互操作之前不允许有声音的媒体播放。

# 总览

浏览器	调整时间	版本号	策略概要
Chrome	2018.4	66	禁止带音频媒体自动播放
Safari	2017.9	11	禁止带音频媒体自动播放
Firefox	2079.3	66	禁止带音频媒体自动播放
IE	-	-	允许自动播放
Edge	-	-	允许自动播放，至少 44 开始已支持配置
QQ	-	-	允许自动播放，验证了 8.7
搜狗	-	-	允许自动播放，验证了 V11

# Chrome

2018 年 4 月开始（Chrome 66），策略调整为：

始终允许静音自动播放。
在以下情况下，允许自动播放声音：
- 用户已与域交互（单击、点击等）。
- 在桌面上，用户的媒体参与度指数已超过阈值，这意味着用户以前播放过有声音的视频。
- 用户已将站点添加到移动设备的主屏幕或在桌面上安装了 PWA。
顶部的 frame 可以将自动播放权限委托给它们的 iframe，以允许自动播放声音。

其中，MEI 衡量个人在网站上使用媒体的倾向。Chrome 当前的方法是访问量与每个来源的重要媒体播放事件的比率：

媒体（音频/视频）的消耗必须大于 7 秒。
音频必须存在且未静音。
“视频”选项卡处于活动状态。
视频大小（像素）必须大于 200x140。

See: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes (opens new window)

# 自动播放检测

可以通过查看 play 函数的返回值，看看它是否被拒绝，如果没有则自动播放是成功的：

var promise = document.querySelector('video').play()

if (promise !== undefined) {
  promise
    .then(_ => {
      // Autoplay started!
    })
    .catch(error => {
      // Autoplay was prevented.
      // Show a "Play" button so that user can start playback.
    })
}

# Hack

Chrome 浏览器对 video 标签和 audio 标签做了非常严格的限制，但对 iframe 的限制却没那么严格。所以可使用 iframe 来触发权限：

<video></video>
<iframe allow="autoplay" style="display:none" src="一个空的音频文件"></iframe>

<script>
  ifm.onload = function() {
    vdo.src = 'YOUR_VIDEO_URL'
    vdo.oncanplay = function() {
      vdo.play()
    }
  }
</script>