带有自定义按钮的HTML5视频无法在Safari 12中播放

Question

Safari阻止了完全可以理解的视频的自动播放。但是我必须找到视频正在“自动”播放的解决方法。 我使用 VueJS btw。

视频：

<video preload="auto" id="videowizy" class="video mockup-size">
    <source src="../assets/video.mp4" type="video/mp4">
</video>

仅在按下自定义播放按钮时播放该视频。

<a id="play" @click="startVideo">Play Video ▶</a>

然后从 .play（）; 函数开始。

this.videoStarted = true;
window.setTimeout(() => {
    this.videoVisible = true;
    var video = document.getElementById('videowizy');
    video.addEventListener('ended',this.stopVideo,false);
    video.play();
},2000)

现在问这个问题。 Safari 12抛出以下错误

  

未处理的承诺拒绝：NotAllowedError：在当前上下文中，用户代理或平台不允许该请求，可能是因为用户拒绝了权限。

当我使用controls = true时会被修复，但是当我使用controls = true时，由于视频绝对位于框架后面（用于模拟手机的模型），因此无法按播放。 有没有办法说“嘿，这是播放按钮，请让我玩野生动物园”？

谢谢！