uniapp video组件播放结束后出现红色小圆圈且无法重新播放如何解决？

在使用uniapp的video组件时，视频播放结束后会出现一个红色小圆圈，并且无法重新播放视频。即使设置了循环播放（loop）属性或手动调用play()方法都无法解决。请问这是什么原因导致的？该如何消除这个红色圆圈并实现视频正常重播？测试环境是H5端和微信小程序端都会出现此问题。

2 回复

检查video组件的ended事件是否触发，并调用videoContext.seek(0)和videoContext.play()重置播放位置。


在uni-app中，video组件播放结束后出现红色小圆圈且无法重新播放，通常是由于视频播放状态未正确重置或组件内部状态异常导致的。以下是几种解决方案：

1. 重置视频播放状态

在视频播放结束后，通过@ended事件重置视频的currentTime为0，并重新加载视频源。

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

<script>
export default {
  data() {
    return {
      videoSrc: '/static/video.mp4'
    }
  },
  methods: {
    onVideoEnded() {
      // 重置播放时间并重新加载
      this.$refs.videoRef.seek(0);
      this.$refs.videoRef.pause(); // 先暂停
      // 如果需要重新播放，可以调用 play()
      // this.$refs.videoRef.play();
    }
  }
}
</script>

2. 重新加载视频源

通过动态修改src强制视频组件重新加载。

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

<script>
export default {
  data() {
    return {
      videoSrc: '/static/video.mp4'
    }
  },
  methods: {
    onVideoEnded() {
      // 临时清空src再重置，触发重新加载
      this.videoSrc = '';
      this.$nextTick(() => {
        this.videoSrc = '/static/video.mp4';
      });
    }
  }
}
</script>

3. 使用 key 强制重新渲染组件

通过改变key值强制视频组件重新初始化。

<template>
  <video 
    :src="videoSrc" 
    :key="videoKey"
    @ended="onVideoEnded"
    controls
  ></video>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: '/static/video.mp4',
      videoKey: 0
    }
  },
  methods: {
    onVideoEnded() {
      this.videoKey += 1; // 改变key重新渲染组件
    }
  }
}
</script>

4. 检查视频格式和编码

确保视频文件格式（如MP4）和编码（H.264）被广泛支持，避免因兼容性问题导致播放异常。

可能原因

  • 播放状态未重置：播放结束后未正确重置播放位置。
  • 组件内部bug：uni-app或平台底层视频组件可能存在状态处理问题。
  • 视频文件问题：视频编码或文件损坏导致播放异常。

建议

  1. 优先使用方案1，通过seek(0)和pause()重置状态。
  2. 若问题依旧，尝试方案3强制重新渲染。
  3. 在多个平台（iOS/Android）测试，确认是否为平台特定问题。

通过以上方法，通常可解决播放结束后出现红色圆圈且无法重新播放的问题。

回到顶部