How to Integrate VideoKit in HarmonyOS Next: A Step-by-Step Development Guide

Read the original article：How to Integrate VideoKit in HarmonyOS Next: A Step-by-Step Development Guide

Introduction

In this article, I’ll show you step by step how to integrate video playback with VideoKit into your HarmonyOS Next app. We’re going to take the name of the video that comes with page transitions and go through an example that gives the user a modern player interface.

What is VideoKit?

VideoKit provides an API that simplifies video playback within HarmonyOS. Lets you easily play, pause, and resume media files. It also includes useful structures for managing user interactions, such as VideoController.

1. Retrieving Video Source When Page Opens

When the user is redirected to the video playback page, we determine the video source by retrieving the video name from the redirect parameter. In this example, I placed the videos inside the resources/raw directory.

aboutToAppear() {
  const params = router.getParams() as RouteParams;
  if (params.videoName) {
    this.videoSource = $rawfile(params.videoName);
    console.info('Playing video:', params.videoName);
  }
}

This allows us to dynamically process video names from different pages.

2. Creating the Video Component

The video component is created with the Video() function and the src and controller parameters are given to it:

Video({
  src: this.videoSource,
  controller: this.controller
})
  .width('100%')
  .controls(true)
  .autoPlay(true)
  .onClick(() => {
    this.togglePlayPause();
  })

autoPlay(true): Automatically starts when the page opens.
controls(true): Shows the user interface controls.
onClick(): Play/pause is done when the video is clicked.

3. User Interaction: Play and Pause

The togglePlayPause function is used to play/pause the video when the user clicks on it:

togglePlayPause() {
  if (this.isPlaying) {
    this.controller.pause();
    this.isPlaying = false;
  } else {
    this.controller.start();
    this.isPlaying = true;
  }
}

Full Page Code

Below you can see the entire page code. Here is an example that starts the video name that comes up on the page:


import { router } from '@kit.ArkUI';

@Entry
@Component
export struct PlayVideoPage {
  @State message: string = 'Play Video Page';
  @State isPlaying: boolean = true;
  @BuilderParam videoSource: Resource;

  controller: VideoController = new VideoController();

  aboutToAppear() {
    const params = router.getParams() as RouteParams;
    if (params.videoName) {
      this.videoSource = $rawfile(params.videoName);
      console.info('Playing video:', params.videoName);
    }
  }

  build() {
    Column() {
      Stack() {
        Video({
          src: this.videoSource,
          controller: this.controller
        })
          .width('100%')
          .controls(true)
          .autoPlay(true)
          .onClick(() => {
            this.togglePlayPause();
          })

        Image($r('app.media.back_icon'))
          .width(35)
          .height(35)
          .position({ top: 10, left: 10 })
          .onClick(() => {
            router.back()
          })
      }
    }
    .backgroundColor(Color.Black)
    .height('100%')
    .width('100%')
  }

  togglePlayPause() {
    if (this.isPlaying) {
      this.controller.pause();
      this.isPlaying = false;
    } else {
      this.controller.start();
      this.isPlaying = true;
    }
  }
}

interface RouteParams {
  videoName: string;
}

Conclusion

Developing video playback functionality with HarmonyOS Next is a very simple and effective process. In this article, we have learned step by step how to develop a user-friendly video player interface using the VideoKit API. Especially, routing dynamic video sources and controlling them with user interaction is very important for real-world applications.

You can also develop this structure and bring your own media player application or video content project to life.