uniapp video组件如何隐藏进度条只显示时间？

在uniapp中使用video组件时，如何隐藏进度条但保留显示当前播放时间？我看官方文档没有直接提供这个配置项，尝试用CSS修改也没成功。有没有实际可行的解决方案？最好能兼顾iOS和安卓平台的兼容性。

2 回复

在uniapp的video组件中，设置show-progress="false"即可隐藏进度条，同时时间显示默认可见。


在uni-app中，可以通过设置Video组件的属性来隐藏进度条，同时保留时间显示。具体实现如下：

<template>
  <view>
    <video 
      src="/static/video.mp4"
      :controls="false"
      :show-progress="false"
      :show-play-btn="true"
      :show-center-play-btn="true"
      :current-time="currentTime"
      @timeupdate="onTimeUpdate"
    ></video>
    <text class="time-text">{{ formatTime(currentTime) }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTime: 0
    }
  },
  methods: {
    onTimeUpdate(e) {
      this.currentTime = e.detail.currentTime;
    },
    formatTime(seconds) {
      const min = Math.floor(seconds / 60);
      const sec = Math.floor(seconds % 60);
      return `${min}:${sec < 10 ? '0' + sec : sec}`;
    }
  }
}
</script>

<style>
.time-text {
  position: absolute;
  bottom: 10px;
  right: 10px;
  color: white;
  background-color: rgba(0,0,0,0.5);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}
</style>

关键属性说明：

  • controls="false"：隐藏默认控制条
  • show-progress="false"：隐藏进度条
  • 通过@timeupdate事件监听播放时间
  • 使用自定义文本显示当前时间

注意事项：

  1. 需要自行实现时间显示样式和位置
  2. 可根据需求添加播放/暂停等控制按钮
  3. 时间格式可根据需要调整显示方式

这样就实现了隐藏进度条，只显示播放时间的效果。

回到顶部