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

Question

Safari 已阻止自动播放完全可以理解的视频。但我必须找到一种解决方法，让视频“自动”播放。\n顺便说一句，我使用VueJS。

\n\n

视频：

\n\n

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

\n\n

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

\n\n

<a id="play" @click="startVideo">Play Video \xe2\x96\xb6</a>\n

\n\n

我从.play();开始 功能。

\n\n

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

\n\n

现在回答问题。Safari 12 向我抛出以下错误

\n\n

\n

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

\n

\n\n

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

\n\n

提前致谢！

\n