uniapp video时长如何获取或控制

在uniapp中，如何获取video组件的视频时长？另外，是否可以对视频时长进行控制或修改？比如在播放前设置特定的播放时长，或者在播放过程中动态调整时长。官方文档中似乎没有明确说明相关方法，求解答具体实现方式。

2 回复

在uniapp中，获取视频时长可通过@loadedmetadata事件，事件对象中的duration属性即为视频总时长。控制播放进度可用videoContext.seek()方法。


在 UniApp 中，获取或控制 <video> 组件的时长可以通过以下方法实现：

1. 获取视频时长

使用 @loadedmetadata 事件，当视频元数据加载完成后触发，可获取视频总时长（单位：秒）。

示例代码：

<template>
  <view>
    <video 
      src="/static/video.mp4" 
      @loadedmetadata="onVideoLoaded"
      controls
    ></video>
    <text>视频时长：{{ duration }} 秒</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      duration: 0
    };
  },
  methods: {
    onVideoLoaded(e) {
      this.duration = e.detail.duration; // 获取总时长
    }
  }
};
</script>

2. 控制视频播放位置

通过 video 组件的 currentTime 属性设置播放时间点，或使用 seek() 方法跳转。

示例代码：

<template>
  <view>
    <video 
      ref="myVideo" 
      src="/static/video.mp4" 
      controls
    ></video>
    <button @click="seekToTime(30)">跳转到 30 秒</button>
  </view>
</template>

<script>
export default {
  methods: {
    seekToTime(time) {
      const videoContext = this.$refs.myVideo; // 获取 video 组件实例
      videoContext.seek(time); // 跳转到指定时间（秒）
    }
  }
};
</script>

3. 动态设置播放时长

  • 限制播放时长：结合 @timeupdate 事件监听播放进度，到达指定时间时暂停或跳转。
  • 示例代码片段：
    onTimeUpdate(e) {
  if (e.detail.currentTime > 60) {
    this.$refs.myVideo.pause(); // 超过 60 秒时暂停
  }
}

注意事项：

  • 确保视频资源支持元数据读取（如 MP4 格式）。
  • 部分平台（如小程序）可能对 seek 操作有兼容性限制，需测试验证。

通过以上方法，即可灵活获取和控制视频时长。

回到顶部