HarmonyOS 如何在页面创建前，提前加载视频，在页面显示时立刻播放？

import { LazyDataSource } from './datasource'; 
import { BuilderNode, FrameNode, NodeController } from '@ohos.arkui.node'; 
import promptAction from '@ohos.promptAction'; 
 
@Observed 
class VideoMeta { 
  static _id = -1; 
  uid: string = ''; 
  src: string = ''; 
 
  constructor() { 
    this.uid = (VideoMeta._id + 1).toString(); 
    VideoMeta._id = VideoMeta._id + 1; 
    this.src = Math.random().toString(); 
  } 
} 
 
async function loadMoreVideoMeta(lazyDataSource: LazyDataSource<VideoMeta>) { 
  lazyDataSource.addData(new VideoMeta()) 
} 
 
@Entry 
@Component 
struct Index { 
  @State message: string = 'Hello World'; 
  @State dataSource: LazyDataSource<VideoMeta> = new LazyDataSource<VideoMeta>(); 
  private xcControllers: Array<PlayerNodeController> = []; 
  private cacheCount = 1; 
  @State xcPreloaded: number = 0; 
 
  aboutToAppear(): void { 
    loadMoreVideoMeta(this.dataSource); 
    for (let index = 0; index < this.cacheCount + 3; index++) { 
      this.xcControllers.push(new PlayerNodeController()) 
    } 
  } 
 
  build() { 
    Tabs() { 
      TabContent() { 
        Stack() { 
          Image($r('app.media.startIcon')) 
          if (this.xcPreloaded < this.cacheCount + 3) { 
            ForEach(this.xcControllers, (c: PlayerNodeController, index: number) => { 
              NodeContainer(c).onAppear(() => { 
                this.xcPreloaded += 1; 
              }).onDisAppear(() => { 
                if (index == 0) { 
                  c.p2ff(this.dataSource.getData(0)); 
                } 
                c.release(); 
              }).visibility(Visibility.None) 
            }, (c: PlayerNodeController) => c.playerContext.playerId) 
          } 
        }.backgroundColor(Color.Pink).width('100%').height('100%') 
      }.tabBar("首页") 
 
      TabContent() { 
        Swiper() { 
          LazyForEach(this.dataSource, (item: VideoMeta, index: number) => { 
            Stack() { 
              VideoComponent({ videoMeta: item }) 
            }.backgroundColor(Color.Green).width('100%').height('100%') 
            .onAppear(() => { 
              // 即将触底时提前增加数据 
              if (index + 1 >= this.dataSource.totalCount() - 1) { 
                for (let i = 0; i < 5; i++) { 
                  loadMoreVideoMeta(this.dataSource); 
                } 
              } 
            }) 
          }, (item: VideoMeta) => item.uid) 
        } 
        .cachedCount(this.cacheCount) 
        .loop(false) 
        .indicator(false) 
        .vertical(true) 
      }.tabBar("视频") 
    }.barPosition(BarPosition.End) 
  } 
} 
 
@Reusable 
@Component 
struct VideoComponent { 
  @State videoMeta: VideoMeta | undefined = undefined; 
  @State playerId: string | undefined = ""; 
  playerNodeController: PlayerNodeController | undefined; 
 
  aboutToAppear(): void { 
    console.log("VideoComponent aboutToAppear"); 
    this.playerNodeController = new PlayerNodeController(this.videoMeta); 
    this.playerId = this.playerNodeController.playerContext.playerId; 
    this.playerNodeController.p2ff(this.videoMeta!); 
  } 
 
  aboutToDisappear(): void { 
    console.log("VideoComponent aboutToDisappear") 
    this.playerNodeController!.release(); 
  } 
 
  aboutToReuse(params: Record<string, ESObject>): void { 
    this.videoMeta = params.videoMeta; 
    this.playerNodeController!.update(this.videoMeta!); 
    this.playerId = this.playerNodeController!.playerContext.playerId; 
    this.playerNodeController!.p2ff(this.videoMeta!); 
  } 
 
