HarmonyOS鸿蒙Next中如何实现Swiper组件嵌套Video组件每次切换swiper都自动重新播放视频

我使用链接里的方案一，给Video对象设置了previewUri属性，能够显示预览图片。烦请在真机上再验证一下呢？

我的代码：

{
    "src": "[https://www.example.com/example.mp4](https://www.example.com/example.mp4)",
    "previewUri": "$r('app.media.app_icon')",
    "controller": this.controllerList[item]
}

import { Route } from “@hzw/zrouter”; import { RouterConstants } from “…/common/utils/RouterConst”;

interface VideoItem { id: number; src: Resource; preview: Resource; controller: VideoController; }

@Route({ name: RouterConstants.HOME_PAGE }) @ComponentV2 export struct HomePage { @Event onFullScreen: () => void = () => {}; @Local isAutoPlay: boolean = true; @Local showControls: boolean = false;

// 当前索引 @Local currentIndex: number = 0;

// 保存上一个索引 @Local previousIndex: number = 0;

// 使用数组存储所有视频资源（每个视频有自己的控制器） private videoList: VideoItem[] = [ { id: 1, src: $rawfile(‘demo1.mp4’), preview: $rawfile(‘demo1_preview.png’), controller: new VideoController() }, { id: 2, src: $rawfile(‘demo2.mp4’), preview: $rawfile(‘demo2_preview.png’), controller: new VideoController() }, { id: 3, src: $rawfile(‘demo3.mp4’), preview: $rawfile(‘demo3_preview.png’), controller: new VideoController() }, { id: 4, src: $rawfile(‘demo4.mp4’), preview: $rawfile(‘demo4_preview.png’), controller: new VideoController() }, ];

build() { Column() { Swiper() { ForEach(this.videoList, (item: VideoItem, index: number) => { Video({ src: item.src, previewUri: item.preview, controller: item.controller }) .autoPlay(index === 0 && this.isAutoPlay) // 只有首个视频自动播放 .controls(this.showControls) .width(‘100%’) .height(‘100%’) .onStart(() => { console.info(视频${item.id}开始播放); }) .onFinish(() => { console.info(视频${item.id}播放完成); }) }) } .loop(true) .indicator(false) .onChange((index: number) => { console.info(切换到视频${index + 1});

    // 记录上一个索引
    this.previousIndex = this.currentIndex;

    // 重置上一个视频
    this.videoList[this.previousIndex].controller.pause();

    // 更新当前索引
    this.currentIndex = index;

    // 获取当前视频的控制器
    const currentController = this.videoList[index].controller;
    currentController.start();
  })
}
.width('100%')
.height('100%')
.gesture(
  GestureGroup(GestureMode.Exclusive,
    LongPressGesture()
      .onAction(() => {
        console.info('触发长按 - 但不执行点击操作');
      }),
    TapGesture({ count: 1 })
      .onAction(() => {
        if (this.onFullScreen) {
          this.onFullScreen();
        }
      }),
    PanGesture()
      .onActionStart((event: GestureEvent) => {})
      .onActionUpdate((event: GestureEvent) => {})
      .onActionEnd(() => {})
  )
)

}

// 组件销毁前停止所有视频 aboutToDisappear() { this.videoList.forEach((item) => { item.controller.stop(); }); } }

首次加载的时候会出现黑屏的情况，切换的时候也是这样，当全部展示一遍后就不会有黑屏问题了

在HarmonyOS鸿蒙Next中，可以通过在Swiper组件的onChange事件中调用Video组件的start方法来实现每次切换Swiper时自动重新播放视频。具体实现如下：在Swiper的onChange事件中获取当前Video组件的引用，并调用其start方法。确保Video组件的autoplay属性设置为false，以避免自动播放干扰。这样，每次切换Swiper时，Video组件都会重新开始播放。