天津市开发区建设管理局网站启迪网站开发

在项目中实可能会有这样的需求：比如现进入某个页面，或者我们连接了websocket符合条件后，要进行自动播放音频或者视频。

在实现这个需求之前，我们要先了解一下浏览器的自动播放策略，浏览器为了改善用户体验，对自动播放做了严格限制！！！这个大家也可以自行去查找一下相关内容，这里就简单说一下

比如我们的video标签，设置了视频资源路径src，也设置了autoplay，但是它并没有播放，然后我们再将其mute属性设置为true，就可以自动播放了，但是没有声音！！！音频也是一样的，我们设置对应的音频资源src，也设置了autoplay，它不会自动播放的。想让其有声音，就必须是用户已经与当前域进行了交互，比如click事件

需求解决：

了解上面的内容后，想实现我们自动播放的需求，那我们可以换个角度思索来实现：

首先是在系统第一次加载完成后，我们就自动往document.body中appendChild一个video元素或audio元素，这个时候我们只设置mute为true即可（也就是默认静音），把元素先加到dom树中。

第二步就是我们要在进入我们的需求页面之前，在用户的某次操作中修改我们开始加入到dom树中的video/audio标签的mute属性为false（就是在用户无感知的情况下来解除静音），比如：登录事件、或者用户在进入我们的需求页面之前一定会触发的行为操作都可以，这个看大家各自项目的需求。

第三步就是在我们的需求那里需要播放声音的时候，直接设置src（视频/音频 路径），然后调用play方法即可，就可以实现自动播放。

我这里以音频为例，下面是我们封装的一个工具类@/utils/AutoPlayer.ts：<