uni-app 安卓端单击暂停视频时 object-fit:cover 失效

uni-app 安卓端单击暂停视频时 object-fit:cover 失效

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

操作步骤：

  • 单击视频暂停

预期结果：

  • 视频在保持cover的状态下正常暂停

实际结果：

  • 安卓端在单击暂停视频时 object-fit:cover 会失效 设置style 还有css也没用

bug描述：

  • 在单击设置有 object-fit:cover 的video时 ios端视频正常暂停 安卓端视频会还原为 未设置 object-fit:cover 的状态

更多关于uni-app 安卓端单击暂停视频时 object-fit:cover 失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

13 回复

确实有该问题，希望官方尽快修复！！！

更多关于uni-app 安卓端单击暂停视频时 object-fit:cover 失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


还以为是官方回复我的，弄的我好激动

看文档平台差异说明，https://uniapp.dcloud.io/component/video?id=video

我目前app双端 只有安卓端点击暂停的时候会出现cover失效的问题，ios是正常的，安卓端这样有没有什么解决方案？或者给个思路也行 我这边视频是直接上传到腾讯云的

怎么解决啊,这个BUG都是怎么处理的?

有解决了吗

嗯 已经解决了 更新到了最新版本 不会出现这个情况了

回复 9***@qq.com: 你好, 我现在已经3.1.13了,还是和你一样的情况. 官方是又bug了吗?

回复 Dodu: 大佬解决了吗？急求啊；

回复 9***@qq.com: 大佬；你说的版式是微信调试库；还是开发软件的版本

回复 i***@qq.com: 这个我这边重新测试了下 还是不行 应该是官方bug 到现在没修复

nvue页面，在安卓手机上，这个功能不起作用，vue页面是可以的

这是一个已知的uni-app安卓端兼容性问题。当视频暂停时，安卓系统的原生播放器会重置视频容器的显示状态，导致CSS的object-fit:cover属性失效。

解决方案：

  1. 使用cover-view组件包裹视频：
<view class="video-container">
  <video :style="{objectFit: 'cover'}" @pause="handlePause">
    <cover-view class="cover-placeholder"></cover-view>
  </video>
</view>
  1. 通过动态样式控制： 在视频暂停时强制重新设置样式：
handlePause() {
  // 强制重绘视频容器
  this.$nextTick(() => {
    const video = this.$refs.video;
    if(video) {
      video.style.objectFit = 'cover';
    }
  });
}
回到顶部