How to enable automatic playback of the next episode in a video

#harmonyos #videocomponent #autoplayvideo #devecostudio

Read the original article：How to enable automatic playback of the next episode in a video

Requirement Description

How to achieve automatic playback of the next video after the previous one finishes.

Background Knowledge

The Video component is used to play video files and control their playback status, commonly used in short video and internal video list pages of applications.
The Swiper component provides the ability to display sliding carousels and can be used to implement short video switching functionality.

Implementation Steps

Overall architecture: Use Swiper to nest the Video component to achieve the main body of short video playback.
Automatic jump to the next video after video playback is completed: You can actively jump to the next page by calling the showNext() event of the Swiper component.
Automatic video playback after page switching: The Swiper component triggers the onChange callback when switching pages, and you can call the start() event of the Video component in this callback to start video playback.

Code Snippet

class VideoSet { // Create Video Class
  controller: VideoController = new VideoController();
  videoSrc: Resource = $rawfile('videoTest.mp4');
}
@Entry
@Component
struct Index {
  private swiperController: SwiperController = new SwiperController();
  private videoList: Array<VideoSet> = [];
  @State isShow: boolean = true; // Control the visibility of the pause button

  aboutToAppear(): void {
    for(let i = 0; i < 10; i++){
      this.videoList.push(new VideoSet()); // Create a video instance
    }
  }

  build() {
    Column() {
      Swiper(this.swiperController) {
        ForEach(this.videoList, (item: VideoSet, index: number) => {
          Stack(){
            Video({
              src: item.videoSrc,
              controller: item.controller
            })
              .height('100%')
              .width('100%')
              .controls(false) // Close the video control bar
              .onFinish(() => {
                this.swiperController.showNext(); // Jump to the next video
              })

            Row() {
              Column() {
                Text('@XXX')
                  .fontColor(Color.White)
              }
              .height('100%')
              .justifyContent(FlexAlign.End)
              .padding({
                bottom: 60
              })

              Column({space: 40}) {
                Image($r('app.media.love'))
                  .width(30)
                  .height(30)

                Image($r('app.media.comment'))
                  .width(30)
                  .height(30)

                Image($r('app.media.share'))
                  .width(30)
                  .height(30)
              }
              .height('100%')
              .justifyContent(FlexAlign.End)
              .padding({
                bottom: 150
              })
            }
            .width('100%')
            .height('100%')
            .justifyContent(FlexAlign.SpaceBetween)
            .padding({
              left: 20,
              right: 20
            })

            Image($r('app.media.play'))
              .width(30)
              .height(30)
              .visibility(this.isShow ? Visibility.Visible : Visibility.None) // Whether to display the pause icon
          }
          .onClick(() => { // Click to toggle video playback status
            if(this.isShow) {
              item.controller.start(); // Start playing
            }else {
              item.controller.pause(); // Pause playback
            }
            this.isShow = !this.isShow;
          })
        })
      }
      .width('100%')
      .height('100%')
      .indicator(false)
      .vertical(true)
      .loop(false)
      .autoPlay(false)
      .onChange((index: number) => { // Callback triggered during page transition
        this.videoList[index].controller.start(); // Start video playback
      })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

Limitations

This example supports API Version 17 Release and above.
This example supports HarmonyOS 5.0.5 Release SDK and above.
This example requires DevEco Studio 5.0.5 Release and above for compilation and execution.

DEV Community