HarmonyOS 鸿蒙Next中web网页播放视频 点击全屏播放 切换到横屏时，视频只显示了一半

HarmonyOS 鸿蒙Next中web网页播放视频 点击全屏播放 切换到横屏时，视频只显示了一半 web网页播放视频 点击全屏播放 切换到横屏时，视频只显示了一半，该怎么处理

2 回复

在Web组件全屏事件中调用窗口方向设置接口：

Web({ src: '网页地址', controller: this.controller })

  .onFullScreenEnter(() => {

    window.getLastWindow(getContext(this)).then((lastWindow) => {

      lastWindow.setPreferredOrientation(window.Orientation.LANDSCAPE);

    });

  })

  .onFullScreenExit(() => {

    window.getLastWindow(getContext(this)).then((lastWindow) => {

      lastWindow.setPreferredOrientation(window.Orientation.PORTRAIT);

    });

  })

更多关于HarmonyOS 鸿蒙Next中web网页播放视频 点击全屏播放 切换到横屏时，视频只显示了一半的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中遇到网页视频全屏横屏显示异常的问题，通常与WebView的全屏适配机制有关。可通过以下方式排查：

  1. 检查WebView配置：确保在WebView中启用了硬件加速和全屏支持：

    webView.getSettings().setUseWideViewPort(true);
webView.getSettings().setLoadWithOverviewMode(true);

  2. 视频尺寸适配：确认视频源的分辨率比例与设备横屏比例匹配。可通过CSS强制视频容器自适应：

    video {
  width: 100vw;
  height: 100vh;
  object-fit: contain;
}

  3. 全屏事件监听：在WebView中重写全屏回调，主动触发横屏：

    webView.setWebChromeClient(new WebChromeClient() {
  @Override
  public void onShowCustomView(View view, CustomViewCallback callback) {
    // 强制横屏
    setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
  }
});

  4. 系统权限检查：在配置文件中声明屏幕方向权限：

    <uses-permission android:name="android.permission.CHANGE_CONFIGURATION" />

建议优先通过CSS调整视频渲染模式，若问题仍存在，可结合系统横屏事件同步调整WebView布局参数。

回到顶部