uniapp微信小程序video的回调事件如何使用

在uniapp开发微信小程序时，video组件的回调事件（如onPlay、onPause等）具体该怎么使用？我在官方文档看到有这些事件，但在实际使用时发现无法触发，不知道是不是绑定方式有问题。能否提供一个完整的示例代码，说明如何正确绑定和监听这些回调事件？

2 回复

在uniapp中，使用微信小程序video组件的回调事件，只需在video标签上绑定事件即可。例如：

<video @play="onPlay" @pause="onPause" @ended="onEnded"></video>

然后在methods中定义对应方法：

methods: {
  onPlay() { console.log('开始播放') },
  onPause() { console.log('暂停播放') },
  onEnded() { console.log('播放结束') }
}

常用事件还有：timeupdate（播放进度更新）、error（播放错误）等。


在 UniApp 中，微信小程序的 <video> 组件提供了多个回调事件，用于处理视频播放状态、进度、错误等。以下是常用回调事件及使用方法：

常用回调事件

  1. play：开始播放时触发。
  2. pause：暂停播放时触发。
  3. ended：播放结束时触发。
  4. timeupdate：播放进度变化时触发（每秒约4次）。
  5. error：视频播放出错时触发。
  6. waiting：视频缓冲时触发。
  7. progress：加载进度变化时触发。

使用方法

在 <video> 组件中绑定事件，并在 Vue 方法中定义对应的处理函数。

示例代码

<template>
  <view>
    <video 
      src="https://example.com/video.mp4"
      @play="onPlay"
      @pause="onPause"
      @ended="onEnded"
      @timeupdate="onTimeUpdate"
      @error="onError"
      @waiting="onWaiting"
      @progress="onProgress"
    ></video>
  </view>
</template>

<script>
export default {
  methods: {
    onPlay() {
      console.log('视频开始播放');
    },
    onPause() {
      console.log('视频已暂停');
    },
    onEnded() {
      console.log('视频播放结束');
    },
    onTimeUpdate(event) {
      console.log('当前播放时间:', event.detail.currentTime);
    },
    onError(event) {
      console.error('播放错误:', event.detail.errMsg);
    },
    onWaiting() {
      console.log('视频缓冲中...');
    },
    onProgress(event) {
      console.log('加载进度:', event.detail.buffered);
    }
  }
}
</script>

注意事项

  • 事件回调参数通常通过 event.detail 获取详细信息（如 currentTime、buffered 等）。
  • 确保视频路径有效，避免因加载失败触发错误事件。
  • 测试时建议使用真机，部分事件在开发者工具中可能无法完全模拟。

通过合理使用这些回调，可以实现播放控制、进度显示和错误处理等功能。

回到顶部