HarmonyOS NEXT开发实战：视频全屏切换案例

介绍

本示例介绍了@ohos.multimedia.media组件和@ohos.window接口实现媒体全屏的功能。 该场景多用于首页瀑布流媒体播放等。

效果图预览

使用说明：

• 点击全屏按钮，横屏媒体窗口。
• 点击恢复窗口按钮，恢复媒体窗口。

实现步骤

1. 初始化@ohos.multimedia.media的AVPlayer。

async Init(): Promise {
  await this.release();
  const context = getContext(this);
  // 获取fdSrc用于注册AVPlayer
  context.resourceManager.getRawFd(this.fileName).then(async (value: resourceManager.RawFileDescriptor) => {
    this.avPlayer = await media.createAVPlayer();
    this.isCreate = true;
    this.setSourceInfo(); // 视频信息上报函数
    this.setStateChangeCallback(); // 状态机上报回调函数
    this.avPlayer.fdSrc = {
      fd: value.fd,
      offset: value.offset,
      length: value.length
    };
  });
}

1. 当AVPlayer初始化完毕进入initialized状态时，将XComponent和AVPlayer通过surfaceId绑定，这样可以在XComponent组件内实现视频播放功能。比起Video组件，AVPlayer可以更方便自定义全屏动画效果。

// TODO 知识点：XComponent和AVPlayer通过surfaceId绑定
setSurfaceID(): void {
  logger.info('play video: surfaceID is:' + this.surfaceID);
  this.avPlayer.surfaceId = this.surfaceID;
}