浏览器的自动播放策略
最近有个项目被坑到了，正好记录一下
自动播放即网页加载完成后能否立即播放音视频
以 Chrome 为例（以下为自动播放策略）
- 始终允许静音自动播放
- 在以下情况下，允许带声音的自动播放
- 用户已经在当前域进行了交互操作（点击触摸滑动等）
- 用户将当前网站添加到移动设备上的主屏幕或在桌面上安装了 PWA
- 在桌面设备上：用户的媒体互动指数超过一定阈值（意味着用户之前播放过有声视频）
iframe会继承父级页面的自动播放策略（需要父窗口满足自动播放条件）
媒体互动指数
媒体互动指数 (MEI Media Engagement Index) 衡量的是个人在网站上观看媒体的倾向
Chrome 的方法是统计每个来源的访问次数与重要媒体播放事件的比率
- 媒体（音频/视频）的用时必须超过 7 秒
- 音频必须存在且已取消静音
- 包含该视频的标签页处于有效状态
- 视频的尺寸（以像素为单位）必须大于 200x140
MEI 是一个数字，可以在 about://media-engagement 中进行查看；其值越高，表示用户对该站点的媒体参与度越高
媒体互动指数的计算规则不透明
媒体互动指数的计算规则在不同的浏览器版本上可能会有差异
最佳实践
交互后播放
- 先尝试自动播放
- 自动播放失败后，引导用户进行交互
- 用户交互后再进行播放
一般会在视频区添加一个全局按钮，用户点击后触发交互操作，并自动播放
交互后播放声音
先静音播放，然后根据能否自动播放判断是否取消静音
- 能自动播放，取消静音
- 不能自动播放，引导用户进行交互操作后取消静音
关键点：通过 AudioContext 判断其上下文的状态
js
const ctx = new AudioContext();
const canAutoPlay = ctx.state === 'running';
ctx.close();