uni-app video组件的object-fit属性cover, fill在安卓和ios手机下效果不一致

uni-app video组件的object-fit属性cover, fill在安卓和ios手机下效果不一致

测试过的手机

小米6、iphone8

操作步骤：

video设置object-fit运行在安卓和ios这两个平台上就能看到了

预期结果：

希望object-fit属性在安卓和ios能一致

实际结果：

object-fit在安卓和ios不一致

bug描述：

video的object-fit属性：cover, fill在安卓和ios手机下面效果不一致。 相同问题的帖子：https://ask.dcloud.net.cn/question/96532 我真想不明白为什么这个小问题都要拖那么久


更多关于uni-app video组件的object-fit属性cover, fill在安卓和ios手机下效果不一致的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app video组件的object-fit属性cover, fill在安卓和ios手机下效果不一致的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的跨平台兼容性问题。uni-app的video组件底层依赖各端原生播放器实现，Android和iOS系统对object-fit属性的渲染机制存在差异。

目前可行的解决方案：

  1. 使用条件编译针对不同平台设置不同属性值
// 在template中
<video :object-fit="videoFit"></video>

// 在script中
export default {
  data() {
    return {
      videoFit: 'cover'
    }
  },
  onLoad() {
    // #ifdef APP-PLUS
    if(uni.getSystemInfoSync().platform === 'ios') {
      this.videoFit = 'fill'
    }
    // #endif
  }
}
  1. 使用css transform辅助调整视频显示比例
.video-wrapper {
  overflow: hidden;
}
.video-element {
  width: 100%;
  height: 100%;
  /* 根据实际需求调整transform值 */
  transform: scale(1.1);
}
回到顶部