浏览器的自动播放策略

以 chrome 浏览器的自动播放策略为例

动机

改善用户体验

策略详情

Chrome 的自动播放政策很简单：

1. 始终允许静音自动播放
2. 在以下情况下，带声音的自动播放会被允许
   1. 用户已经在当前域进行了交互（click、tap）
   2. 在桌面设备上，用户的媒体参与度指数阈值已超过，这意味着用户之前播放过有声视频
   3. 用户已将网站添加到移动设备上的主屏幕或在桌面上安装了 PWA
3. 顶部帧可以将自动播放权限委派给其 iframe，以允许自动播放声音

媒体参与度（MEI，Media Engagement Index）

媒体参与度（MEI）衡量个人在网站上使用多媒体的倾向

它是一个数字，可通过 chrome://media-engagement/ 查看

数值越高，用户对该站点的媒体参与度越高，就越有机会自动播放

对于开发而言：

1. 媒体参与度的计算规则无法通过技术手段更改
2. 媒体参与度的计算规则不同版本的浏览器可能会有变动

开发者的最佳实现

方案 1：互动后播放

先尝试自动播放，若发生异常，则引导用户进行互动操作，然后再进行播放

const vdo = document.querySelector('video')
const modal = document.querySelector('.modal')
const btn = document.querySelector('.btn')

async function play() {
  try {
    await vdo.play()
    modal.style.display = 'none'
    btn.removeEventListener('click', play)
  } catch (err) {
    modal.style.display = 'flex'
    btn.addEventListener('click', play)
  }
}

play()

方案 2：互动后出声

先静音播放，然后根据是否能自动播放决定是否取消静音，如果：

1. 能自动播放，取消静音
2. 不能自动播放，引导用户进行互动操作后取消静音

const vdo = document.querySelector('video')
const modal = document.querySelector('.modal')
const btn = document.querySelector('.btn')

function play() {
  vdo.muted = true // 静音
  vdo.play()
  const ctx = new AudioContext()
  const canAutoPlay = ctx.state === 'running'
  ctx.close()
  if (canAutoPlay) {
    vdo.muted = false
    modal.style.display = 'none'
    btn.removeEventListener('click', play)
  } else {
    modal.style.display = 'flex'
    btn.addEventListener('click', play)
  }
}

play()