HarmonyOS Video组件与Slider组件联动

参考示例如下：

1、VideoPlayPage.ets

import { prepared, finish, changeSliderTime, iconOnclick, sliderOnchange } from '../ModelAndView/VideoController'
import { VideoPlayModel } from '../ModelAndView/VideoPlayModel'

@Entry
@Component
export struct VideoPlayPage {
  // private source: string = (router.getParams() as Record<string, Object>).source as string;
  private source: string = "video/videoTest.mp4"
  @Provide videoPlayModel: VideoPlayModel = new VideoPlayModel()
  @State videoIsPlay: boolean = false;

  aboutToAppear(): void {
    this.videoIsPlay = this.videoPlayModel.isPlay;
  }

  onPageHide() {
    this.videoIsPlay = false;
    this.videoPlayModel.controller.pause();
  }

  build() {
    Column() {
      Video({
        src: $rawfile(this.source),
        // previewUri: $r('app.media.preview'),
        controller: this.videoPlayModel.controller
      })
        .width("100%")
        .height("90%")
        .controls(false)
        .autoPlay(false)
        .objectFit(ImageFit.Contain)
        .loop(false)
        .onAppear(() => {
          // this.videoPlayModel.controller.setCurrentTime(1)
          // this.videoPlayModel.controller.pause();
        })
        .onUpdate((event) => {
          this.videoPlayModel.currentTime = event.time;
          this.videoPlayModel.currentStringTime = changeSliderTime(this.videoPlayModel.currentTime);
        })
        .onPrepared((event ?: DurationObject) => {
          //首帧暂停
          // this.videoPlayModel.controller.pause();
          this.videoPlayModel.controller.setCurrentTime(1)
          this.videoPlayModel.controller.pause();
          if (event !== undefined) {
            prepared(this.videoPlayModel, event);
          }
        })
        .onFinish(() => {
          finish(this.videoPlayModel);
        })
      this.VideoSlider()
    }
    .height("100%")
    .width("100%")
  }

  @Builder
  VideoSlider() {
    Row({ space: 12 }) {
      Image(this.videoIsPlay ? $r('app.media.ic_pause') : $r('app.media.ic_play'))
        .width(24)
        .height(24)
        .margin({ left: 12 })
        .onClick(() => {
          this.videoIsPlay = !this.videoPlayModel.isPlay
          iconOnclick(this.videoPlayModel);
        })
      Text(this.videoPlayModel.currentStringTime)
        .fontSize(16)
        .fontColor(Color.White)
        .margin({ left: 12 })
      Slider({
        value: this.videoPlayModel.currentTime,
        min: 0,
        max: this.videoPlayModel.durationTime,
        step: 1,
        style: SliderStyle.OutSet
      })
        .blockColor(Color.White)
        .width("50%")
        .trackColor(Color.Gray)
        .selectedColor(Color.White)
        .showSteps(true)
        .showTips(true)
        .trackThickness(this.videoPlayModel.isOpacity ? 2 : 4)
        .onChange((value: number, mode: SliderChangeMode) => {
          sliderOnchange(this.videoPlayModel, value, mode);
        })
      Text(this.videoPlayModel.durationStringTime)
        .fontSize(16)
        .margin({ right: 12 })
        .fontColor(Color.White)
    }
    .opacity(1)
    .height("10%")
    .width("100%")
    .justifyContent(FlexAlign.Center)
    .backgroundColor(Color.Black)
  }
}

export interface DurationObject {
  duration: number;
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.

2、VideoController.ets

import { VideoPlayModel } from './VideoPlayModel';
import { DurationObject } from '../pages/VideoPlayPage';

export function prepared(model: VideoPlayModel, event: DurationObject) {
  model.durationTime = event.duration;
  let second: number = event.duration % 60;
  let min: number = Number.parseInt((event.duration / 60).toString());
  let head = min < 10 ? `0${min}` : min;
  let end = second < 10 ? `0${second}` : second;
  model.durationStringTime = `${head}:${end}`;
  model.flag = true;
}

export function finish(model: VideoPlayModel) {
  model.isPlay = false;
  model.isOpacity = false;
}

export function sliderOnchange(model: VideoPlayModel, value: number, mode: SliderChangeMode) {
  model.currentTime = Number.parseInt(value.toString());
  model.controller.setCurrentTime(Number.parseInt(value.toString()), SeekMode.Accurate);
  if (mode === SliderChangeMode.Begin) {
    model.isOpacity = false;
  }
  if (mode === SliderChangeMode.Moving) {
    model.isOpacity = false;
  }
  if (mode === SliderChangeMode.End) {
    model.isOpacity = true;
  }
}

export function changeSliderTime(value: number): string {
  let second: number = value % 60;
  let min: number = Number.parseInt((value / 60).toString());
  let head = min < 10 ? `0${min}` : min;
  let end = second < 10 ? `0${second}` : second;
  let nowTime = `${head}:${end}`;
  return nowTime;
}

export function iconOnclick(model: VideoPlayModel) {
  //当暂停时
  if (!model.isPlay) {
    model.controller.start();
    model.isPlay = true;
  } else {
    model.controller.pause();
    model.isPlay = false;
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.

3、VideoPlay.ets

import { VideoPlayModel } from './VideoPlayModel';
import { prepared, finish, changeSliderTime } from './VideoController'

@Component
export struct VideoPlay {
  source: string | Resource = '';
  @Consume private videoPlayModel: VideoPlayModel;
  private previewUris: Resource = $r('app.media.preview');

  build() {
    Column() {
      Video({
        src: this.source,
        previewUri: this.previewUris,
        controller: this.videoPlayModel.controller
      })
        .width("100%")
        .height("100%")
        .controls(false)
        .autoPlay(false)
        .objectFit(ImageFit.Contain)
        .loop(false)
        .onUpdate((event) => {
          this.videoPlayModel.currentTime = event.time;
          this.videoPlayModel.currentStringTime = changeSliderTime(this.videoPlayModel.currentTime);
        })
        .onFinish(() => {
          finish(this.videoPlayModel);
        })
      // VideoSlider()
    }
  }
}

export interface DurationObject {
  duration: number;
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.

4、VideoPlayModel.ets

export class VideoPlayModel {
  public currentTime: number = 0;
  public currentStringTime: string = '00:00';
  public durationTime: number = 0;
  public durationStringTime: string = '00:00';
  public isPlay: boolean = false;
  public isOpacity: boolean = false;
  public flag: boolean = false;
  public isLoading: boolean = false;
  public progressVal: number = 0;
  public controller: VideoController = new VideoController();
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.