uni-app <video>设置show-progress后iOS不显示时间，安卓却还显示左右两个时间

uni-app

操作步骤：

<video id="myVideo" ref="myVideo" :src="highInfo.streamUrl" object-fit='fill' controls enable-progress-gesture="false" show-bottom-progress="false" show-progress="false" show-mute-btn autoplay :title="titleText" is-live class="video-poster"></video>

预期结果：

安卓上进度条和时间都不显示

实际结果：

进度条不显示，时间显示

bug描述：

<video>设置show-progress后iOS不显示时间，安卓可以正常显示
信息类别 信息内容
产品分类 uniapp/App
PC开发环境 Windows
PC版本号 Windows 10
HBuilderX类型 正式
HBuilderX版本 4.76
手机系统 Android
手机版本号 Android 16
手机厂商 华为
手机机型 Mate 60
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

更多关于uni-app <video>设置show-progress后iOS不显示时间，安卓却还显示左右两个时间的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app <video>设置show-progress后iOS不显示时间，安卓却还显示左右两个时间的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个常见的平台差异问题。在uni-app中，iOS和Android对video组件的原生实现存在一些不一致。

根据你的代码分析：

  • show-progress="false" 在Android上可能只隐藏了进度条，但时间显示控件未被完全禁用
  • iOS系统对video控件的渲染逻辑与Android不同，导致表现不一致

建议的解决方案：

  1. 统一使用controls属性控制：
<video :src="highInfo.streamUrl" :controls="false"></video>

  1. 如果需要自定义控制条，建议完全隐藏原生控件，使用uni.createVideoContext() API配合自定义UI来实现进度控制和时间显示。

  2. 检查HBuilderX版本兼容性：确保使用最新稳定版，某些版本可能存在平台适配问题。

  3. 考虑使用条件编译处理平台差异：

<!-- #ifdef APP-ANDROID -->
<video ... show-progress="false"></video>
<!-- #endif -->
<!-- #ifdef APP-IOS -->
<video ... :controls="false"></video>
<!-- #endif -->
回到顶部