HarmonyOS鸿蒙Next中设置Web容器高度自适应后,全屏播放视频显示异常问题

开发者您好，请您参考以下方案，如果未能解决您的问题，请您再反馈：

非全屏/退出全屏状态下页面设置自适应，可以设置一个layoutModeValue变量用来更改layoutMode属性，当非全屏/退出全屏时设置layoutModeValue值为WebLayoutMode.FIT_CONTENT，当全屏时设置layoutModeValue值为WebLayoutMode.NONE，这样全屏后会根据视频的固有尺寸来决定其显示高度。示例如下：

import { webview } from '@kit.ArkWeb';
import { AppUtil, ResUtil } from '@pura/harmony-utils';

@Entry
@Component
struct Index {
  private scroller: Scroller = new Scroller();
  private webViewController: webview.WebviewController = new webview.WebviewController();
  private fullScreenHandler?: FullScreenExitHandler;
  @State layoutModeValue:WebLayoutMode = WebLayoutMode.FIT_CONTENT
  @State isFullScreen: boolean = false;

  onBackPress(): boolean | void {
    if (this.isFullScreen) {
      this.fullScreenHandler?.exitFullScreen();
      this.layoutModeValue = WebLayoutMode.FIT_CONTENT
      return true;
    }
    return false;
  }

  // 加载文章数据
  loadNewsData() {
    // 读取html模板
    let htmlCode = ResUtil.getRawFileContentStrSync('html/html_standard_code.html');

    // 替换标题、来源、发布日期等
    htmlCode = htmlCode.replace('_{title}_', '测试带视频富文本');
    htmlCode = htmlCode.replace('_{source}_', '**日报');
    htmlCode = htmlCode.replace('_{publishTime}_', '2026-03-17 09:05');

    this.webViewController.loadData(htmlCode, "text/html", "UTF-8", "data");
  }

  build() {

    Column() {
      Column() {
        Scroll(this.scroller) {
          Column() {
            // 原生组件
            Text('Native')
              .fontSize(28)
              .fontColor('#FF0F0F')
              .height(100)
              .width('100%')
              .backgroundColor('#f89f0f')
              .textAlign(TextAlign.Center)

            // Web组件
            Web({
              controller: this.webViewController,
              src: "",
              renderMode: RenderMode.SYNC_RENDER, // 设置为同步渲染模式
            })
              .width('100%')
              .layoutMode(this.layoutModeValue) // 动态设置Web组件大小自适应
              .overScrollMode(OverScrollMode.NEVER) // 设置过滚动模式为关闭状态
              .geolocationAccess(false)
              .zoomAccess(false)
              .fileAccess(true)
              .javaScriptAccess(true)
              .domStorageAccess(true)
              .mixedMode(MixedMode.All)
              .verticalScrollBarAccess(false)
              .onControllerAttached(() => {
                // 加载html
                this.loadNewsData()
              })
              .onFullScreenEnter((event) => {
                this.fullScreenHandler = event.handler;
                //this.changeOrientation(window.Orientation.LANDSCAPE);
                this.isFullScreen = true;
                this.layoutModeValue = WebLayoutMode.NONE
              })
              .onFullScreenExit(() => {
                //this.changeOrientation(window.Orientation.PORTRAIT);
                this.isFullScreen = false;
                this.layoutModeValue = WebLayoutMode.FIT_CONTENT
              })

            // 原生组件
            Text('Native')
              .fontSize(28)
              .fontColor('#FF0F0F')
              .height(150)
              .width('100%')
              .backgroundColor('#f89f0f')
              .textAlign(TextAlign.Center)
          }
        }
      }
      .width('100%')
      .layoutWeight(1)
    }
    .width('100%')
    .height('100%')
  }
}