uniapp video 出现双进度条是什么情况？

我在使用uniapp开发时，video组件出现了双进度条的情况，一个在顶部一个在底部。请问这是什么原因导致的？该怎么解决？

2 回复

可能是video组件嵌套或样式冲突。检查是否重复引入video组件，或父元素设置了overflow: visible导致进度条溢出。建议检查CSS样式，避免嵌套video。


在UniApp中，视频组件（<video>）出现双进度条通常是由于系统原生进度条与自定义进度条重叠导致的。常见原因和解决方案如下：

原因分析

  1. 系统默认进度条：部分Android/iOS系统会为视频播放器添加原生控制条。
  2. 自定义进度条冲突：开发者通过CSS/JS自定义了进度条，但未隐藏系统默认控件。

解决方案

1. 隐藏系统原生进度条

在<video>组件中设置controls属性为false，并自行实现控制逻辑：

<video 
  src="/static/video.mp4" 
  :controls="false"
  @timeupdate="onTimeUpdate"
></video>

2. 自定义控制条（示例）

<template>
  <view>
    <video 
      ref="videoRef"
      src="/static/video.mp4" 
      :controls="false"
      @timeupdate="onTimeUpdate"
    ></video>
    
    <!-- 自定义进度条 -->
    <slider 
      :value="currentTime" 
      :max="duration"
      @change="onSliderChange"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTime: 0,
      duration: 0
    }
  },
  methods: {
    onTimeUpdate(e) {
      this.currentTime = e.detail.currentTime;
      this.duration = e.detail.duration;
    },
    onSliderChange(e) {
      this.$refs.videoRef.seek(e.detail.value);
    }
  }
}
</script>

3. 平台特异性处理

  • Android：检查手机厂商自定义UI
  • iOS：确保使用标准视频组件属性

注意事项

  1. 测试不同平台（Android/iOS）的显示效果
  2. 使用官方文档推荐的属性配置
  3. 避免同时启用系统控件和自定义控件

通过以上调整即可消除双进度条问题，保持界面整洁统一。

回到顶部