  aboutToRecycle(): void { 
    console.log("VideoComponent aboutToRecycle") 
    this.playerNodeController!.release(); 
  } 
 
  build() { 
    Stack() { 
      NodeContainer(this.playerNodeController) 
      Column({ space: 5 }) { 
        Text("playerId: " + this.playerId).fontColor(Color.Pink) 
        Text("videoId: " + this.videoMeta!.uid).fontColor(Color.Pink) 
      } 
    }.onVisibleAreaChange([0, 1], (isVisible: boolean, ratio: number) => { 
      if (isVisible && ratio > 0 && 
        this.playerNodeController!.playerContext.preparedVideoUid != this.videoMeta!.uid) { 
        this.playerNodeController!.p2ff(this.videoMeta!) 
      } 
      if (isVisible && ratio == 1) { 
        this.playerNodeController?.play(); 
      } 
    }) 
  } 
} 
 
class PlayerContext { 
  private static _id = -1; 
  playerId: string; 
  playerBuilderNode: BuilderNode<[PlayerContext]> | undefined; 
  xComponentController: XComponentController = new XComponentController(); 
  preparedVideoUid: string | undefined; 
 
  constructor() { 
    this.playerId = (PlayerContext._id + 1).toString(); 
    PlayerContext._id = PlayerContext._id + 1; 
  } 
} 
 
@Builder 
function xcBuilder(xcParams: PlayerContext) { 
  XComponent({ 
    id: xcParams.playerId, 
    type: XComponentType.SURFACE, 
    controller: xcParams.xComponentController 
  }) 
    .width('100%') 
    .height('100%') 
} 
 
let playerNodePool: Array<PlayerContext> = [] 
 
class PlayerNodeController extends NodeController { 
  public playerContext: PlayerContext; 
 
  constructor(videoMeta?: VideoMeta) { 
    super(); 
    const index = playerNodePool.findIndex((value: PlayerContext) => value.preparedVideoUid == videoMeta?.uid); 
    if (index >= 0) { 
      this.playerContext = playerNodePool[index]; 
      playerNodePool.splice(index, 1); 
    } else { 
      this.playerContext = playerNodePool.shift() ?? new PlayerContext(); 
    } 
  } 
 
  update(videoMeta: VideoMeta) { 
    const index = playerNodePool.findIndex((value: PlayerContext) => value.preparedVideoUid == videoMeta?.uid); 
    if (index >= 0) { 
      this.playerContext = playerNodePool[index]; 
      playerNodePool = playerNodePool.splice(index, 1); 
    } else { 
      this.playerContext = playerNodePool.shift() ?? new PlayerContext(); 
    } 
  } 
 
  release() { 
    playerNodePool.push(this.playerContext); 
  } 
 
  makeNode(uiContext: UIContext): FrameNode { 
    if (this.playerContext.playerBuilderNode == undefined) { 
      this.playerContext.playerBuilderNode = new BuilderNode(uiContext); 
      this.playerContext.playerBuilderNode.build(wrapBuilder(xcBuilder), this.playerContext); 
    } 
    return this.playerContext.playerBuilderNode!.getFrameNode()!; 
  } 
 
  async p2ff(videoMeta: VideoMeta) { 
    const surfaceId = this.playerContext.xComponentController.getXComponentSurfaceId(); 
    if (surfaceId != "" && this.playerContext.preparedVideoUid != videoMeta.uid) { 
      promptAction.showToast({ message: "p2ff: " + videoMeta.uid + " in player " + this.playerContext.playerId }) 
      setTimeout(() => { 
        // simulate actual p2ff 
        this.playerContext.preparedVideoUid = videoMeta.uid; 
      }, 200) 
    } 
  } 
  async play() { 
  } 
  async pause() { 
  } 
}