# 7.1:视频播放(Video)

Video 是ArkUI开发框架提供的一个视频播放组件,我们可以使用该组件实现播放视频相关的功能,本节笔者简单介绍一下 Video 的使用。

# 7.1.1:Video定义介绍

interface VideoInterface {
  (value: VideoOptions): VideoAttribute;// Video创建需要传递一个必要参数value
}

declare interface VideoOptions {
  src?: string | Resource;
  currentProgressRate?: number | string | PlaybackSpeed;
  previewUri?: string | PixelMap | Resource;
  controller?: VideoController;
}
1
2
3
4
5
6
7
8
9
10
  • value:对播放视频相关设置, VideoOptions 参数说明如下:
    • src:设置视频地址。
    • currentProgressRate:设置视频播放倍速,参数说明如下:
      • number|string:只支持 0.751.01.251.752.0
      • PlaybackSpeed:对 number | string 的封装,防止用户传错参数的。
    • previewUri:视频封面图的路径。
    • controller:设置视频播放的控制器,比如控制视频开始,暂停等。

# 7.1.2:Video属性介绍

declare class VideoAttribute extends CommonMethod<VideoAttribute> {
  muted(value: boolean): VideoAttribute;
  autoPlay(value: boolean): VideoAttribute;
  controls(value: boolean): VideoAttribute;
  loop(value: boolean): VideoAttribute;
  objectFit(value: ImageFit): VideoAttribute;
}
1
2
3
4
5
6
7
  • muted:设置视频是否静音。
  • autoPlay:设置视频是否自动播放。
  • controls:设置是否显示控制视频播放的控制条。
  • objectFit:设置视频画面的拉伸样式,详见 Image 组件的 ImageFit 属性。
  • loop:设置视频是否循环播放。

# 7.1.3:Video事件介绍

declare class VideoAttribute extends CommonMethod<VideoAttribute> {
  onStart(event: () => void): VideoAttribute;
  onPause(event: () => void): VideoAttribute;
  onFinish(event: () => void): VideoAttribute;
  onFullscreenChange(callback: (event?: { fullscreen: boolean }) => void): VideoAttribute;
  onPrepared(callback: (event?: { duration: number }) => void): VideoAttribute;
  onSeeking(callback: (event?: { time: number }) => void): VideoAttribute;
  onSeeked(callback: (event?: { time: number }) => void): VideoAttribute;
  onUpdate(callback: (event?: { time: number }) => void): VideoAttribute;
  onError(event: () => void): VideoAttribute;
}
1
2
3
4
5
6
7
8
9
10
11

📢: Video 组件不支持在预览器上使用,笔者手上也没有相关的开发版来演示 Video 的使用,等后续有条件了,笔者再补上样例和截图。

(adsbygoogle = window.adsbygoogle || []).push({});
请作者喝杯咖啡

津公网安备 12011402001367号

津ICP备2020008934号-2