uniapp中如何使用HTML Video监听播放进度？

在uniapp中，如何监听HTML Video标签的播放进度？我尝试使用@timeupdate事件绑定，但似乎没有触发。请问在uniapp环境下正确的监听方式是什么？是否需要使用特殊的事件或API？能否提供一个具体的代码示例？

2 回复

在uniapp中，使用video组件的@timeupdate事件监听播放进度：

<video 
  src="video.mp4" 
  @timeupdate="onTimeUpdate"
></video>

methods: {
  onTimeUpdate(e) {
    console.log('当前播放进度:', e.detail.currentTime)
  }
}

@timeupdate会在播放过程中持续触发，通过e.detail.currentTime获取当前播放时间。


在 UniApp 中，可以使用 HTML <video> 组件的 @timeupdate 事件来监听播放进度。以下是具体实现方法：

  1. 在模板中定义 video 组件：

    <template>
  <view>
    <video 
      src="https://example.com/video.mp4" 
      @timeupdate="onTimeUpdate"
      controls
    ></video>
    <text>当前进度：{{ currentTime }} 秒</text>
  </view>
</template>

  2. 在脚本中处理进度事件：

    <script>
export default {
  data() {
    return {
      currentTime: 0
    }
  },
  methods: {
    onTimeUpdate(e) {
      // 通过 e.detail.currentTime 获取当前播放时间（单位：秒）
      this.currentTime = e.detail.currentTime.toFixed(2); // 保留两位小数
      console.log('当前播放时间:', this.currentTime);
      
      // 可选：计算播放百分比
      // const duration = e.detail.duration; // 视频总时长
      // const percent = (this.currentTime / duration * 100).toFixed(2);
    }
  }
}
</script>

关键点说明：

  • 使用 @timeupdate 事件绑定监听函数
  • 通过 e.detail.currentTime 获取当前播放时间（秒）
  • 可通过 e.detail.duration 获取视频总时长
  • 事件触发频率约为 250ms 一次

注意事项：

  • UniApp 的 video 组件是原生组件，层级最高
  • 在微信小程序中部分属性可能需要配置 enable-progress-gesture 等属性
  • 如需更精确控制可使用 seek 方法跳转播放位置

这样就可以实时监控视频播放进度并更新界面显示了。

回到顶部