Vue——video标签实现不静音自动播放

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

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

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

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

<video 
  ref="videoPlayer"
  id="videoPlayer"
  class="video" 
  width="100%" 
  autoplay 
  muted
  controls 
  :src="addPre()">
video>
1
2
3
4
5
6
7
8
9
10

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

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

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

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

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

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

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

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

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