uniapp video组件播放结束后出现红色小圆圈是怎么回事？

我在使用uniapp的video组件时，发现视频播放结束后会出现一个红色小圆圈，不知道是什么原因导致的？这个现象在安卓和iOS端都会出现，想请教下大家有没有遇到类似问题，该如何解决？

2 回复

这是video组件的默认播放结束图标，表示播放完毕。可在video组件中设置show-play-btn为false来隐藏。


在 UniApp 中使用 video 组件播放结束后出现红色小圆圈，通常是视频播放器默认的播放结束状态指示器，表示播放已完毕。这属于正常行为，但如果你希望隐藏或自定义它，可以通过以下方法解决：

原因分析

  • 红色小圆圈是系统或浏览器内置视频控件的默认样式（尤其在 iOS 或部分 Android 设备上），表示播放结束。
  • UniApp 的 video 组件基于原生视频播放器实现，因此会继承平台默认行为。

解决方案

  1. 隐藏默认控件：通过设置 video 组件的 controls 属性为 false，隐藏原生控件（包括红色圆圈），然后使用自定义控件替代。

    <video :controls="false" [@ended](/user/ended)="onVideoEnd"></video>

    在 ended 事件中处理播放结束逻辑，例如显示自定义提示。

  2. 自定义播放结束界面：结合 CSS 和 JavaScript 覆盖默认样式。例如，在播放结束时显示自定义元素：

    <video :controls="false" [@ended](/user/ended)="showCustomEnd"></video>
<view v-if="showEnd" class="custom-end">播放结束</view>

    export default {
  data() {
    return {
      showEnd: false
    };
  },
  methods: {
    showCustomEnd() {
      this.showEnd = true;
    }
  }
};

    .custom-end {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  background: rgba(0,0,0,0.7);
  padding: 10px;
  border-radius: 5px;
}

  3. 平台特定调整：在 iOS 上，红色圆圈可能更明显。确保测试多平台，并使用条件编译（如 #ifdef APP-PLUS）针对不同平台优化。

注意事项

  • 隐藏 controls 后，用户将无法使用默认播放/暂停等控件，需自行实现交互功能。
  • 测试不同平台（iOS、Android、H5）以确保兼容性。

通过以上方法，你可以控制或替换红色小圆圈，提升用户体验。如果问题持续，检查视频源或尝试更新 UniApp 版本。

回到顶部