uniapp video duration如何获取或设置

在uniapp中如何获取或设置video组件的duration属性？我尝试使用video的duration属性，但获取不到视频的实际时长，请问正确的实现方法是什么？

2 回复

在uniapp中，获取视频时长：

this.$refs.videoRef.duration

设置时长需通过seek(position)跳转到指定位置，无法直接修改视频总时长。


在 UniApp 中，Video 组件用于播放视频，但默认情况下，它不支持直接通过属性设置或获取视频时长。以下是获取和设置视频时长的方法：

获取视频时长

  1. 使用 @loadedmetadata 事件：当视频元数据加载完成时触发，可通过事件对象获取 duration。

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

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

  2. 使用 UniApp API（需创建视频上下文）：

    // 在 onReady 或 mounted 中创建视频上下文
const videoContext = uni.createVideoContext('myVideo'); // 'myVideo' 为 video 组件的 id

// 通过 seek 和 pause 结合获取时长（非直接方法，需结合事件）
videoContext.seek(0); // 跳转到开始
// 结合 loadedmetadata 事件获取

设置视频时长

UniApp 的 Video 组件不支持直接设置视频时长，因为时长由视频文件本身决定。但可以通过以下方式控制播放位置：

  • 使用 current-time 属性：设置视频的初始播放位置（秒）。

    <video 
  src="/static/video.mp4" 
  :current-time="startTime"
></video>

    在 data 中定义 startTime（例如 startTime: 10 表示从第10秒开始播放）。

  • 通过视频上下文控制：

    const videoContext = uni.createVideoContext('myVideo');
videoContext.seek(30); // 跳转到第30秒

注意事项

  • 确保视频资源可访问，且格式受支持（如 MP4）。
  • 部分平台（如小程序）可能有特定限制，需测试兼容性。
  • 获取时长依赖元数据加载，若网络慢可能导致延迟。

通过以上方法，即可在 UniApp 中处理视频时长相关需求。

回到顶部