Javascript Vue SPA中的视频不能在iPhone上自动播放/加载

我有一个简单的视频组合网站，我在vue中构建。视频播放器动态加载视频，然后通过Javascript播放

播放器的Vue模板代码：

 <video @click.stop :class="$style.playingVideo" ref="theVideo" src="" controls preload></video>

这在台式机和安卓系统上非常有效，但在iPhone上，你必须再次点击视频才能播放。我知道iPhone有特殊的播放要求。但我不知道如何让他们使用Vue

理想的行为显然是在用户单击视频后立即加载视频，然后自动播放。我现在的想法是在iOS设备的javascript中做一个例外，点击后直接将视频加载到一个新的选项卡中。这是iOS的最佳方法吗？还是有更好的Vue解决方案？谢谢

在iOS上的Safari（适用于所有设备，包括iPad）中，用户可能位于蜂窝网络上，并按数据单元收费，预加载和自动播放被禁用。在用户启动之前，不会加载任何数据

iOS不仅可以防止自动播放，还可以在用户启动之前预加载视频

这就是为什么你的eventListener从不开火

---

资料来源：

太好了。非常感谢。我将尝试在单独的选项卡中加载视频。问题还被证明是由于cloudfront出于某种原因删除了Accept Ranges:Bytes标头（仍在调查中）

  mounted: function() {
    this.$refs.theVideo.src = this.getVideoUrl(this.videoName);
    if (
      this.$refs.theVideo.readyState >= this.$refs.theVideo.HAVE_FUTURE_DATA
    ) {
      this.$refs.theVideo.play();
    } else {
      this.$refs.theVideo.addEventListener(
        "canplay",
        () => {
          this.$refs.theVideo.play();
        },
        false
      );
    }