Vue中video标签如何实现不静音自动播放

由于浏览器厂商为了提高用户体验禁止video标签可以有声的自动播放，也就是说如果想让video标签能够自动播放必须给video标签添加muted属性。

但是在开发的过程中我们需要用视频自动有声播放，比如一些学习网站，需要老师或同学进入页面就可以播放学习视频，那么如何去实现呢？

我是在Vue框架下实现的，其他框架仅供参考。

首先我们要让video标签能够自动播放，也就是让video标签静音条件下自动播放。

<video 
  ref="videoPlayer"
  id="videoPlayer"
  class="video" 
  width="100%" 
  autoplay 
  muted
  controls 
  :src="addPre()">
</video>

然后是我们通过JavaScript的方式让video标签先取消静音然后再自动播放。

this.$nextTick(() => {
  this.$refs.videoPlayer.muted = false;
  this.$refs.videoPlayer.play();
})

此方法我只在Vue框架下尝试可以，在其他框架没有尝试。

此方法还需要注意的一点是如果此方法所在页面刷新或是从其他网站直接跳转到此页面则此方法就不管用了。

如果是刷新或者是外部链接跳转到此则会报如下错误：

Uncaught (in promise) DOMException: play() failed because the user didn’t interact with the document first.

这个错误的意思是：play() 失败，因为用户没有先与文档交互。

使用play方法之前用户必须得和文档（也就是页面进行）交互，刷新和从外部链接跳转都没有与页面进行交互。但是在Vue项目中从一个路由页面跳转到视频播放页面是可以的，这是为什么呢？

因为Vue是单页面富应用，虽然我们看上去页面是从一个页面跳转到另一个页面但是这些路由页面始终在同一个文档（页面）中，当我们点击实现路由跳转时就已经实现了与文档交互，所以不会报上面的错。

补充：video标签核心属性：

• src 要播放的视频的 URL。
• autoplay 如果出现该属性，则视频在就绪后马上播放。
• controls 如果出现该属性，则向用户显示控件，比如播放按钮，进度条等。
• height 设置视频播放器的高度。
• width 设置视频播放器的宽度。
• autoplay 如果出现该属性，则视频在就绪后马上播放。 controls 如果出现该属性，则向用户显示控件，比如播放按钮,进度条等。
• loop 如果出现该属性，视频播放结束会再次播放，即循环播放。
• muted 静音播放。
• poster 视频的封面图。
• preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，该属性无效。

总结