HarmonyOS 鸿蒙Next续播

【背景知识】 AVPlayer集成了流媒体和本地资源解析，媒体资源解封装，视频解码和渲染功能，适用于对媒体资源进行端到端播放的场景，可直接播放mp4、mkv等格式的视频文件。 AVPlayer需要从XComponent组件获取并设置surfaceId属性，用于设置显示画面。surfaceId属性支持在initialized状态下设置，支持在prepared/playing/paused/completed/stopped状态下重新设置，重新设置时确保已经在initialized状态下进行设置，否则重新设置失败，重新设置后视频播放在新的窗口渲染。

【解决方案】 将AVPlayer放进全局Map中，AVPlayer指定相应组件的surfaceId即可实现跨页面视频播放无缝转场。具体操作步骤如下：

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

import { media } from '@kit.MediaKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { resourceManager } from '@kit.LocalizationKit';

export class GlobalContext {
  private static instance: GlobalContext;
  private _objects = new Map<string, media.AVPlayer>();

  private constructor() {
  }

  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);
  }
}

@Entry
@Component
struct Page1 {
  private surfaceID: string = '';
  private avPlayer: media.AVPlayer | undefined = undefined;
  private mXComponentController: XComponentController = new XComponentController();

  async setMediaAsset(rawFilePath: string) {
    if (this.avPlayer === undefined) {
      console.error(`set media asset, avplayer is undefined`);
      return;
    }
    let context = this.getUIContext().getHostContext()!;
    let resMgr = context.resourceManager;
    let rawFd: resourceManager.RawFileDescriptor | undefined = undefined;
    try {
      rawFd = resMgr.getRawFdSync(rawFilePath);
    } catch (err) {
      console.error(`get raw file description failed: ${err}`);
      return;
    }
    let avFd: media.AVFileDescriptor = { fd: rawFd.fd, offset: rawFd.offset, length: rawFd.length };
    this.avPlayer.fdSrc = avFd;
  }

  private setEventListening() {
    this.avPlayer?.on('error', async (err: BusinessError) => {
      console.error(`AVPlayer error: ${JSON.stringify(err)}`);
      try {
        await this.avPlayer?.reset();
      } catch (error) {
        console.error(`failed to invoke avplyer.reset: ${JSON.stringify(error)}`);
      }
    });
    this.avPlayer?.on('stateChange', async (state: media.AVPlayerState) => {
      console.info(`AVPlayer state change to ${state}`);
      if (this.avPlayer === undefined) {
        console.error('AVPlayer is undefined when state change');
        return;
      }
      switch (state) {
        case 'idle':
          break;
        case 'initialized':
          this.avPlayer.surfaceId = this.surfaceID;
          try {
            await this.avPlayer.prepare();
          } catch (error) {
            console.info(`failed to invoke avplayer.prepare: ${JSON.stringify(error)}`);
          }
          break;
        case 'prepared':
          try {
            await this.avPlayer.play();
          } catch (error) {
            console.info(`failed to invoke avplayer.play: ${JSON.stringify(error)}`);
          }
          break;
        case 'playing':
          break;
        case 'completed':
          break;
        case 'paused':
          break;
        case 'stopped':
          break;
        case 'released':
          break;
        case 'error':
          break;
        default:
          console.info(`AVPlayer change to unknown state: ${state}`);
          break;
      }
    });
  };

  onJumpClick(): void {
    this.getUIContext().getRouter().pushUrl({
      url: 'pages/Page2',
    }, (err) => {
      if (err) {
        console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);
        return;
      }
      console.info(`Invoke pushUrl succeeded`);
    });
  }

  build() {
    Column({ space: 20 }) {
      Text('Page1')
        .fontSize(30)
        .fontWeight(FontWeight.Bold);

      XComponent({
        type: XComponentType.SURFACE,
        controller: this.mXComponentController,
      })
        .width('100%')
        .aspectRatio(1)
        .renderFit(RenderFit.RESIZE_CONTAIN)
        .onLoad(async () => {
          this.surfaceID = this.mXComponentController.getXComponentSurfaceId();
          try {
            this.avPlayer = await media.createAVPlayer();
            GlobalContext.getContext().setObject('value', this.avPlayer);
            this.setEventListening();
          } catch (err) {
            console.error(`failed to initialize avplayer`);
            return;
          }
          await this.setMediaAsset('video.mp4');
        });

      Button('Jump Next')
        .padding(5)
        .fontSize(30)
        .onClick(() => {
          this.onJumpClick();
        });
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center);
  }
}

1. 在page2页面，通过Map<string, media.AVPlayer>获取单例AVPlayer，将page2页面的XComponent的SurfaceId设置给AVPlayer。

import { media } from '@kit.MediaKit';
import { GlobalContext } from './Page1';

@Entry
@Component
struct Page2 {
  private surfaceID: string = '';
  private avPlayer: media.AVPlayer | undefined = undefined;
  private mXComponentController: XComponentController = new XComponentController();

  build() {
    Column({ space: 20 }) {
      Text('Page2')
        .fontSize(30)
        .fontWeight(FontWeight.Bold);

      XComponent({
        type: XComponentType.SURFACE,
        controller: this.mXComponentController,
      })
        .width('100%')
        .aspectRatio(1)
        .renderFit(RenderFit.RESIZE_CONTAIN)
        .onLoad(() => {
          this.surfaceID = this.mXComponentController.getXComponentSurfaceId();
          this.avPlayer = GlobalContext.getContext().getObject('value');
          if (this.avPlayer) {
            this.avPlayer.surfaceId = this.surfaceID;
          }
        });
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center);
  }
}