javascript - Vue SPA 中的视频无法在 iPhone 上自动播放/加载

Question

我有一个用 vue 构建的简单视频作品集网站。视频播放器动态加载视频，然后通过 Javascript 播放

播放器的Vue模板代码:

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

这是我在组件中安装的代码，用于设置视频源，然后在可以播放时播放它:

  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
      );
    }

这在桌面和 Android 上效果很好，但在 iPhone 上，您必须再次单击视频才能播放。我知道 iPhone 有特殊的播放要求。但我不知道让他们使用 Vue 的最佳方式。

所需的行为显然是在用户单击视频后立即加载视频，然后自动播放。我现在的想法是在 iOS 设备的 javascript 中破例，并在单击时直接在新选项卡中加载视频。这是 iOS 的最佳方法吗？或者有更好的Vue解决方案吗？谢谢!

Answer 1

In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled. No data is loaded until the user initiates it.

iOS not only prevents autoplay but also preloading the video until the user initiates it.

这就是为什么你的 eventListener 永远不会触发。

来源:https://www.aerserv.com/blog/why-does-video-autoplay-on-mobile-devices-not-work/