HarmonyOS 鸿蒙Next 如何解决Web组件中的视频无法横屏全屏播放的问题

【问题现象】

HarmonyOS中Web组件加载视频播放的网页，点击全屏播放图标，无法横屏全屏播放。问题现象如下：

【背景知识】

• Web组件加载网页及进入全屏模式监听。
• 控制窗口方向，实现横竖屏控制横竖屏控制。

【解决方案】

点击全屏按钮Web组件进入全屏模式时，窗口的横竖屏状态不会主动发生变化，因此需要主动设置窗口方向为横屏。需要监听Web组件进入和退出全屏模式事件，在进入全屏模式时，设置窗口方向为横屏；在退出全屏模式时，设置窗口方向为竖屏。

（1）通过Web组件的onFullScreenEnter() 和 onFullScreenExit()方法，监听Web组件进入和退出全屏模式事件。

代码示例如下：

Web({ src: 'xxx', controller: this.controller })
        .onFullScreenEnter((event) => {
          console.log("onFullScreenEnter...")
        })
        .onFullScreenExit(() => {
          console.log("onFullScreenExit...")
        })

（2）通过Window提供的setPreferredOrientation()方法设置横竖屏。在进入全屏事件监听中，设置窗口方向为横屏，退出全面事件监听中，这种窗口方向为竖屏。

代码示例如下：

// 改变设备横竖屏状态函数
  private changeOrientation(isLandscape: boolean) {
    // 获取UIAbility实例的上下文信息
    let context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext;
    // 调用该接口手动改变设备横竖屏状态
    window.getLastWindow(context).then((lastWindow) => {
      lastWindow.setPreferredOrientation(isLandscape ? window.Orientation.LANDSCAPE : window.Orientation.PORTRAIT)
    });
  }

最终代码示例如下：

controller: web_webview.WebviewController = new web_webview.WebviewController();
// 改变设备横竖屏状态函数
  private changeOrientation(isLandscape: boolean) {
    // 获取UIAbility实例的上下文信息
    let context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext;
    // 调用该接口手动改变设备横竖屏状态
    window.getLastWindow(context).then((lastWindow) => {
      lastWindow.setPreferredOrientation(isLandscape ? window.Orientation.LANDSCAPE : window.Orientation.PORTRAIT)
    });
  }

  build() {
    Column() {
      Web({ src: 'https://consumer.huawei.com/content/dam/huawei-cbg-site/cn/mkt/harmonyos-next/videos/1025/harmonyos-next-pv-video-popup.mp4', controller: this.controller })
        .javaScriptAccess(true)
        .domStorageAccess(true)
        .onFullScreenEnter((event) => {
          console.log("onFullScreenEnter...")
          this.changeOrientation(true);
        })
        .onFullScreenExit(() => {
          console.log("onFullScreenExit...")
          this.changeOrientation(false);
        })
    }.width('100%').height('100%')
  }

运行效果：