自动播放视频带声音

馀霞散成绮，澄江静如练。

浏览器默认不允许自动播放视频带声音

• 在2018年4月发布的Chrome 66 正式关闭了声音的自动播放，除非发生以下情况之一，否则无法在 chrome 上自动播放声音

1. 用户已与域进行交互(点击、点击等)。
2. 在桌面设备上，用户的媒体参与指数阈值为 交叉，表示用户之前播放过有声视频。
3. 在移动设备上，用户已将网站添加到他或她的主屏幕。
4. 顶级框架可以将自动播放权限委托(delegate)给它们的 iframe 以允许 自动播放声音。

规避

1.先让video标签静音条件下自动播放

<video  id="videoPlayer"  v-if="videoState.isPlay"  autoplay muted :src="videoState.currentVideo"   :onEnded="changeVideoUrl"  @error="errHandle" ></video>

2. 通过javaScript的方式让video标签先取消静音然后再自动播放

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

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

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

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

3. 解决刷新无法播放

• 刷新时触发重新回到页面

window.onbeforeunload = function(_e) {
  window.history.pushState(null,'null',document.URL)
  return '你确定要离开页面吗？';
};