uni-app video组件 object-fit属性 fill填充和cover覆盖效果与H5及小程序颠倒

uni-app video组件 object-fit属性 fill填充和cover覆盖效果与H5及小程序颠倒

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

操作步骤：

项目中只能用临时解决方案

// #ifdef MP H5
if(video.fit === 'fill'){
video.fit = 'cover'
}
// #endif

预期结果：

1

实际结果：

1

bug描述：

视频全屏

app的 fit == h5和小程序 object-fit: cover; 小程序H5的cover == app的fit


更多关于uni-app video组件 object-fit属性 fill填充和cover覆盖效果与H5及小程序颠倒的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

更多关于uni-app video组件 object-fit属性 fill填充和cover覆盖效果与H5及小程序颠倒的实战教程也可以访问 https://www.itying.com/category-93-b0.html


意思是 ios 的效果是错的是吧？

是的没有在安卓测试，发布出多端后，ios上正好和小程序程序效果相反

确实，真机调试和打包之后效果正好相反

请更新至HBuilder X3.3.12 alpha版本试下，是否还有此问题？

在uni-app中，video组件的object-fit属性在不同平台确实存在表现差异，这是由底层渲染引擎不同导致的。

平台差异分析：

  • APP端：基于原生渲染，fill会拉伸填满容器，cover保持比例裁剪
  • H5/小程序：基于Webview渲染，遵循CSS标准，cover保持比例填满，fill拉伸变形

临时解决方案评价： 你提供的条件编译方案是可行的标准做法：

// #ifdef MP || H5
if(video.fit === 'fill') {
    video.fit = 'cover'
}
// #endif
回到顶部