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>