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

Posted 2023-04-01 Oh No 发量又少了

由于浏览器厂商为了提高用户体验禁止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是单页面富应用，虽然我们看上去页面是从一个页面跳转到另一个页面但是这些路由页面始终在同一个文档（页面）中，当我们点击实现路由跳转时就已经实现了与文档交互，所以不会报上面的错。

HTML5 VIDEO 标签不播放音频/静音

【中文标题】HTML5 VIDEO 标签不播放音频/静音

【英文标题】：HTML5 VIDEO tag not playing audio / muted

【发布时间】：2015-01-26 17:28:16

【问题描述】：

我的 HTML5 视频开始播放（在 Chrome 和 Safari 中）没有音频，静音按钮似乎被禁用。所以我无法取消静音。播放器在文件中有声音，因此它可以在播放器中正常播放（例如 vlc）。

检查下面的屏幕：

<video class="media"   preload="auto" poster="img/posters/poster.jpg">
    <source src="video/desktop/resized/film.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

有什么想法吗？

【问题讨论】：

您是否尝试将文件拖入浏览器进行播放，即不通过 HTML 加载？可能是 MP4 格式不对，浏览器无法正常播放。

编码有问题。 ://

【参考方案1】：

某些视频播放器不支持音频编解码器，其他浏览器目前不支持。尝试使用适当的音频编解码器转换视频，例如 MPEG AAC 音频。