Chrome自动播放策略
Chrome浏览器有个策略
就是他禁止网页自动播放音视频内容
所以呢如果我们开发者
尝试在一个网页加载完以后
自动播放一个音视频
可能类库就会报一个警告
那有的类库可能连警告都没有哈
那我们来看这个小伙伴的例子哈
现在呢他已经设置成
autoplay = "true" 了
但是呢在谷歌浏览器下边
他是不起作用的大家看
但是呢我们来看一个其他的网站哈
比如说这个抖音
那个很多人问大家看
抖音是可以自动播放的
我们再刷新一下
都是可以的
所以就很奇怪
为什么咱们自己写的就不行呢
后来呀我就在他们官方的网站上
找到了这样一个概念
叫做媒体参与度
什么意思呢
大概意思就是说
假设一个用户访问某一个网站哈
几乎每次打开这个网站
他都会手动点一下播放
那这个Chrome浏览器就会判定
这个用户
在这个网站下的媒体参与度很高
以后呢浏览器就会允许这个网站
在这个用户的浏览器上
进行自动播放了
我们可以验证一下哈
他这里边有一个地址
通过这个地址呢
可以查看每一台电脑上
他这个网站的用户参与度
大家看我这里边
只有这两个网站
是用户参与度比较高的
比如说抖音这个网站
他是高参与度的（他是允许自动播放的）
那其他的网站都是 no 的
那我们可以这样来试一下哈
我把这个浏览器通通关掉
然后呢我们通过这个命令
可以在打开浏览器的时候呢
指定一个配置文件的目录
这样的话呢
因为这个目录是新创建的
里面都是空的
相当于这是一个
新安装的浏览器一样
我们来试一下哈
好现在就相当于一个新的浏览器哈
然后呢我们访问抖音
好大家看抖音现在也不会自动播放了
我们看一下控制台
大家看
他也会报一个类似的这样的错误
因为不同的类库他自己封装错误
消息不一样哈
这里边叫 NotAllowedError
但意思是一样的意思
那这种问题怎么解决呢
我们再来回到刚才那个网站哈
我们往下找
找到这里
他一共有三种情况是允许自动播放的
第一种是如果是静音的媒体标签哈
他就一直都允许
那第二种情况呢就要看一下了
这个用户是不是在页面上点了什么
要么呢
这个网站是不对于这个用户来说
媒体参与度较高
再或者这个用户是不是把这个网站
添加到首页了
或者什么的
第三种情况就是这个页面存在iframe
但是呢大前提是
顶级页面已经拥有了autoplay的权限
比如说顶级页面
已经满足了上面的其中一个条件
然后顶级页面把这个
自动播放的权限下放给他的 iframe 子页面
通过这个autoplay的属性
这样的话如果是同域的哈
他子页面也可以自动播放
最后更新于