How to play video format in wearable device

Read the original article：How to play video format in wearable device

Context

The Video component is used to play a video and control its playback. It is usually used in video players and video list pages within applications. A video automatically plays once fully loaded. When the user clicks the video area, the video is paused and the playback progress bar is displayed. The user can drag the progress bar to the desired position.

Description

Video content is a core part of modern mobile applications, used in areas like education, media streaming, social platforms, advertising, and entertainment. HarmonyOS supports video playback within ArkTS-based applications through a built-in Video component. This enables developers to easily embed and control video playback using a declarative UI approach.

By integrating video into ArkTS apps, developers can deliver rich and engaging multimedia experiences. However, video playback also requires careful handling in terms of performance, resource access, and user controls.

Solution / Approach

// xxx.ets
@Entry
@Component
struct VideoGuide {
  @State videoSrc: Resource = $rawfile('video.mkv')
  @State previewUri: string = 'common/videoIcon.png'
  @State curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X
  @State isAutoPlay: boolean = false
  @State showControls: boolean = true
  @State sliderStartTime: string = ''
  @State currentTime: number = 0
  @State durationTime: number = 0
  @State durationStringTime: string = ''
  controller: VideoController = new VideoController()

  build() {
    Row() {
      Stack() {
        Video({
          src: this.videoSrc,
          previewUri: this.previewUri,
          currentProgressRate: this.curRate,
          controller: this.controller
        }).width('100%').height('100%')
          .controls(false)
          .autoPlay(true)
          .onPrepared((event) => {
            if (event) {
              this.durationTime = event.duration
            }
          })
          .onUpdate((event) => {
            if (event) {
              this.currentTime = event.time
            }
          })
        Row() {
          Text(JSON.stringify(this.currentTime) + 's')
          Slider({
            value: this.currentTime,
            min: 0,
            max: this.durationTime
          })
            .onChange((value: number, mode: SliderChangeMode) => {
              this.controller.setCurrentTime(value);
            })
            .width("60%")
          Text(JSON.stringify(this.durationTime) + 's')
        }
        .opacity(0.8)
        .width("100%").margin({top:'20%'}).justifyContent(FlexAlign.Center)
      }
      .width('100%')
    }
    .height('100%')
  }
}

Key Takeaways

• The Video component in ArkTS provides a straightforward and declarative way to embed video playback into HarmonyOS applications.
• It supports both local and remote video sources, enabling flexibility for use cases like streaming, tutorials, or media previews.
• Developers can utilize a VideoController to manage playback actions such as play, pause, seek, and stop, providing full user control over the video experience.
• The component can emit events such as onStart, onPause, onError, and onFinish, which allow developers to track and respond to playback states dynamically.
• UI responsiveness and layout adaptability are maintained, meaning the video can be scaled, positioned, or styled to match the overall design of the application.
• Performance considerations should be made, especially when streaming high-resolution content or running on devices with limited hardware resources.
• When accessing remote video files, always ensure network permissions are granted in the app’s configuration, and use efficient buffering strategies for smoother playback.

Written by Ataberk Celiktas