uniapp video组件播放结束后无法重新开始是什么原因？

在使用uniapp的video组件时，发现视频播放结束后无法重新开始播放。尝试过调用play()方法或重新设置src，但视频仍然停留在结束画面无法重置。请问这是什么原因导致的？需要如何解决才能实现视频结束后重新播放的功能？

2 回复

可能是video组件的src路径问题，或未正确监听ended事件。检查src是否有效，并确保使用@ended绑定重新播放方法，重置currentTime为0并调用play()。


在UniApp中，video组件播放结束后无法重新开始，通常是由以下原因导致的：

  1. 播放状态未重置：视频播放结束后，current属性（当前播放时间）仍停留在结束位置，未重置为0，导致重新播放时从结束位置开始（表现为无反应）。

  2. 事件处理问题：未正确监听ended事件或未在事件回调中执行重置操作。

解决方案：

  • 在video组件上绑定ended事件，在事件回调中将current重置为0，并手动调用play()方法。
  • 示例代码：
    <template>
  <video 
    :src="videoSrc" 
    :current="currentTime" 
    [@ended](/user/ended)="onVideoEnded"
    controls
  ></video>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: 'https://example.com/video.mp4',
      currentTime: 0 // 控制播放进度
    };
  },
  methods: {
    onVideoEnded() {
      // 重置当前播放时间为0，并重新播放
      this.currentTime = 0;
      this.$nextTick(() => {
        // 确保DOM更新后触发播放
        // 注意：UniApp中可能需要通过ref操作video组件实例调用play()
        // 如果上述方法无效，请使用ref：
        // this.$refs.videoContext.play();
      });
    }
  }
};
</script>

注意事项：

  • 如果通过current重置无效，请使用ref获取video上下文并调用play()：
    <video ref="myVideo" :src="videoSrc" [@ended](/user/ended)="onVideoEnded"></video>

<script>
export default {
  methods: {
    onVideoEnded() {
      const videoContext = this.$refs.myVideo;
      videoContext.seek(0); // 定位到开始
      videoContext.play();
    }
  }
};
</script>
  • 确保视频源有效且支持播放。

如果问题持续，请检查UniApp版本兼容性或尝试真机调试（部分模拟器可能存在行为差异）。

回到顶部