什么，产品让我实现自动播放？

前言

最近，在逛一些技术群时，看到有人在吐槽，这个video媒体标签设置autoplay属性怎么不生效。不生效就算了，为什么我在dom渲染完成时去获取video元素（假设获取到的元素为el），然后执行el.paly()也不生效，why？？？？

那为什么我通过控制台去执行这两行代码的时候，它又生效了！！！！？？？

带着满脸疑惑，我们来了解一下浏览器的自动播放策略。

1、浏览器的自动播放策略

以谷歌浏览器为例：

在某些特定的情况下，浏览器是允许自动播放的：

1. 
   
2. 
   

   静音状态下始终允许自动播放

   
   
   
3. 
   

   有声音自动播放时：

   
   
   • 
     
   • 用户进行了页面点击等与界面发生交互行为后。
     
   • 达到媒体参与指数, 也就是用户之前在本站播放过有声音的视频。
     
   • 用户将页面添加到移动设备的主屏幕上或者在PC上安装了PWA。
     
   
   
   
4. 
   

   主站可以将自动播放权限委托给它们的 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、非静音自动播放

我们在上面有了解到非静音自动播放有四种情况：

1. 
   
2. 用户进行了页面点击等与界面发生交互行为后。
   
3. 达到媒体参与指数MEI.
   
4. 用户将页面添加到移动设备的主屏幕上或者在PC上安装了PWA。
   
5. 主站可以将自动播放权限委托给它们的 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 补充

上面还有一点是没有提到的，就是同源下点击页面跳转后可实现自动播放。

比如：我在http://www.bilibili.com页面点击一个视频跳转到了一个新页面，就可以实现自动播放（注意：不能打开新窗口，否则非