Video

视频播放组件。

说明：

该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

需要权限

使用网络视频时，需要申请权限ohos.permission.INTERNET。具体申请方式请参考权限申请声明。

子组件

不支持子组件。

接口

Video(value: {src?: string | Resource, currentProgressRate?: number | string | PlaybackSpeed, previewUri?: string | PixelMap | Resource, controller?: VideoController})

参数：

参数名	参数类型	必填	默认值	参数描述
src	string | Resource	否	-	视频播放源的路径，支持本地视频路径和网络路径。 支持在resources下面的video或rawfile文件夹里放置媒体资源。 支持dataability://的路径前缀，用于访问通过Data Ability提供的视频路径，具体路径信息详见Data Ability说明。
currentProgressRate	number | PlaybackSpeed8+	否	1.0 | PlaybackSpeed. Speed_Forward_1_00_X	视频播放倍速。 >  说明： > number取值仅支持：0.75，1.0，1.25，1.75，2.0。
previewUri	string | PixelMap8+ | Resource	否	-	预览图片的路径。
controller	VideoController	否	-	控制器。

PlaybackSpeed⁸⁺类型接口说明

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

VideoController

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

导入对象

controller: VideoController = new VideoController();

start

start(): void

开始播放。

pause

pause(): void

暂停播放。

stop

stop(): void

停止播放。

setCurrentTime

setCurrentTime(value: number)

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

参数：

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

requestFullscreen

requestFullscreen(value: boolean)

请求全屏播放。

参数：

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

exitFullscreen

exitFullscreen()

退出全屏播放。

setCurrentTime⁸⁺

setCurrentTime(value: number, seekMode: SeekMode)

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

参数：

参数名	参数类型	必填	默认值	参数描述
value	number	是	-	视频播放进度位置。
seekMode	SeekMode	是	-	跳转模式。

SeekMode⁸⁺类型接口说明

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

示例

// xxx.ets
@Entry
@Component
struct VideoCreateComponent {
  @State srcs: Resource = $rawfile('video1.mp4');
  @State previewUris: Resource = $r('app.media.img');
  @State currentProgressRates: number = 1;
  @State autoPlays: boolean = false;
  @State controlsss: boolean = true;
  controller: VideoController = new VideoController();
  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('onError');
                })
        .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(() => {
            this.srcs = $rawfile('video2.mp4');
        });
        Button("previewUri").onClick(() => {
            this.previewUris = $r('app.media.img1');
        });
        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);
        });
      }
    }
  }
}