浏览器的自动播放策略 #45

maomao1996 · 2024-04-16T11:06:42Z

浏览器的自动播放策略

最近有个项目被坑到了，正好记录一下

自动播放即网页加载完成后能否立即播放音视频

以 Chrome 为例（以下为自动播放策略）

始终允许静音自动播放
在以下情况下，允许带声音的自动播放
- 用户已经在当前域进行了交互操作（点击触摸滑动等）
- 用户将当前网站添加到移动设备上的主屏幕或在桌面上安装了 PWA
- 在桌面设备上：用户的媒体互动指数超过一定阈值（意味着用户之前播放过有声视频）
iframe 会继承父级页面的自动播放策略（需要父窗口满足自动播放条件）

媒体互动指数 (MEI Media Engagement Index) 衡量的是个人在网站上观看媒体的倾向

Chrome 的方法是统计每个来源的访问次数与重要媒体播放事件的比率

MEI 是一个数字，可以在 about://media-engagement 中进行查看；其值越高，表示用户对该站点的媒体参与度越高

媒体互动指数的计算规则不透明

媒体互动指数的计算规则在不同的浏览器版本上可能会有差异

一般会在视频区添加一个全局按钮，用户点击后触发交互操作，并自动播放

先静音播放，然后根据能否自动播放判断是否取消静音

关键点：通过 AudioContext 判断其上下文的状态

const ctx = new AudioContext();
const canAutoPlay = ctx.state === 'running';
ctx.close();