uni-app video 组件在 ios 平台上显示异常

uni-app video 组件在 ios 平台上显示异常

开发环境 版本号 项目创建方式
Mac 10.14.6 (18G7016) HBuilderX

示例代码：

<template>  
  <view class="contianer">  
    <view class="cu-item" v-for="(item, index) in 5" :key="index">  
      <view class="text-content-title">  
        <text>视频样式布局样式谷歌浏览器正常，在ios模拟器偏移像素，而点击全屏返回时又正常显示</text>  
      </view>  
      <view>  
        <video  
          src="https://www.cmixgz.com/game/tyan/img/amd.mp4"  
          title=''  
          autoplay  
          muted  
          :show-fullscreen-btn='true'  
          :show-play-btn="false"  
          :show-center-play-btn="false"  
          :enable-progress-gesture="false"  
          object-fit="fill"  
          class="video"  
        ></video>  
      </view>  
    </view>  
  </view>  
</template>

export default {  
  data() {  
    return {  
    };  
  },  
  components: {},  
  onLoad(options) {  
  },  
  methods: {  

  }  
};

.cu-item {  
  background-color: #ffffff;  
  overflow: hidden;  
  border-radius: 10rpx;  
  margin: 20rpx 30rpx;  
  padding-bottom: 30rpx;  
}  

.text-content-title {  
  padding: 30rpx;  
  margin-bottom: 20rpx;  
  font-size: 32rpx;  
  color: #333333;  
}  

.video {  
  width: 630rpx;  
  height: 360rpx;  
  margin: 0 30rpx;  
}

操作步骤：

视频样式布局样式谷歌浏览器正常  在ios模拟器 与真实机 偏移像素，而点击全屏返回时又正常显示。

预期结果：

需与谷歌浏览器样式显示正常 而不时点击全屏返回后正常

实际结果：

不能正常显示布局

bug描述：

视频样式布局样式谷歌浏览器正常，在ios模拟器与真机偏移像素，而点击全屏返回时又正常显示

更多关于uni-app video 组件在 ios 平台上显示异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app video 组件在 ios 平台上显示异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个典型的 iOS 平台下 video 组件渲染时机问题。iOS 系统对视频组件的处理机制与浏览器存在差异，导致初始渲染时布局计算异常。

问题分析：

  1. iOS 系统在视频未完全加载时，video 组件的尺寸计算可能不准确
  2. 全屏操作会重新触发视频组件的布局计算，因此返回后显示正常
  3. 这与 CSS 中的 object-fit="fill" 属性在 iOS 上的实现机制有关

解决方案：

  1. 添加加载状态控制
<video
  src="https://www.cmixgz.com/game/tyan/img/amd.mp4"
  @loadedmetadata="onVideoLoad"
  :style="{ visibility: videoLoaded ? 'visible' : 'hidden' }"
></video>

data() {
  return {
    videoLoaded: false
  };
},
methods: {
  onVideoLoad() {
    this.videoLoaded = true;
  }
}
  1. 调整 CSS 样式
.video {
  width: 630rpx;
  height: 360rpx;
  margin: 0 30rpx;
  /* 添加以下属性 */
  display: block;
  background-color: #000;
}
  1. 使用 poster 属性
<video
  poster="/static/placeholder.jpg"
  ...
></video>
回到顶部