短视频开启自动连播失败
===========

#### 问题现象

进入短视频播放页，设置自动播放，播完一集后跳转下一集，仍需要手动点击才能播放。

#### 背景知识

*   [Video组件](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-common-components-video-player)用于播放视频文件并控制其播放状态，常用于短视频和应用内部视频的列表页面。
*   [Swiper组件](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-layout-development-create-looping)提供滑动轮播显示的能力，可以用于实现短视频切换功能。

#### 问题定位

1.  使用DevEco Testing中的UIViewer工具，查看短视频播放页的布局：
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/ea/v3/biRzkMNtTNWLDFDwmO0pZg/zh-cn_image_0000002628394268.png?HW-CC-KV=V1&HW-CC-Date=20260709T133908Z&HW-CC-Expire=86400&HW-CC-Sign=7961F7A92EFE053B7708E45B764D20DCB0D4319AB43C8D80649B56F89165EA84 "点击放大")
    
    发现页面使用Video、Swiper组件搭配实现短视频播放功能，不涉及与H5页面的交互。
    
2.  可以通过调用Swiper组件的showNext()事件主动跳转下一页，而页面切换时则会触发[onChange](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-swiper#onchange)、[onAnimationStart](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-swiper#onanimationstart9)、[onAnimationEnd](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-swiper#onanimationend9)这三个回调。排查代码，查看是否有在Swiper的页面切换回调里设置视频播放。

#### 分析结论

在上个视频播放完后，只调用了showNext()跳转到下个视频，但没有调用Video组件的start()事件开始视频播放，导致切换下个视频后仍需手动点击开始。

#### 修改建议

首个视频播放完后，调用showNext()跳转下个视频，同时在Swiper的页面切换回调里调用Video组件的start()事件播放视频。以onChange事件为例：

class VideoSet {
  controller: VideoController \= new VideoController();
  videoSrc: Resource \= $rawfile('videoTest.mp4'); _//_ _需替换为实际资源_
}

@Entry
@Component
struct VideoListAutoPlayPage {
  private swiperController: SwiperController \= new SwiperController();
  private videoList: Array<VideoSet\> = \[\];
  @State isShow: boolean \= true;

  aboutToAppear(): void {
    for (let i \= 0; i < 10; i++) {
      this.videoList.push(new VideoSet());
    }
  }

  build() {
    Column() {
      Swiper(this.swiperController) {
        ForEach(this.videoList, (item: VideoSet) \=\> {
          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\[index\].controller.start(); _// 启动视频播放_
      });
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center);
  }
}