# 如何实现视频自动播放下一集

#### 问题现象

如何实现当前视频播放完之后自动播放下条视频。

#### 效果预览

#### 背景知识

*   Video组件用于播放视频文件并控制其播放状态，常用于短视频和应用内部视频的列表页面。
*   Swiper组件提供滑动轮播显示的能力，可以用于实现短视频切换功能。

#### 解决方案

实现思路如下：

1.  整体架构：使用Swiper嵌套Video组件实现短视频播放功能主体。
2.  视频播放完成后自动跳转下条视频：可以通过调用Swiper组件的showNext事件主动跳转下一页。
3.  页面切换后视频自动播放：Swiper组件切换页面时则会触发onChange回调，可以在该回调中调用Video组件的start事件开启视频播放。

完整示例代码如下：

```
class VideoClass { // 创建视频类
  controller: VideoController = new VideoController();
  videoSrc: Resource = $rawfile('videoTest.mp4');
}

@Entry
@Component
struct VideoAutomaticallyPlays {
  private swiperController: SwiperController = new SwiperController();
  private videoList: Array<VideoClass> = [];
  @State isShow: boolean = true; // 控制暂停按键的显隐
  @State lastShow: number = 0;

  aboutToAppear(): void {
    for (let i = 0; i < 10; i++) {
      this.videoList.push(new VideoClass()); // 创建视频实例
    }
  }

  build() {
    Column() {
      Swiper(this.swiperController) {
        ForEach(this.videoList, (item: VideoClass) => {
          Stack() {
            Video({
              src: item.videoSrc,
              controller: item.controller
            })
              .height('100%')
              .width('100%')
              .controls(false) // 关闭视频控制栏
              .onFinish(() => {
                this.swiperController.showNext(); // 跳转下个视频
              });
            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); // 是否显示暂停图标
          }
          .onClick(() => { // 点击切换视频播放状态
            if (this.isShow) {
              item.controller.start(); // 开始播放
            } else {
              item.controller.pause(); // 暂停播放
            }
            this.isShow = !this.isShow;
          });
        });
      }
      .width('100%')
      .height('100%')
      .indicator(false)
      .vertical(true)
      .loop(false)
      .autoPlay(false)
      .onChange((index: number) => { // 页面切换时触发的回调
        this.videoList[this.lastShow].controller.stop();
        this.videoList[index].controller.start(); // 启动视频播放
        this.lastShow = index;
        this.isShow = false;
      });
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center);
  }
}
```