前言
最近，在逛一些技术群时，看到有人在吐槽，这个video媒体标签设置autoplay属性怎么不生效。不生效就算了，为什么我在dom渲染完成时去获取video元素（假设获取到的元素为el），然后执行el.paly()也不生效，why？？？？
那为什么我通过控制台去执行这两行代码的时候，它又生效了！！！！？？？
带着满脸疑惑，我们来了解一下浏览器的自动播放策略。
1、浏览器的自动播放策略
以谷歌浏览器为例：
在某些特定的情况下，浏览器是允许自动播放的：
-
静音状态下始终允许自动播放
-
有声音自动播放时：
- 用户进行了页面点击等与界面发生交互行为后。
- 达到媒体参与指数, 也就是用户之前在本站播放过有声音的视频。
- 用户将页面添加到移动设备的主屏幕上或者在PC上安装了
PWA。
-
主站可以将自动播放权限委托给它们的 iframe，以允许自动播放声音。
2、静音播放。
在静音状态下，浏览器是允许自动播放的，代码如下：
<video controls class="videoItem" width="100%" autoplay muted loop="loop" src="./tets.mp4"></video>
属性说明：
muted: 是否静音播放，默认为false。
autoplay：是否自动播放，默认为false。
control：控制器是否显示，默认为false（可不写）。
loop：是否循环播放，默认为false（可不写）。
唉，好像可以自动播放了，于是我拿去应付产品，产品给我泼了一盆冷水，说能让它播放起来有声音吗？
。
于是，又开始了我们的与非静音状态自动播放功能的探索。
3、非静音自动播放
我们在上面有了解到非静音自动播放有四种情况：
- 用户进行了页面点击等与界面发生交互行为后。
- 达到媒体参与指数
MEI. - 用户将页面添加到移动设备的主屏幕上或者在PC上安装了
PWA。 - 主站可以将自动播放权限委托给它们的 iframe。
3.1 用户进行了页面交互行为
这个就可以理解成用户触碰了页面之后，我们就可以进行有声音的自动播放了。看代码
HTML部分：
<video controls class="videoItem" width="100%" loop="loop" src="./tets.mp4"></video>
JS部分：
const vdo = document.querySelector('video')
// 播放函数
async function playAudio() {
const res = await vdo.play()
}
// 监听用户点击
document.addEventListener('click',playAudio)
// 监听媒体播放
vdo.addEventListener('play', function () { //播放开始执行的函数
console.log("开始播放");
// 移除点击监听事件
document.removeEventListener("click",playAudio)
})
这里我们就有很大的发挥空间了，比如说视频不完全在可见区，或者用户看视频前给他弹个框？
3.2 达到媒体参与指数MEI
MEI是浏览器根据我们对一些网站的浏览行为打分，越高，就表示我们喜欢观看这个网站的视频，可以通过about://media-engagement来查询，不可更改。
注意：该策略只对PC端浏览器有效。
3.3 用户将页面添加到移动设备的主屏幕上或者在PC上安装了PWA。
用户将页面添加到移动设备的主屏幕上或者在PC上安装了PWA，这个我们基本可以不用去考虑了，在国内是比较少见的，感兴趣的可以去百度。
3.4 主站可以将自动播放权限委托给它们的 iframe。
这个就是通过iframe来控制媒体的自动播放。代码如下：
<!-- 允许自动播放 -->
<iframe src="跨源地址" allow="autoplay">
<!-- 允许自动播放和设置全屏 -->
<iframe src="跨源地址" allow="autoplay; fullscreen">
需要注意的是，我们可能需要做一些本地代理，不然可能会出现跨域问题。
4 补充
上面还有一点是没有提到的，就是同源下点击页面跳转后可实现自动播放。
比如：我在www.bilibili.com页面点击一个视频跳转到了一个新页面，就可以实现自动播放（注意：不能打开新窗口，否则非静音自动播放将失效）
