uni-app ios14.6 video控件无法显示 实测14.4.1可以显示

uni-app ios14.6 video控件无法显示 实测14.4.1可以显示

开发环境 版本号 项目创建方式
Mac 11.4 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Mac

PC开发环境操作系统版本号：11.4

HBuilderX类型：正式

HBuilderX版本号：3.1.22

手机系统：iOS

手机系统版本号：IOS 14

手机厂商：苹果

手机机型：iphone12proMax

页面类型：vue

打包方式：云端

操作步骤：
```html
<video  
    id="my-video"  
    class="video"  
    :src="video_url"  
    @play="play"  
    @waiting="waiting"  
    @pause="pause"  
    @error="videoError"  
    :enable-progress-gesture="false"  
    :show-center-play-btn="false"  
    :controls="true"  
>  
    <cover-image v-if="is_show_play_btn" @tap="toplay" class="controls-play" src="@/static/images/icon-play-btn.png"></cover-image>  
</video>

预期结果：

正常出现视频控件

实际结果：

无法出现控件

bug描述：

hello uniapp模版component的video页面先把nvue删掉(线上app是vue文件)，设置vue文件，video样式为height: 60vw无法显示控件,height: 400rpx为正常

更多关于uni-app ios14.6 video控件无法显示 实测14.4.1可以显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

11 回复

使用官方基座跑一下unidemo工程试试看，没有发现你说的问题

更多关于uni-app ios14.6 video控件无法显示 实测14.4.1可以显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html


video 设置height: 56.25vw;类似这种的在14.6版本导致的无法出现控制器 其他ios都可以出现

回复 1***@qq.com: 请提供一个能复现问题的完整示例吧

回复 1***@qq.com: 测试仍未复现

回复 DCloud_UNI_GSQ: hello uniapp模版component的video页面先把nvue删掉(线上app是vue文件)，设置vue文件，video样式为height: 60vw复现,height: 400rpx为正常

回复 DCloud_iOS_XHY: hello uniapp模版component的video页面先把nvue删掉(线上app是vue文件)，设置vue文件，video样式为height: 60vw复现,height: 400rpx为正常

回复 1***@qq.com: 测试也未复现，你那不同设置在 14.6 均有问题吗？

回复 DCloud_UNI_GSQ: 目前是只有2个14.6的ios机，都是有问题的

回复 DCloud_UNI_GSQ: 我上传了附件，没出现控件的是ios14.6,出现控件的是ios14.4.1

14.6的手机 运行官方unidemo 修改 height: 60vw 没有出现你说的问题 用你提供的mov 放在本地也米有出现问题

<style> video { width: 690rpx; width: 100%; height: 60vw; } </style>

如果你还有问题 请再提供多些 比如直接能run起来的 demo

这是一个iOS 14.6系统兼容性问题，涉及video组件的渲染机制。

问题分析： iOS 14.6对video组件的渲染要求更严格，使用height: 60vw这类相对单位时，在某些情况下可能无法正确计算视频控件的显示区域，导致控件无法渲染。

解决方案：

  1. 使用固定单位：如你测试的height: 400rpx可以正常显示，建议在iOS 14.6+环境中优先使用rpx、px等固定单位
  2. 添加min-height保障：如果必须使用vw单位，可补充min-height: 300rpx确保最小高度
  3. 检查容器布局：确认video父容器有明确的高度设定，避免依赖内容撑开

代码调整示例：

<video  
    class="video"  
    :src="video_url"  
    :style="{ height: videoHeight }"
    controls
></video>

computed: {
    videoHeight() {
        // 根据系统版本返回不同高度值
        return this.isIOS14_6Plus ? '400rpx' : '60vw'
    }
}
回到顶部