Arkui video player component

Adding Internet Permissions and Using the Video Component

Adding Internet Permissions

To enable internet access for your application, you need to add the following code to your module.json5 file:

"requestPermissions": [
  {
    "name": "ohos.permission.INTERNET"
  }
]

This step is essential if your application needs to access online resources. However, if you are only playing local videos, this step is optional. For the sake of completeness, we will include it here.

Using the Video Component

To play videos in your application, you can use the video component. Below is a detailed explanation of the parameters for the video component:

Parameter Name	Parameter Type	Required
src	string or Resource	No
currentProgressRate	number or string	No
previewUri	string or PixelMap or Resource	No
controller	VideoController	No

Other attributes:

• .muted(false): Whether the video is muted. Default value: false.
• .controls(true): Whether to display the control bar. Default value: true.
• .autoPlay(false): Whether to start playing automatically. Default value: false.
• .loop(false): Whether to loop playback. Default value: false.
• .objectFit(ImageFit.Cover): How the video is displayed. Default value: Cover.

Here is an example of how to use the video component in your code:

@Entry
@Component
struct Index {
  @Styles
  customMargin() {
    .margin({ left: 20, right: 20 })
  }

  @State message: string = 'Hello World'
  private controller: VideoController = new VideoController()

  build() {
    Row() {
      Column() {
        Video({
          src: $rawfile('video1.mp4'),
          previewUri: $r('app.media.image3'),
          controller: this.controller
        })
          .muted(false) // Whether the video is muted. Default value: false
          .controls(true) // Display the control bar
          .autoPlay(false) // Start playback manually
          .loop(false) // Disable loop playback
          .objectFit(ImageFit.Cover) // Set video display mode. Default value: Cover
          .customMargin() // Style
          .height(200) // Height
      }
      .width('100%')
    }
    .height('100%')
  }
}