时间戳

首页 > 解决方案 > Vue SPA 中的视频无法在 iPhone 上自动播放/加载

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

问题描述

我有一个在 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 解决方案？谢谢！

标签： javascripthtmliosvue.jsvideo

解决方案

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

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

这就是为什么您的 eventListener 永远不会触发的原因。

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

推荐阅读