背景
前段时间出于兴趣写了一个弹幕播放器, 在写的过程中想做一个自动播放的功能, 但是遇到了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,以允许自动播放声音。
根据自动策略总结出来如下几种方案
- 设置muted为true, 静音自动播放
- 直接使用iframe去拉取文件(公网环境不确定好不好使, 本地没啥问题, 看官方博客说需要Media Engagement Index达到阈值的网站域名下的iframe才行)
加入一个牛B的公司, 这个公司域名的Media Engagement Index到达了Chrome自动带声音播放的标准实测是chrome通过用户习惯计算的- 利用弹窗等等引导用户去点击一下页面
其他优秀文章
吐槽一下