video 标签在谷歌浏览器下报错 DOMException: play() failed because the user didn't interact

查阅了很多博客上面都说是因为
Google Chrome 2018年1月起不再自动播放内容，
然而按照上面的解决方法在浏览器搜索框中输入：chrome://flags/ 方法是不行的

在尝试了许久之后得到以下两种解决方案可供参考：

方案一：
如果视频本身是没有声音的那么直接在 video 标签中加入 muted 即可解决

<video src="..." autoplay="autoplay" muted></video>

方案二：
如果需要播放的视频必须是有声音的，那么可以先将该元素隐藏，随后再通过点击事件显示就可以了，我用的是 vue-cli 脚手架，这样其实很繁琐，如果是通过点击之后展示视频的可以这样，参考如下

<template>
  <div id="showVideo">
    <div class="video-content" v-show="showVideos">
      <video id="video" src="...">
          您的浏览器不支持 video 视屏播放。
      </video>
    </div>
    <p @click="clickVideo">click</p>
  </div>
</template>

<script>
export default {
  watch: {
    showVideos (newValue, oldValue) {
      let $video = document.querySelector('video')
      if (!newValue) {
        $video.load()
      } else {
        $video.play()
      }
    }
  },
  data () {
    return {
      showVideos: false
    }
  },
  methods: {
    clickVideo () {
      this.showVideos = true
    }
  }
}
</script>

方案三：
video 标签加上 控制器 让用户自己选择吧…

很奇怪，但是具体问题具体分析吧，总会有解决办法的，要是有更好的请告诉我一下