HarmonyOS鸿蒙Next中Video如何设置播放控制进度条的ui颜色

Video组件可隐藏自带控制器并自定义控制器的样式或功能。

1、隐藏自带的控制器 .controls(false) :

Video({
  src: this.videoSrc,
  previewUri: this.previewUri,
  controller: this.controller
})
  .controls(false)

2、使用Slider组件来自定义进度条：

Slider({
  value: this.currentTime,
  min: 0,
  max: this.durationTime
})
  .blockColor('#000')
  .trackColor('#999')
  .selectedColor('#000')
  .onChange((value: number) => {
    this.controller.setCurrentTime(value); 
  })

3、其实可保留白色进度条，在底部控制组件增加一些黑色渐变阴影。这样能保证白色背景视频，同样能看到进度条。

Row() {
  Text('播放')
  Slider()
  Text('全屏')
}
.width('100%')
.linearGradient({
  angle: 180,
  colors: [['#00000000', 0], ['#92000000', 1]]
})

完整示例：

import { window } from '@kit.ArkUI';
import { AVVolumePanel } from '@kit.AudioKit';

@Entry
@Component
struct VideoControlPage {
  @State videoSrc: Resource = $rawfile('video_sample3.mp4'); // 视频文件资源需要替换为本地资源
  @State previewUri: Resource = $r('app.media.foreground'); // 视频封面资源需要替换为本地资源
  @State currentTime: number = 0;
  @State voiceValue: number = 5;
  @State durationTime: number = 100;
  @State play: boolean = false;
  @State restTime: number = 0;
  @State private isFullScreen: boolean = false;
  private controller = new VideoController();

  aboutToAppear(): void {
    this.durationTime = 29;
  }

  build() {
    Stack() {
      Video({
        src: this.videoSrc,
        previewUri: this.previewUri,
        controller: this.controller
      })
        .width('100%')
        .height('100%')
        .loop(false)
        .controls(false)
        .onFullscreenChange((event) => {
          this.isFullScreen = event.fullscreen;
          this.changeOrientation(this.isFullScreen);
        })
        .objectFit(ImageFit.Contain)
        .autoPlay(false)
        .id('video_news_detail')
        .onPrepared((event) => {
          if (event) {
            this.durationTime = event.duration;
            this.restTime = event.duration; // 获取视频总长
          }
        })
        .onUpdate((event) => {
          if (event) {
            this.currentTime = event.time;
            this.restTime = this.durationTime - event.time; // 剩余时长等于总长减去当前位置
          }
        });
      // 音量和光亮控制器
      Row() {
        // voiceValue
        Slider({
          value: $$this.voiceValue,
          min: 0,
          max: 15
        })
          .rotate({
            z: 1,
            angle: -90
          })
          .height(150)
          .width(150);
      }
      .margin({ bottom: this.isFullScreen ? 50 : 200 })
      .width('100%')
      .height(200)
      .justifyContent(FlexAlign.Start)
      .zIndex(1);

      // 自定义的控制器
      Row() {
        Text(this.play ? '暂停' : '播放').onClick(() => {
          this.play = !this.play;
          if (this.play) {
            this.controller.start(); // 开始播放
          } else {
            this.controller.pause(); // 暂停播放
          }
        }).margin(5).fontColor(Color.White)
          .width('10%');
        Slider({
          value: this.currentTime,
          min: 0,
          max: this.durationTime
        })
          .blockColor('#000')
          .trackColor('#999')
          .selectedColor('#000')
          .onChange((value: number) => {
            this.controller.setCurrentTime(value); // 设置视频播放的进度跳转到value处
          })
          .width('65%');
        // 展示剩余时长
        Text(`${this.restTime.toString()}s`)
          .width('10%')
          .fontColor(Color.White);
        // 修改全屏控制方法，同时删除原问题代码中Video组件的onFullscreenChange判断条件
        Text(this.isFullScreen ? '退出全屏' : '全屏')
          .onClick(() => {
            this.isFullScreen = !this.isFullScreen;
            this.changeOrientation(this.isFullScreen);
          })
          .width('15%')
          .fontColor(Color.White);
      }
      .zIndex(2);

      AVVolumePanel({
        volumeLevel: this.voiceValue,
        volumeParameter: {
          position: {
            x: 100,
            y: 200
          }
        }
      });
    }
    .align(Alignment.Bottom)
    .width('100%');
  }

  // 更改屏幕方向landscape为true横屏，false竖屏
  changeOrientation(landscape: boolean) {
    window.getLastWindow(this.getUIContext().getHostContext()).then((lastWindow) => {
      lastWindow.setPreferredOrientation(landscape ? window.Orientation.LANDSCAPE : window.Orientation.PORTRAIT);
    });
  }
}