uniapp video组件播放结束后无法重新开始且频繁触发ended问题如何解决？

我在使用uniapp的video组件时遇到一个问题：视频播放结束后无法自动重新开始播放，并且会频繁触发ended事件。即使尝试调用play()方法或重置currentTime为0也无法解决。请问这是什么原因导致的？应该如何正确实现视频结束后自动重播的功能？

2 回复

检查video组件的ended事件是否被重复绑定，建议使用@ended绑定一次。播放结束后调用videoContext.seek(0)重置进度，再调用videoContext.play()重新播放。


针对uniapp中video组件播放结束后无法重新开始且频繁触发ended的问题，可以尝试以下解决方案：

1. 控制视频源重置

在ended事件中重新设置视频源，强制刷新播放状态：

// template
<video 
  :src="videoSrc" 
  @ended="onVideoEnded"
  ref="videoRef"
></video>

// script
data() {
  return {
    videoSrc: 'https://example.com/video.mp4'
  }
},
methods: {
  onVideoEnded() {
    // 先暂停并重置播放位置
    this.$refs.videoRef.seek(0)
    this.$refs.videoRef.pause()
    
    // 重置视频源触发重新加载
    const tempSrc = this.videoSrc
    this.videoSrc = ''
    
    // 使用nextTick确保DOM更新后重新设置源
    this.$nextTick(() => {
      this.videoSrc = tempSrc
    })
  }
}

2. 使用currentTime重置播放位置

更简洁的解决方案：

methods: {
  onVideoEnded() {
    this.$refs.videoRef.currentTime = 0
    this.$refs.videoRef.play()
  }
}

3. 添加防抖处理

防止ended事件频繁触发：

methods: {
  onVideoEnded: _.debounce(function() {
    this.$refs.videoRef.currentTime = 0
    this.$refs.videoRef.play()
  }, 500)
}

4. 检查视频格式兼容性

确保视频格式在目标平台上兼容，某些格式可能导致播放器行为异常。

5. 更新uni-app版本

老版本可能存在已知bug，更新到最新版本可解决部分问题。

推荐优先尝试方案2，通过重置currentTime并重新播放，这是最直接有效的解决方法。如果仍有问题，再结合方案1的完整重置流程。

回到顶部