uni-app在使用video标签时，initial-time属性在iOS系统H5环境下无法指定视频初始播放位置

uni-app在使用video标签时，initial-time属性在iOS系统H5环境下无法指定视频初始播放位置

操作步骤：

  • ios系统点击视频播放，续播时间是后台请求过来在赋值给 initial-time 属性上的 无法生效。

预期结果：

  • 应该按照后台去到的续播时间为准进行播放

实际结果：

  • 视频一直从0开始播放，无法续播

bug描述：

  • uniapp在使用video标签的时候，initial-time属性在ios系统环境下不能指定视频初始播放位置
1 回复

更多关于uni-app在使用video标签时，initial-time属性在iOS系统H5环境下无法指定视频初始播放位置的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在iOS系统的H5环境下，initial-time属性确实存在兼容性问题。这是由于iOS Safari浏览器对视频播放控制的限制导致的。

主要原因： iOS Safari要求视频必须在用户交互（如点击）后才能通过JavaScript控制播放位置。在页面加载时设置initial-time，iOS会忽略这个设置。

解决方案：

  1. 使用seek()方法： 在视频的play事件或用户点击播放后，通过ref获取video实例，调用seek()方法：

    <template>
  <video ref="videoRef" :src="src" @play="handlePlay"></video>
</template>

<script>
export default {
  data() {
    return {
      initialTime: 10 // 从后台获取的续播时间
    }
  },
  methods: {
    handlePlay() {
      this.$refs.videoRef.seek(this.initialTime)
    }
  }
}
</script>

  2. 使用timeupdate事件： 首次播放时跳转到指定位置：

    <template>
  <video ref="videoRef" :src="src" @timeupdate="handleTimeUpdate"></video>
</template>

<script>
export default {
  data() {
    return {
      initialTime: 10,
      hasSeeked: false
    }
  },
  methods: {
    handleTimeUpdate(e) {
      if (!this.hasSeeked && this.initialTime > 0) {
        this.$refs.videoRef.seek(this.initialTime)
        this.hasSeeked = true
      }
    }
  }
}
</script>

  3. 使用loadedmetadata事件： 在元数据加载完成后设置播放位置：

    <template>
  <video :src="src" @loadedmetadata="handleLoadedMetaData"></video>
</template>

<script>
export default {
  methods: {
    handleLoadedMetaData(e) {
      e.target.currentTime = this.initialTime
    }
  }
}
</script>
回到顶部