uni-app video标签 object-fit="contain" 暂停后画面会铺满

uni-app video标签 object-fit=“contain” 暂停后画面会铺满

示例代码：

<video :src="video" object-fit="contain"></video>

操作步骤：

  • 暂停视频后画面会铺满

预期结果：

  • 根据 object-fit 属性展示

实际结果：

  • 画面铺满

bug描述：

video标签 object-fit="contain" 暂停后画面会铺满

相关链接：

信息类别 信息内容
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win10
HBuilderX类型 正式
HBuilderX版本号 3.1.22
手机系统 Android
手机系统版本号 Android 11
手机厂商 华为
手机机型 mi8ud mui12
页面类型 nvue
打包方式 云端
项目创建方式 HBuilderX

更多关于uni-app video标签 object-fit="contain" 暂停后画面会铺满的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

这Bug我已经提交过了 ，工程师说下个版本修复

更多关于uni-app video标签 object-fit="contain" 暂停后画面会铺满的实战教程也可以访问 https://www.itying.com/category-93-b0.html


你好，请问解决了吗

同求，下个版本什么时候呢

请问官方接受到这个bug了吗？有没有处理好了呢

安卓手机都有此问题

补充一下，object-fit属性 cover和fill IOS和安卓效果相反了

3.2.5.20210827-alpha 已经解决此问题 你可以试一下

最新的Alpha版本多久更新

这是一个已知的 nvue 页面中 video 组件的渲染问题。当视频暂停时，object-fit=“contain” 属性失效，导致视频画面拉伸铺满容器。

问题分析： 在 nvue 架构下，video 组件底层使用原生渲染引擎，暂停状态下的画面尺寸计算可能存在缺陷。object-fit 属性在播放状态下正常，但暂停时未能保持相同的缩放比例。

临时解决方案：

  1. 尝试使用 cover 模式替代：object-fit="cover"
  2. 在暂停时动态切换 object-fit 属性：
<video 
  :src="video" 
  :object-fit="isPaused ? 'cover' : 'contain'"
  [@pause](/user/pause)="isPaused = true"
  [@play](/user/play)="isPaused = false"
></video>
回到顶部