uniapp video 视频加载完成事件如何监听

在uniapp中，如何监听video组件的视频加载完成事件？我尝试了@load和@loadedmetadata事件都没有触发，请问正确的监听方式是什么？

2 回复

在uniapp中，可以通过@loadedmetadata事件监听视频加载完成：

<video 
  src="video.mp4" 
  @loadedmetadata="onVideoLoaded"
></video>

methods: {
  onVideoLoaded() {
    console.log('视频加载完成')
  }
}

当视频元数据加载完成时会触发该事件。


在 UniApp 中，可以通过 <video> 组件的 @loadedmetadata 事件来监听视频加载完成。该事件在视频元数据（如时长、尺寸）加载完成后触发。

使用方法：

  1. 在模板中为 <video> 组件绑定 @loadedmetadata 事件。
  2. 在方法中定义对应的事件处理函数。

示例代码：

<template>
  <view>
    <video 
      src="https://example.com/sample.mp4" 
      @loadedmetadata="onVideoLoaded"
    ></video>
  </view>
</template>

<script>
export default {
  methods: {
    onVideoLoaded(e) {
      console.log('视频加载完成', e)
      uni.showToast({
        title: '视频加载完成',
        icon: 'success'
      })
    }
  }
}
</script>

说明：

  • @loadedmetadata 是推荐事件，表示视频元数据已加载。
  • 其他相关事件：
    • @loadstart：开始加载。
    • @canplay：可以播放（但可能未完全加载）。
    • @canplaythrough：可流畅播放（已完全加载）。

根据需求选择合适的事件即可。

回到顶部