OpenHarmony视频播放器

"abilities":[
  {
    "permissions": ["ohos.permission.INTERNET"],
  }
]
1.
2.
3.
4.
5.

//一个VideoController对象可以控制一个或多个video。
controller: VideoController = new VideoController();
1.
2.

declare interface VideoOptions {
  src?: string | Resource;
  currentProgressRate?: number | string | PlaybackSpeed;
  previewUri?: string | PixelMap | Resource;
  controller?: VideoController;
}
1.
2.
3.
4.
5.
6.

declare enum PlaybackSpeed {
  Speed_Forward_0_75_X,
  Speed_Forward_1_00_X,
  Speed_Forward_1_25_X,
  Speed_Forward_1_75_X,
  Speed_Forward_2_00_X,
}
1.
2.
3.
4.
5.
6.
7.

declare enum SeekMode {
  PreviousKeyframe,
  NextKeyframe,
  ClosestKeyframe,
  Accurate,
}
1.
2.
3.
4.
5.
6.

@Entry
@Component
struct Index {
  @State message: string = '视频预览'
  @State previewUris: Resource = $r('app.media.openharmony'); //预览封面
  controller: VideoController = new VideoController();
  @State currentProgressRate: number = 1
  @State muted: boolean = false
  @State autoPlay: boolean = true
  @State controls: boolean = true
  @State startStatus: boolean = true
  @State loop: boolean = true
  aboutToAppear() {
    this.controller.requestFullscreen(true)
    this.controller.start()
  }
  build() {
    Column() {
      Text(this.message)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Video({
        src: $r('app.media.video'),
        previewUri: this.previewUris, // 视频封面
        currentProgressRate: this.currentProgressRate, // 视频播放倍速
        controller: this.controller,
      })
        .muted(this.muted) // 是否静音
        .autoPlay(this.autoPlay) // 是否自动播放
        .controls(this.controls) // 控制视频播放的控制栏是否显示
        .objectFit(ImageFit.Contain) // 视频显示模式
        .loop(this.loop) // 是否单个视频循环播放
        .height("60%")
        .onStart(() => {
          // 播放时触发该事件
          console.info('onStart');
        })
        .onPause(() => {
          // 暂停时触发该事件
          console.info('onPause');
        })
        .onFinish(() => {
          console.info('onFinish');
        })
        .onError(() => {
          // 播放失败时触发该事件
          console.error('onError');
        })
        .onFullscreenChange((e) => {
          console.info('视频进入和退出全屏时触发该事件：' + e.fullscreen)
        })
        .onPrepared((e) => {
          console.info('视频准备完成时触发该事件：' + e.duration)
        })
        .onSeeking((e) => {
          console.info('操作进度条过程时上报时间信息：' + e.time)
        })
        .onSeeked((e) => {
          console.info('操作进度条完成后，上报播放时间信息：' + e.time)
        })
        .onUpdate((e) => {
          console.info('播放进度变化时触发该事件：' + e.time)
        })
      Row({}) {
        Flex({ wrap: FlexWrap.Wrap, justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) {
          Button("播放")
            .onClick(() => {
              this.controller.start()
            }).margin(8)
          Button("暂停")
            .onClick(() => {
              this.controller.pause()
            })
          Button("循环播放")
            .onClick(() => {
              this.loop=!this.loop
            })
          Button("2倍速")
            .onClick(() => {
              this.currentProgressRate=2
            })
          Button("静音")
            .onClick(() => {
              this.muted=!this.muted
            })
          Button("停止")
            .onClick(() => {
              this.controller.stop()
            })
          Button("全屏播放")
            .onClick(() => {
              this.controller.requestFullscreen(true)
            })
          Button("退出全屏")
            .onClick(() => {
              this.controller.exitFullscreen()
            }).margin(8)
          Button("控制栏是否显示")
            .onClick(() => {
              this.controls = !this.controls
            }).margin(8)
          Button("指定视频播放的进度")
            .onClick(() => {
              this.controller.setCurrentTime(9)
            })
        }
      }
    }
    .width('100%').height('100%')
  }
}
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.
108.
109.
110.
111.