iOS26.4.1在uni-app App端vue页面video视频播放控制器不显示不是固定高度问题

iOS26.4.1在uni-app App端vue页面video视频播放控制器不显示不是固定高度问题

2 回复

欢迎到专业群（ uni-app 官方技术交流群 1 ） 咨询，群中有相关专业的管理员和群友。

好的，作为 DCloud 官方人员，我对这个 bug 反馈进行评审。
反馈内容评审
这个反馈质量整体不错，但存在几个关键问题，使得我们无法直接复现和定位。

内容完整性分析：

标题：清晰指出了问题现象（控制器不显示）、平台（App端Vue页面）、系统（iOS 26.4.1），这是一个合格的标题。
描述：描述很详细，点出了问题的关键触发条件——视频初始化时是否在可视区域内。这是一个非常有价值的线索，说明问题可能与视频组件的渲染时机或布局计算有关。
代码示例：这是本次反馈最大的缺失。反馈中没有提供任何 video 组件的相关代码，特别是没有提供给 video 组件设置高度的样式代码。这个问题极大概率与高度设置有关，没有代码我们无法判断。
复现步骤：描述过于简单，仅说“视频默认在页面可视区域内”，但没有具体的页面结构和代码，我们无法据此复现。
预期结果与实际结果：描述清晰，表达了对正常功能（控制器显示）的期望。
分类信息：提供了 HBuilderX 版本（5.07）、平台（iOS）、Vue 版本（Vue2）等关键信息，但缺少了页面类型的说明。虽然标题说是 Vue 页面，但我们需要确认是纯 vue 页面还是 nvue 页面，这会影响我们对问题底层原理的判断。

综合来看，需要用户补充的核心内容是：

提供一个最小化的、可运行的代码示例，特别是包含 video 组件的样式设置，尤其是 height 属性。
明确页面类型是 vue 还是 nvue。

Bug 分析与判断
根据我们知识库中的历史记录，这个现象很可能不是一个新 Bug，而是由特定写法触发的一个已知问题。
从 ask 社区和官方更新日志中，可以找到非常相似的案例：

有用户反馈，在 iOS 上，如果给 video 组件设置的 CSS 高度是 rpx 单位，且计算出的实际像素值较小（例如小于 500rpx 或产生了浮点数），就会导致控制栏（controls）无法显示。将高度单位改为 px 或确保高度值为整数后问题解决。相关链接：【报Bug】video组件在iOS设备controls控制层不显示
官方更新日志中也记录过一个已修复的 bug：“修复 nvue video 组件高度设置 rpx 单位时可能导致 controls 不显示的 Bug”。相关链接：iOS Alpha 3.8.5 更新日志 和 iOS 正式版 3.8.7 更新日志。虽然该记录显示已修复，但不排除在新版本（HBuilderX 5.07）或特定场景下出现回归。

基于以上分析，我对这个 Bug 的初步判断如下：
这个反馈描述的现象很可能成立，但根本原因大概率是 video 组件的 CSS 高度设置不当，而非一个全新的系统级缺陷。

根本原因推测：用户可能使用了 rpx 作为高度单位，或者通过 JavaScript 动态计算高度时产生了非整数的像素值。iOS 的原生视频播放器在处理这类非标准高度时，可能会出现控制层布局异常或无法响应触摸事件，从而导致不显示。反馈中提到的“默认在可视区域”与“滚出后进入”的差异，可能是因为滚动触发了组件的重新布局或绘制，使得高度被重新计算为合法值，控制器才得以正常显示。

与 nvue 的关系：如果用户的页面是 nvue，这个问题会更常见，因为 nvue 的渲染机制与 vue 不同，对布局和单位的要求更严格。优先知识库中也明确指出 nvue 存在各种限制且已不维护，建议改用 vue 页面或升级到 uni-app x。

给用户的处理建议
感谢您的反馈，这个问题我们已经记录。根据您描述的“初始在可视区域不显示，滚动后显示”的现象，结合我们处理过的类似问题，这很大概率是由于 video 组件的高度设置不当引起的，特别是在 iOS 平台上。
请您先尝试以下两种解决方案，这通常能立即解决问题：

检查并修改高度单位：不要使用 rpx 作为 video 组件的高度单位，直接改为 px。例如，将 style=“height: 422rpx” 改为 style=“height: 211px”（以 iPhone 逻辑分辨率 375 为例）。
确保高度为整数：如果您是通过 JavaScript 动态计算高度，请务必使用 Math.ceil() 或 Math.floor() 等方法对计算结果取整，确保最终设置的像素高度是一个整数值。iOS 原生组件对浮点数高度非常敏感。

如果以上方案无法解决您的问题，请提供一个最小化的、可复现的代码示例（包含完整的 video 组件写法及其样式），并确认您的页面类型是 vue 还是 nvue。我们将根据您提供的示例进行进一步的验证和排查。
另外，由于您在 nvue 页面下可能遇到更多兼容性问题，而 nvue 已停止维护，我们建议您考虑将项目迁移至 vue 页面，或直接升级到全新的 uni-app x 框架，以获得更好的性能和开发体验。 内容为 AI 生成，仅供参考

更多关于iOS26.4.1在uni-app App端vue页面video视频播放控制器不显示不是固定高度问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题在 iOS 16.4.1 上比较典型，核心原因是 WKWebView 对 HTML5 video 的 controls 默认行为和 CSS 布局支持存在 bug，尤其在非固定宽高比或父容器未显式设置高度时。

1. 控制器不显示

  • 检查 <video> 是否添加了 controls 属性。uni-app 的 <video> 组件默认 controls 为 true，但如果全局样式或组件属性被覆盖，可能丢失。
  • 确认视频元素没有被 overflow:hidden 的父容器 裁剪（iOS 下 controls 属于 Shadow DOM 的一部分，父容器 overflow:hidden 可能导致其被隐藏）。
  • 如果页面使用了 scroll-view 或 swiper，尝试将 video 放在 position:fixed 或 relative 的独立容器中测试，排除滚动/嵌套导致的层叠问题。

2. 高度不固定

  • <video> 组件在 iOS WKWebView 中，如果未设置固定高度（如 height: 200px）或 aspect-ratio，浏览器会按视频原始比例尝试计算高度，但可能出现 0 高度或超高（特别是初始时视频元数据未加载）。
  • 解决方案：显式设置 height 和 width，或使用 object-fit: contain 配合容器 aspect-ratio 控制。例如：
    .video-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
回到顶部