【解决方案】

AVPlayer只是把Surface画布绑定到AVPlayer上，不提供旋转、全屏接口，这些都要应用自己操作Surface全屏、旋转来实现，AVPlayer只是一个不带界面的播放器。所以实现全屏需要通过操作Surface实现全屏、旋转。 在点击全屏按钮时，隐藏其它ListItem，仅显示选中项；点击横屏按钮时，设置窗口方向，并设置XComponent组件宽高铺满屏幕，实现全屏播放效果。

1.初始化视频列表数据源，示例代码如下：

private data: myVideoSourceDate = new myVideoSourceDate([]);
aboutToAppear(): void {
  let list: VideoSource[] = [
    new VideoSource('videoTest1', 'videoTest1.mp4'),
    new VideoSource('videoTest2', 'videoTest2.mp4'),
    new VideoSource('videoTest3', 'videoTest3.mp4'),
    new VideoSource('videoTest4', 'videoTest4.mp4')
  ];

  this.data = new myVideoSourceDate(list);
}

2.List + LazyForEach组件渲染视频列表，示例代码如下：

build() {
  // 通过显隐控制控制其他listItem是否展示
  Column() {
    Text(this.item.text)
      .visibility(this.isLayoutFullScreen === false ? Visibility.Visible : Visibility.None)
    Stack() {
      XComponent({ id: 'video_player_id', type: XComponentType.SURFACE, controller: this.mXComponentController })
        .onLoad(() => {
          this.player = new AVPlayerDemo();
          this.player.setSurfaceID(this.mXComponentController.getXComponentSurfaceId());
        })
        .height(this.isLayoutFullScreen ? (this.isLandScape ? '100%' : 200) : '100%')
      // 视频按钮布局
      // ...
    }
    .backgroundColor(Color.Black)
    .height(this.isLayoutFullScreen ? '100%' : 200)
  }
  .onVisibleAreaChange([0.2, 1.0], async (isVisible: boolean, currentRatio: number) => {
    if (!isVisible && currentRatio < 0.2) {
      if (this.player && isPlaying.length !== 0 && this.player === isPlaying[0]) {
        console.info('onVisibleAreaChange')
        this.player.release();
        isPlaying[0].release();
        isPlaying.pop();
      }
    }
  })
  .width('100%')
}

3.窗口方向（横屏）、窗口沉浸式设置，示例代码如下：

// 设置窗口方向
setR(orientation: number) {
  window.getLastWindow(this.getUIContext().getHostContext()).then((win) => {
    win.setPreferredOrientation(orientation).then((data) => {
      console.info('setWindowOrientation: ' + orientation + ' Succeeded. Data: ' + JSON.stringify(data));
    }).catch((err: string) => {
      console.info('setWindowOrientation: Failed. Cause: ' + JSON.stringify(err));
    });
  }).catch((err: string) => {
    console.info('setWindowOrientation： Failed to obtain the top window. Cause: ' + JSON.stringify(err));
  });
}

// 设置沉浸式窗口
setFullScreen(isLayoutFullScreen: boolean) {
  window.getLastWindow(this.getUIContext().getHostContext()).then((win) => {
    win.setWindowLayoutFullScreen(isLayoutFullScreen);
  }).catch((err: string) => {
    console.info('setWindowOrientation： Failed to obtain the top window. Cause: ' + JSON.stringify(err));
  });
}

4.添加全屏、退出全屏、横屏等按钮，示例代码如下：

Button('点击全屏')
  .onClick(() => {
    this.fangDaIndex = this.index;
    this.isLayoutFullScreen = true;
    this.setFullScreen(this.isLayoutFullScreen);
  })
  .backgroundColor(this.bkColor)

Button('退出全屏')
  .onClick(() => {
    this.setR(1);
    this.isLayoutFullScreen = false;
    this.isLandScape = false;
    this.setFullScreen(this.isLayoutFullScreen);
  })
  .backgroundColor(this.bkColor)

Button('横屏')
  .onClick(() => {
    this.fangDaIndex = this.index;
    this.setR(4);
    this.isLandScape = true;
    this.isLayoutFullScreen = true;
    this.setFullScreen(this.isLayoutFullScreen);
  })
  .backgroundColor(this.bkColor)

【背景知识】

• 使用AVPlayer播放视频(ArkTS)：实现端到端播放原始媒体资源。
• 窗口沉浸式能力：在看视频、玩游戏等场景下，隐藏状态栏、导航栏等不必要的系统窗口，从而获得更佳的沉浸式体验。
• 窗口方向：设置主窗口的方向。