浏览器自动播放音频受限问题剖析
什么是音频受限
新的页面加载后立即自动开始播放音频（或带有音轨的视频）可能会让用户感到意外，所以在用户没有和页面交互前，当前主流浏览器，默认会阻止音频自动播放。具体表现在，如果audio/video标签携带autoplay属性，页面加载完后，并不会自动播放；如果强行调用play接口，会报“Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first”类似错误。
HTML：
JS：
在新的页面直接自动播放带有音频的视频，会受到浏览器的阻止。
通常浏览器期望用户在交互后，才可以允许音频自动播放。如通过点击当前页面的播放按钮后，再去调用play接口。
音频自动播放条件
作为一般规则，您可以假设仅当以下至少一项为真时才允许音频自动播放：
- 音频已静音或音量设置为 0
- 用户已经与同域网站进行了互动（通过点击、轻触、按键等）
- 如果网站已被列入白名单。如果浏览器确定用户频繁与媒体互动，则可能会被加入白名单，或者通过偏好设置等加入白名单。
- 顶级框架嵌入其他域名网站iframe时，需要顶级框架授予自动播放权限；顶级框架嵌入相同域名网站iframe时，无需授予权限，能够自动播放。部分浏览器支持，兼容性不好。
静音播放
HTML：
JS：
video标签中添加muted属性，则可以自动播放。自动播放后，则可以通过添加按钮取消静音。
同域授权
index.html点击播放打开同域新的页面video-frame.html，video-frame.html页面中自动播放视频，音频不受限。
然后如果直接刷新打开video-frame.html页面自动播放，则音频受限。
以常用视频网站bilibili为例，直接打开https://www.bilibili.com/bangumi/play/ep832085?theme=movie&spm_id_from=autoNext 播放页面自动播放，音频会受限，bilibili做了静音播放处理。如果通过从主页点击跳转到这个播放页面，则音频不受限。
媒体互动度指数
媒体互动度指数 (MEI) 用于衡量个人在网站上使用媒体的倾向。Chrome 采用的方法是针对每个来源使用与重要媒体播放事件的访问次数之比：
- 媒体（音频/视频）播放时长必须超过 7 秒。
- 必须有音频且已取消静音。
- 包含视频的标签页处于活动状态。
- 视频的尺寸（以像素为单位）必须大于 200x140。
当该指数足够高时，媒体可以在设备上自动播放。用户的 MEI 可在 about://media-engagement 内部页面中找到。
音频受限的具体原因和如何加入白名单因浏览器而异，但以上是值得遵循的良好准则。
可以通过设置浏览器启动参数--user-data-dir=C:\Temp\chrome-data，将浏览器数据指向新的目录，则可以重置MEI。
重置后的MEI：
iframe 委托
当前页面通过iframe嵌入非同域video-frame.html页面：
非同域video-frame.html页面自动播放视频：
通过iframe标签中添加allow="autoplay"，顶级框架将自动播放权限授予iframe。苹果Safari不支持此方式，兼容性如下：
最佳实践
静音播放
可以在新的页面先静音播放，然后通过用户点击取消静音，来达到播放声音的效果。
自动播放失败监听
自动播放后，如果报NotAllowedError的错误，则可以界面上展示播放按钮，引导用户点击播放按钮播放。
如果video标签只用来播放视频轨道，另有音频标签播放音频轨道，则视频轨道不受限，可以自动播放。只有音频轨道受限，可以做成视频自动播放，引导用户点击取消静音。
效果图1：
效果图2：
参考文档：
- 点赞
- 收藏
- 关注作者
评论（0）