谷歌浏览器自动播放（深入分析）

前言

大概是20年的时候，公司做直播项目，主要是APP端的，但是有一个H5的直播间分享功能，棒来这是前端的工作的，但是前端没空，正好我也会前端，于是就有了这篇文章，场景是这样的，用户或者主播可以在直播间内把直播间分享到微信用H5链接打开后可以直接观看直播间内容，测试了很多内核的浏览器，发现谷歌浏览器有个安全策略，禁止自动播放，当时的做法是在界面的顶层做一个模板的播放按钮，让用户点击后才能自动播放，后面研究了一下，详情如下！

分析

这里已经设置了autoplay为true了，但是还是在谷歌浏览器上还是不能自动，同时弹出警告

但是我们发现有些网站是可以自动播放的，如抖音的网页版https://www.douyin.com/
为什么我们自己写的就不可以呢！我们看看谷歌浏览器的官网

媒体参与度实际上就是谷歌浏览器会根据用户行为判断这个网站的自动播放是否可用，也就是如果用户每次打开这个网站，都要手动点击播放按钮，那么谷歌浏览器就会标识这个网站可以开启自动播放！

可以通过这个工具查看网站的用户参与度

关闭掉所有的谷歌浏览器，然后命令行输入

open -a "Google Chrome" --args --user-data-dir=./

这个命令就是想打开一个新安装的谷歌浏览器一样！

那么抖音的自动播放也被关闭了！

实际上谷歌浏览器自动播放有3种情况！

• 设置了禁音
• 较高的媒体参与度
• 使用iframes嵌入，这个是有一个大前提，就是满足前两个中的一个，顶级界面已经获取到autoplay权限，并且将autoplay的权限下放到iframes中