video, audio无法自动播放--Chrome视频音频自动播放策略

背景

前段时间出于兴趣写了一个弹幕播放器, 在写的过程中想做一个自动播放的功能, 但是遇到了Uncaught (in promise) DOMException: play() failed because the user didn’t interact with the document first.这个报错, 就很痛苦. 于是我开始去查为什么这样, 并且这个问题伴随了我大概有1年的时间吧, 今天突然想起来这个问题, 于是有了本博客.
官方对应介绍自动播放策略的博客

探索过程

最开始注意到这个问题后就去各大视频网站进行测试, 我记得当时测试了腾讯视频, 爱奇艺, 优酷, bilibili等等, 发现他们都有自动播放功能, 并且可以带声音自动播放. 然后我就蒙了, 开始找自己的原因.

因为当时开发的时候是直接使用本地路径的, 并没有去使用devServer去运行一个本地的开发环境, 所以第一时间想到的就是这个, 但配好之后时好时坏, 有时候可以自动播放, 有时候无法自动播放

然后直接去请求视频文件, 也就是这个地址localhost:8888/static/1.mp4, 惊了, 他竟然能自动播放而且带声音, 因为这个页面是是访问文件, 所以Chrome生成的代码很简单, 就只有一个video元素并且配置了autoplay就可以自动播放了.

去网上查, 当时还没能上某个404搜索网站, 所以在国内的搜索引擎查的, 大部分都是解决方案, 说是autoplay为true, 并且muted设置为true, 确实可以, 但它是静音自动播放

当时的探索到这里就结束了.

自动策略

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

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

根据自动策略总结出来如下几种方案

1. 设置muted为true, 静音自动播放
2. 直接使用iframe去拉取文件(公网环境不确定好不好使, 本地没啥问题, 看官方博客说需要Media Engagement Index达到阈值的网站域名下的iframe才行)
3. 加入一个牛B的公司, 这个公司域名的Media Engagement Index到达了Chrome自动带声音播放的标准实测是chrome通过用户习惯计算的
4. 利用弹窗等等引导用户去点击一下页面

其他优秀文章

Chrome 新的自动播放策略

video autoplay 自动播放之研究

---

吐槽一下