HarmonyOS鸿蒙Next中Video自定义进度条

HarmonyOS鸿蒙Next中Video自定义进度条 记录一下，Video组件自带的播放控件，与实际开发中遇到的需求不一致，

需要单独放一个进度条，进行拖动，并显示对应的时间点，总体类似抖音视频可以拖动播放一样

布局方式：Stack

Video自带的播放控件样式：

思路：

1. 进度条使用slider来实现。最开始我用的progress，最后发现不可以实现简单的拖动

2. 再处理拿到的视频总时长，处理为mm:ss格式

效果图：↓

直接上整个代码：

interface TimeObject {
  time: number;
}

interface DurationObject {
  duration: number;
}

@Entry
@Component
struct Index {
  @State changeTimes: string = '00.00'; // 拖动值
  @State maxTime: string = '00:00' // 最大值
  @State sliderTime: number = 0 // 当前进度值
  @State processingTotalTime: number = 0 // 视频总长度秒数
  @State isShow: boolean = false // 默认不展示数字进度
  @State isPlay: boolean = true // 默认开始播放
  controller: VideoController = new VideoController()
  // 处理'秒'级别数据为 mm:ss 格式
  processingTime = (seconds: number) => {
    const minutes = Math.floor(seconds / 60);
    const remainingSeconds = seconds % 60;
    return `${String(minutes).padStart(2, '0')}:${String(remainingSeconds).padStart(2, '0')}`;
  }

  @Builder
  customVideo() {
    Video({
      src: $r('app.media.123'),
      controller: this.controller

    })
      .loop(true)
      .autoPlay(true)
      .controls(false)
      .onClick((event) => { // 点击视频本体控制暂停播放
        this.isPlay = !this.isPlay
        this.isPlay == true ? this.controller.start() : this.controller.pause()
        console.log('this.isPlay==', this.isPlay);
      })
      .onPrepared((e: DurationObject) => { // 视频加载完毕
        this.processingTotalTime = e.duration
        this.maxTime = this.processingTime(e.duration)
      })
      .onFinish(() => { // 播放结束的时候
        this.changeTimes = '00.00'
      })
      .onUpdate((e: TimeObject) => { // 播放进度变化的时候
        this.sliderTime = e.time // 用于把播放进度同步到自定义进度条的当前值中
      })
  }

  // 自定义进度条
  @Builder
  customProgress() {
    Slider({
      value: this.sliderTime,
      max: this.processingTotalTime,
      step: 1,
      style: SliderStyle.OutSet
    })
      .trackColor('#191919')
      .selectedColor('#fff')
      .blockSize({
        width: 10,
        height: 10
      })//设置滑块大小
      .width('90%')
      .onChange((value: number, mode: SliderChangeMode) => {
        this.isShow = true
        console.log('value==', value);
        this.sliderTime = value
        this.controller.setCurrentTime(value, SeekMode.Accurate)
        this.changeTimes = this.processingTime(value)
        console.log('this.changeTimes==', this.changeTimes);
        if (mode == 2) {
          this.isShow = false
        }
      })
  }

  build() {
    Column() {
      Stack({ alignContent: Alignment.Bottom }) {
        this.customVideo()

        Row() {
          Text(this.changeTimes)
            .fontColor('#fff')
          Text('/')
            .fontColor('#fff')
          Text(this.maxTime)
            .fontColor('#fff')
        }
        .margin({ bottom: 50 })
        .visibility(this.isShow == false ? Visibility.Hidden : Visibility.Visible)


        Text('暂停')
          .fontColor('#000')
          .width(40)
          .height(40)
          .backgroundColor(Color.Pink)
          .position({ left: '50%', top: '50%' })
          .translate({ x: '-50%', y: '-50%' })
          .onClick(() => {
            this.controller.start() // 开始播放
          })
          .borderRadius(50)
          .backgroundColor(Color.White)
          .visibility(this.isPlay == true ? Visibility.Hidden : Visibility.Visible)

      }
      .width('100%')
      .height(500)

      // 自定义进度条
      Row() {
        this.customProgress()
      }
      .width('100%')
      .height(40)
      .backgroundColor(Color.Black)
      .justifyContent(FlexAlign.Center)
    }
    .height('100%')
    .width('100%')
  }
}