Video

The <Video> component provides a video player.

NOTE

This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.

Required Permissions

To use online videos, you need to add the ohos.permission.INTERNET permission to the corresponding abilities in the config.json or module.json file, whichever is appropriate.

"abilities":[
  {
    ...
    "permissions": ["ohos.permission.INTERNET"],
    ...
  }
]

Child Components

Not supported

APIs

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

Parameters

PlaybackSpeed⁸⁺

Attributes

Events

VideoController

A VideoController object can control one or more videos.

Objects to Import

controller: VideoController = new VideoController();

start

start(): void

Starts playback.

pause

pause(): void

Pauses playback.

stop

stop(): void

Stops playback.

setCurrentTime

setCurrentTime(value: number)

Sets the video playback position.

Parameters

requestFullscreen

requestFullscreen(value: boolean)

Requests full-screen mode.

Parameters

exitFullscreen

exitFullscreen()

Exits full-screen mode.

setCurrentTime⁸⁺

setCurrentTime(value: number, seekMode: SeekMode)

Sets the video playback position with the specified seek mode.

Parameters

SeekMode⁸⁺

Example

// xxx.ets
@Entry
@Component
struct VideoCreateComponent {
  @State srcs: Resource = $rawfile('video1');
  @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('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(() => {
            this.srcs = $rawfile('video2');
        });
        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);
        });
      }
    }
  }
}