HarmonyOS 鸿蒙Next 跨页面视频播放场景无法实现无缝转场如何解决

【问题现象】

在跨页面视频播放场景下，更换XComponent 后新的surfaceId无法和已有AVPlayer实例绑定，导致多个XComponent无法公用一个AVPlayer实现无缝转场。

【背景知识】

录像(ArkTS) 录像实现方案(ArkTS) 【解决方案】

可以通过动态切换surface，实现跨页面视频播放无缝转场。具体操作步骤如下：

（1）在page1页面，通过GlobalContext将AVPlayer当做全局单例变量放到Map<string, media.AVPlayer>里面。

（2）通过router跳转到page2页面，通过Map<string, media.AVPlayer>获取单例AVPlayer，将page2页面的Xcomponent的SurfaceId设置给AVPlayer。

代码示例如下：

import { media } from '@kit.MediaKit';
export class GlobalContext {
    private constructor() {}
    private static instance: GlobalContext;
    private _objects = new Map<string, media.AVPlayer>();

    public static getContext(): GlobalContext {
        if (!GlobalContext.instance) {
            GlobalContext.instance = new GlobalContext();
        }
        return GlobalContext.instance;
    }

    getObject(value: string): media.AVPlayer | undefined {
        return this._objects.get(value);
    }

    setObject(key: string, objectClass: media.AVPlayer): void {
        this._objects.set(key, objectClass);
    }
}

onJumpClick(): void {
    router.replaceUrl({
        url: 'pages/player' // 目标url
    }, (err) => {
        if (err) {
            console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);
            return;
        }
        console.info('Invoke pushUrl succeeded.');
    })
}

（3）将AVPlayer放进全局map中，AVPlayer指定相应组件的surfaceId即可完成播放无缝切换。

代码示例如下：

//将AVPlayer放进全局map
if (this.player) {
    GlobalContext.getContext().setObject('value', this.player);
}

.onLoad(() => {
    this.mXComponentController.setXComponentSurfaceSize({ surfaceWidth: this.xComponentWidth, surfaceHeight: this.xComponentHeight });
    this.surfaceID=this.mXComponentController.getXComponentSurfaceId();
    console.info('onLoad '+this.surfaceID)

    //取出全局map里面的AVPlayer
    avPlayer=GlobalContext.getContext().getObject('value');
    if (avPlayer) {
        avPlayer.surfaceId=this.surfaceID;
    }
})