Video


Video

icon-note.gif 说明: 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

视频播放组件。

子组件

不支持子组件。

接口

Video(value: VideoOptions)

  • VideoOptions类型接口说明

    参数名 参数类型 必填 默认值 参数描述
    src string - 视频播放源的路径。
    currentProgressRate number | PlaybackSpeed8+ 1.0 | PlaybackSpeed.
    Speed_Forward_1_00_X
    视频播放倍速。
    icon-note.gif 说明:
    > number取值仅支持:0.75,1.0,1.25,1.75,2.0。
    previewUri string | PixelMap8+ | Resource - 预览图片的路径。
    controller VideoController - 控制器。
  • PlaybackSpeed8+类型接口说明

    名称 描述
    Speed_Forward_0_75_X 0.75倍速播放。
    Speed_Forward_1_00_X 1倍速播放。
    Speed_Forward_1_25_X 1.25倍速播放。
    Speed_Forward_1_75_X 1.75倍速播放。
    Speed_Forward_2_00_X 2倍速播放。

属性

名称 参数类型 默认值 描述
muted boolean false 是否静音。
autoPlay boolean false 是否自动播放。
controls boolean true 控制视频播放的控制栏是否显示。
objectFit ImageFit Cover 设置视频显示模式。
loop boolean false 是否单个视频循环播放。

事件

名称 功能描述
onStart() => void 播放时触发该事件。
onPause() => void 暂停时触发该事件。
onFinish() => void 播放结束时触发该事件。
onError() => void 播放失败时触发该事件。
onPrepared(event?: { duration: number }) => void 视频准备完成时触发该事件,通过duration可以获取视频时长,单位为秒(s)。
onSeeking(event?: { time: number }) => void 操作进度条过程时上报时间信息,单位为s。
onSeeked(event?: { time: number }) => void 操作进度条完成后,上报播放时间信息,单位为s。
onUpdate(event?: { time: number }) => void 播放进度变化时触发该事件,单位为s,更新时间间隔为250ms。

VideoController

一个VideoController对象可以控制一个或多个video。

导入对象

controller: VideoController = new VideoController();
1

start

start(): void

开始播放。

pause

pause(): void

暂停播放。

stop

stop(): void

停止播放。

setCurrentTime

setCurrentTime(value: number)

指定视频播放的进度位置。

  • 参数
    参数名 参数类型 必填 默认值 参数描述
    value number - 视频播放进度位置。

requestFullscreen

requestFullscreen(value: boolean)

请求全屏播放。

  • 参数
    参数名 参数类型 必填 默认值 参数描述
    value number false 是否全屏播放。

exitFullscreen

exitFullscreen()

退出全屏播放。

setCurrentTime8+

setCurrentTime(value: number, seekMode: SeekMode)

指定视频播放的进度位置,并指定跳转模式。

  • 参数

    参数名 参数类型 必填 默认值 参数描述
    value number - 视频播放进度位置。
    seekMode SeekMode - 跳转模式。
  • SeekMode8+类型接口说明

    名称 描述
    PreviousKeyframe 跳转到前一个最近的关键帧。
    NextKeyframe 跳转到后一个最近的关键帧。
    ClosestKeyframe 跳转到最近的关键帧。
    Accurate 精准跳转,不论是否为关键帧。

示例

@Entry
@Component
struct VideoCreateComponent {
  @State srcs: string = "/resources/video/video1.mp4";
  @State previewUris: string = "/resources/image/media.JPG";
  @State currentProgressRates: number = 1;
  @State autoPlays: boolean = false;
  @State controlsss: boolean = true;
  controller: VideoController = new VideoController();
  @State startStaus: boolean = true;
  build() {
    Column() {
      Video({
        src: this.srcs,
        previewUri: this.previewUris, 
        currentProgressRate: this.currentProgressRates,
        controller: this.controller
      }).width(700).height(500)
        .autoPlay(this.autoPlays)
        .controls(this.controlsss)
        .onStart(() => {
                  console.error('onStart');
                })
        .onPause(() => {
                  console.error('onPause');
                })
        .onFinish(() => {
                  console.error('onFinish');
                })
        .onError(() => {
                  console.error('onFinish');
                })
        .onPrepared((e) => {
                    console.error('onPrepared is ' + e.duration);
                })
        .onSeeking((e) => {
                    console.error('onSeeking is ' + e.time);
                })
        .onSeeked((e) => {
                    console.error('onSeekedis ' + e.time);
                })
        .onUpdate((e) => {
                    console.error('onUpdateis ' + e.time);
                })
      Row() {
        Button("src").onClick(() => {
          if (this.srcs == "/resources/video/video1.mp4") {
            this.srcs = "/resources/video/video2.mp4";
          } else {
            this.srcs = "/resources/video/video1.mp4";
          }
        });
        Button("previewUri").onClick(() => {
          if (this.previewUris == "/resources/image/media.JPG") {
            this.previewUris = "/resources/image/sinlin.png";
          } else {
            this.previewUris = "/resources/image/media.JPG";
          }
        });
        Button("controlsss").onClick(() => {
          this.controlsss = !this.controlsss;
        });
      }

      Row() {
        Button("start").onClick(() => {
          this.controller.start();
        });
        Button("pause").onClick(() => {
          this.controller.pause();
        });
        Button("stop").onClick(() => {
          this.controller.stop();
        });
      }

      Row() {
        Button("setCurrentTime").onClick(() => {
          this.controller.setCurrentTime(9, SeekMode.Accurate);
        });
      }
    }
  }
}
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