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

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

【问题现象】

HarmonyOS中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%')
  }

运行效果：

点击放大


更多关于HarmonyOS鸿蒙Next中如何解决Web组件中的视频无法横屏全屏播放的问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于HarmonyOS鸿蒙Next中如何解决Web组件中的视频无法横屏全屏播放的问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，Web组件中的视频无法横屏全屏播放的问题解决方案

在HarmonyOS鸿蒙Next中，Web组件中的视频无法横屏全屏播放的问题可以通过以下步骤解决：

  1. 使用Web组件的onFullScreenEnter()和onFullScreenExit()方法监听进入和退出全屏模式事件。
  2. 在进入全屏事件中，调用window.setPreferredOrientation()方法将窗口方向设置为横屏。
  3. 在退出全屏事件中，调用window.setPreferredOrientation()方法将窗口方向设置为竖屏。

示例代码如下：

controller: web_webview.WebviewController = new web_webview.WebviewController();

private changeOrientation(isLandscape: boolean) {
  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://example.com/video.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%')
}

通过上述代码，Web组件中的视频可以在全屏时自动切换为横屏播放，退出全屏时恢复为竖屏。

回到顶部