关于使用Video组件实现在列表List组件中滑动到可见区域自动播放视频的问题

import { TreeSet } from '@kit.ArkTS'  
  
@Observed  
class ClassA {  
  public item: string = ""  
  public status: number = 0;  
  
  constructor(item: string, status: number) {  
    this.item = item;  
    this.status = status;  
  }  
}  
  
  
@Entry  
@Component  
struct Index {  
  @State feedList: ClassA[] = []  
  visibleItems: TreeSet<Number> = new TreeSet()  
  scroller: ListScroller = new ListScroller()  
  
  aboutToAppear(): void {  
    for (let i = 0; i < 10; i++) {  
      this.feedList.push(new ClassA("" + i, 0))  
    }  
  }  
  
  stopPlayWithOutTop() {  
    this.visibleItems.forEach((value: number) => {  
      if (this.visibleItems.getFirstValue() !== value && this.feedList[value].status == 1) {  
        this.feedList[value].status = 0  
      }  
    })  
  }  
  
  startPlayTop() {  
    this.feedList[Number(this.visibleItems.getFirstValue())].status = 1  
  }  
  
  play() {  
    this.stopPlayWithOutTop()  
    this.startPlayTop()  
  }  
  @Builder  
  private getListView() {  
    List({ scroller: this.scroller }) {  
      ForEach(this.feedList, (item: ClassA, index: number) => {  
        ListItem() {  
          CardPool(item, index)  
        }.onVisibleAreaChange([0, 0.5, 1], (isVisible: boolean, current: number) => {  
          if (isVisible && current > 0.5 && index != 1 && index != 2) {  
            this.visibleItems.add(index)  
            this.play()  
            console.log("xxx:", index, "显示触发", "正在播放：", this.visibleItems.getFirstValue(), "当前set数据量：", this.visibleItems.length)  
          } else if (!isVisible && current <= 0.5 && this.visibleItems.has(index)) {  
            this.feedList[index].status = 0  
            this.visibleItems.remove(index)  
            this.play()  
            console.log("xxx:", index, "隐藏触发", "正在播放：", this.visibleItems.getFirstValue(), "当前set数据量：", this.visibleItems.length)  
          }  
        })  
      })  
    }  
    .onScrollIndex((start: number, end: number, center: number) => {  
      console.log(`-----start:${start},end: ${end},center: ${center}`)  
    })  
    .divider({ strokeWidth: 1, color: 0x222222 })  
    .edgeEffect(EdgeEffect.None)  
  }  
  
  build() {  
    Column() {  
      this.getListView()  
    }.width("100%").height("100%")  
  }  
}  
@Builder  
function CardPool(item: ClassA, index: number) {  
  if (index == 0 || index == 5 || index == 6) {  
    card1(`第 ${index} 条`, item)  
  } else if (index == 4 || index == 8) {  
    card3(`第 ${index} 条`, item)  
  } else if (index == 3) {  
    card4(`第 ${index} 条`, item)  
  } else {  
    card2(`第 ${index} 条`)  
  }  
}  
  
@Builder  
function card1(item: string, playState: ClassA) {  
  Column({ space: 10 }) {  
    Text(item).width('100%')  
    Stack() {  
      VideoView({ videoId: item, videoHeight: 200, playState: playState })  
    }.width('100%')  
  }.padding(15)  
}  
  
@Builder  
function card2(item: string) {  
  Column({ space: 10 }) {  
    Text(item).width('100%')  
    Text('测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试')  
      .width('100%')  
  }.padding(15)  
}  
  
@Builder  
function card3(item: string, playState: ClassA) {  
  Column({ space: 10 }) {  
    Text(item).width('100%')  
    Stack() {  
      VideoView({ videoId: item, videoHeight: 300, playState: playState })  
    }.width(200)  
  }.padding(15).alignItems(HorizontalAlign.Start)  
}  
  
@Builder  
function card4(item: string, playState: ClassA) {  
  List() {  
    ListItem() {  
      card1(`${item} -- 1`, playState)  
    }  
  
    ListItem() {  
      card2(`${item} -- 2`)  
    }  
  }  
}  
@Component  
struct VideoView {  
  videoId: string = ''  
  videoHeight: number = 0  
  @State videoColor: ResourceColor = Color.Red  
  @ObjectLink @Watch("playStateWatch") playState: ClassA  
  
  playStateWatch() {  
    console.log("xxx:" + this.playState)  
    if (this.playState) {  
      VideoHelper.getInstance().registerPlayIndex(this.videoId)  
    } else {  
      VideoHelper.getInstance().unregisterPlayIndex(this.videoId)  
    }  
  }  
  
  build() {  
    Stack() {  
  
    }  
    .width('100%')  
    .height(this.videoHeight)  
    .borderRadius(8)  
    .backgroundColor(this.playState.status == 1 ? Color.Red : Color.Green)  
  }  
}  
  
class VideoHelper {  
  playingId: string = ''  
  private static INSTANCE: VideoHelper = new VideoHelper();  
  
  public static getInstance(): VideoHelper {  
    if (VideoHelper.INSTANCE == null) {  
      VideoHelper.INSTANCE = new VideoHelper();  
    }  
    return VideoHelper.INSTANCE;  
  }  
  
  registerPlayIndex(id: string): boolean {  
    if (this.playingId && this.playingId !== id) {  
      return false  
    }  
  
    this.playingId = id  
    return true  
  }  
  
  unregisterPlayIndex(id: string) {  
    if (this.playingId === id) {  
      this.playingId = ''  
    }  
  }  
}  
if (isVisible && current > 0.5 && index != 1 && index != 2) {  
//这里的index!=1&&index!=2的条件是模拟数据中不存在视频的情况