Video

The <Video> component is used to play a video and control its playback.

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 must apply for the ohos.permission.INTERNET permission. For details about how to apply for the permission, see Declaring Permissions.

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

Defines a VideoController object to 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.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);
        });
      }
    }
  }
}