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

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

iOS不仅会阻止自动播放，还会预加载视频，直到用户启动它为止。

这就是事件监听器从不触发的原因。

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

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

1 个答案: