输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
文档管理中心

HarmonyOS

输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
FAQ
FAQ应用框架开发Web框架Web开发（ArkWeb）Web加载视频布局异常

Web加载视频布局异常

更新时间: 2026-06-26 09:07
本文导读

问题现象

加载视频完成前下半部分会被遮挡，加载完成再展示全部。

背景知识

  • iframe标签：用于在网页中嵌入另一个网页或资源。其默认行为是根据内容自动调整大小，除非设置了固定宽高或通过CSS限制了尺寸。
  • video标签：HTML5中用于嵌入视频内容的标签，支持自动播放、全屏、尺寸控制等属性。
  • 视频加载机制：当video加载完成后，其本身尺寸可能会根据视频的分辨率进行调整，若没有限制，则可能影响iframe的布局。
  • ArkWeb（方舟Web）提供了Web组件，用于在应用程序中显示Web页面内容。

问题定位

在使用iframe加载video时，iframe没有设置宽高，video加载完成后超过iframe的宽高就会撑开，导致页面异常。

  1. 通过DevEco Testing的UIViewer查看页面布局，确认使用iframe嵌入的页面。
  2. 对比两个iframe中的video组件的宽高。确认video组件宽高没有设置固定值。

分析结论

视频在加载完成后改变了自身尺寸，而iframe未对其内容的大小变化进行有效限制。因此，iframe自动扩展以适应内容，导致外部页面布局异常。

修改建议

  1. 使用ArkWeb加载iframe页面：
    收起
    自动换行
    深色代码主题
    复制
    1. import { webview } from '@kit.ArkWeb';
    2. 

    3. @Entry
    4. @Component
    5. struct WebComponent {
    6.   controller: webview.WebviewController = new webview.WebviewController();
    7. 

    8.   build() {
    9.     Column() {
    10.       Web({ src: $rawfile('iframe.html'), controller: this.controller })
    11.         .geolocationAccess(false)
    12.         .fileAccess(true)
    13.     }
    14.   }
    15. }
  2. 设置iframe内video的固定尺寸：
    收起
    自动换行
    深色代码主题
    复制
    1. <!doctype html>
    2. <html lang="zh">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport"
    6.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Video</title>
    9. </head>
    10. <style>
    11.     <!--  CSS样式设置  -->
    12.     video {
    13.       width: 100%;
    14.       height: 300px;
    15.       object-fit: contain;
    16.     }
    17. </style>
    18. <body>
    19.     <div>
    20.         <!--  内联样式设置  -->
    21.         <video width="100%" height="300px" controls>
    22.             <source src="根据实际需要添加mp4格式的视频地址" type="video/mp4">
    23.         </video>
    24.     </div>
    25. </body>
    26. </html>
  3. 限制iframe的最大尺寸：
    收起
    自动换行
    深色代码主题
    复制
    1. <!doctype html>
    2. <html lang="zh">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport"
    6.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Iframe</title>
    9. </head>
    10. <style>
    11.     <!--  CSS样式设置  -->
    12.     iframe {
    13.         width: 100%;
    14.         height: 300px;
    15.         max-width: 100%;
    16.         max-height: 300px;
    17.         overflow: hidden;
    18.     }
    19. </style>
    20. <body>
    21. <!--  内联样式设置  -->
    22. <iframe src="./iframeVideo.html"
    23.         frameborder="0"
    24.         width="100%"
    25.         height="300px"
    26.         style="max-width: 100%; max-height: 300px; overflow: hidden;"
    27.         allowfullscreen="allowfullscreen">
    29. </iframe>
    30. </body>
    31. </html>
Web页面如何适配深色模式
加载网页，图片被截断且页面能够横向滑动
相关推荐
文档平板或PC上，视频布局异常且播放时黑屏
文档播放视频时，画面展示不全，存在截断的情况
文档如何解决ArkWeb视频播放异常问题
文档Web组件点击全屏播放导致页面布局错乱的问题如何处理
文档Web组件加载H5，页面中视频全屏按钮置灰
文档根据Web页面是否成功加载动态展示不同页面
文档加载网页，图片被截断且页面能够横向滑动
文档H5页面中的图片、视频加载缓慢
文档视频播放页面出现标签栏
文档横屏播放视频导致页面布局异常如何解决
简体中文
华为开发者联盟 版权所有 ©2026
问题反馈
使用条款
华为开发者联盟用户协议
关于华为开发者联盟与隐私的声明
Cookies
开源软件声明
在 FAQ 中进行搜索
请输入您想要搜索的关键词