uni-app video视频组件在IOS中show-loading加载动画无法居中显示一直显示在视频左上角

uni-app video视频组件在IOS中show-loading加载动画无法居中显示一直显示在视频左上角

信息类别 内容
产品分类 uniapp/App
PC开发环境 Windows
PC系统版本 win11
HBuilderX 正式版
HBuilderX版本 4.66
手机系统 iOS
手机版本 iOS 18
手机厂商 苹果
手机机型 IOS 16 pro Max
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

操作步骤：

<video play-btn-position="center" object-fit="fill" class="video-component" show-loading :controls="false" :show-fullscreen-btn="false" :src="detail.url" autoplay :orientation="fangxiang" @statechange="playStateChange"  
    @error="error" id='livePlayerVideo'>  
</video>

预期结果：

show-loading加载动画居中显示

实际结果：

show-loading加载动画居左上角显示

bug描述：

video视频组件在IOS中，show-loading加载动画无法居中显示，一直显示在视频左上角


更多关于uni-app video视频组件在IOS中show-loading加载动画无法居中显示一直显示在视频左上角的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

您好，麻烦发个完整的可复现demo

更多关于uni-app video视频组件在IOS中show-loading加载动画无法居中显示一直显示在视频左上角的实战教程也可以访问 https://www.itying.com/category-93-b0.html


就是最基础的演示demo就能复现

这是一个已知的iOS平台兼容性问题。uni-app的video组件在iOS上show-loading动画的定位确实存在异常，会固定在左上角而不是居中显示。

问题原因： iOS系统对video组件的loading动画实现机制与Android不同，在部分iOS版本中会出现定位偏差。

临时解决方案：

  1. 自定义loading动画
<view class="video-container">
  <video 
    :show-loading="false"
    class="video-component"
    :src="detail.url"
    @waiting="showCustomLoading = true"
    @canplay="showCustomLoading = false"
  ></video>
  <view v-if="showCustomLoading" class="custom-loading">
    <!-- 自定义loading组件 -->
  </view>
</view>
  1. 使用CSS覆盖调整位置
/* 尝试覆盖原生loading样式 */
video::after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
  1. 使用uni-app的loading组件
// 在视频加载状态变化时控制loading显示
methods: {
  playStateChange(e) {
    if (e.detail.code === 1) { // 等待中
      uni.showLoading({title: '加载中'})
    } else if (e.detail.code === 2) { // 播放中
      uni.hideLoading()
    }
  }
}
回到顶部