uni-app ios系统下video组件设置了initial-time属性但播放不生效

发布于 1周前 作者 songsunli 来自 Uni-App

uni-app ios系统下video组件设置了initial-time属性但播放不生效

示例代码：

<video id="myVideo"  
       :src="videoLink"  
       v-if="isInitFlag"  
       style="width: 100vw; height: 60vw"  
       :poster="posterImg"  
       :initial-time="initialTime"  
       :page-gesture="true"  
       :show-mute-btn="true"  
       :show-center-play-btn="false"  
       :enable-progress-gesture="false"  
       @error="videoErrorCallback"  
       @timeupdate="watchTimeProcess"  
       @waiting="waitLoading"  
       @loadedmetadata="loadingComplete"  
       @play="videoPlay"  
       @pause="videoPause"  
       @ended="videoEnd"  
       controls>  
</video>  

mounted() {  
    this.videoContext = uni.createVideoContext('myVideo', this)  
    if (this.initialTime) {  
      this.videoContext.seek(this.initialTime)  
    }  
}

操作步骤：

this.initialTime = 300
this.videoContext.seek(this.initialTime)

设置后ios系统虽显示初始播放位置定位成功，但一点播放就跳回从0开始播放

预期结果：

从设置的播放位置开始播放

实际结果：

跳回从零开始播放

bug描述：

设置initial-time后 pc浏览器访问和安卓系统访问可以正常播放 ios系统点播放会跳回从零开始播放


Harmonyos Next教程
6 回复

解决了吗


相同问题，求解

我的是从0开始播放，进度条也不动

ios播放器加载普遍都比安卓慢，可以等到播放器加载完成loadedmetadata抛出后使用$nextTick或者定时器里跳转

回复 h***@vip.qq.com: 我试下

在uni-app中，video组件的initial-time属性用于设置视频开始播放时的起始时间（以秒为单位）。如果你在iOS系统下发现该属性不生效，可能是由于平台兼容性问题或代码实现上的某些细节没有处理好。以下是一些可能的解决方案和代码示例，帮助你排查和解决问题。

1. 检查video组件的基本用法

首先，确保你的video组件的基本用法是正确的。以下是一个简单的例子：

<template>
  <view>
    <video
      id="myVideo"
      src="path/to/your/video.mp4"
      controls
      initial-time="10"
      @loadedmetadata="onLoadedMetadata"
    ></video>
  </view>
</template>

<script>
export default {
  methods: {
    onLoadedMetadata(event) {
      console.log('Video metadata loaded');
      // 可以在这里尝试手动设置播放时间，作为备选方案
      // this.$refs.myVideo.currentTime = 10; // 注意：这种方式在iOS上可能也不可靠
    },
  },
};
</script>

2. 使用ref和mounted钩子手动设置时间

在某些情况下，你可能需要在组件挂载后手动设置播放时间。尽管initial-time属性应该自动生效，但你可以尝试这种方法作为备选：

<template>
  <view>
    <video
      ref="myVideo"
      src="path/to/your/video.mp4"
      controls
      @loadedmetadata="onLoadedMetadata"
    ></video>
  </view>
</template>

<script>
export default {
  mounted() {
    this.$nextTick(() => {
      const video = this.$refs.myVideo;
      video.addEventListener('loadedmetadata', () => {
        video.currentTime = 10; // 设置起始播放时间
      });
    });
  },
  methods: {
    onLoadedMetadata(event) {
      console.log('Video metadata loaded, but initial-time might not work on iOS');
    },
  },
};
</script>

3. 检查iOS平台特有的限制

请注意，iOS平台对视频播放有一些特有的限制和行为。例如，iOS可能会忽略某些HTML5 <video> 属性的设置，或者需要特定的用户交互才能触发某些操作。确保你的视频文件符合iOS的播放要求，并且你的应用已经获得了必要的权限。

总结

如果上述方法都不能解决问题，建议查阅uni-app和iOS平台的官方文档，了解是否有相关的已知问题或更新。同时，也可以在开发者社区中搜索类似的问题和解决方案。在处理平台兼容性问题时，通常需要结合多种方法和技巧来找到最佳的解决方案。

回到顶部