uni-app 安卓手机video标签poster封面图不随object-fit="fill"属性填充父容器 苹果手机正常

uni-app 安卓手机video标签poster封面图不随object-fit="fill"属性填充父容器 苹果手机正常

开发环境 版本号 项目创建方式
Windows 20H2 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：20H2

HBuilderX类型：Alpha

HBuilderX版本号：3.2.8

手机系统：Android

手机系统版本号：Android 10

手机厂商：华为

手机机型：mate20, note10

页面类型：vue

打包方式：云端

示例代码：

```html
<template>  
    <view>  
        <video :src="src" :poster="poster" object-fit="fill"></video>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                src: 'https://www.budaos.com/bds/uploads/474182cc-b0db-45dd-90e1-cda620ba9a5d.mp4',  
                poster: 'https://www.budaos.com/bds/uploads/474182cc-b0db-45dd-90e1-cda620ba9a5d.jpg'  
            }  
        },  
    }  
</script>

操作步骤： 新建uni-app工程，在index.vue中粘贴上述示例代码，目前是用的华为mate20和荣耀note10等屏幕比较大的设置，发现poster封面图没有填充父容器，播放时视频是可以填充的，导致视频播放时画面会拉伸闪一下。而苹果手机测试不会出现该问题，poster封面图也会填充父容器。vue和nvue页面均会出现该问题。

预期结果： video标签设置属性：object-fit=“fill” 安卓手机应该和苹果手机应该保持效果一致，poster封面图应该跟随视频属性填充父容器

实际结果： 安卓手机poster封面图未填充 苹果手机poster封面图填充了

bug描述： 安卓手机测试时，video标签设置属性object-fit=“fill”，视频播放可以正常填充父容器，但设置的poster封面图不会填充父容器，导致播放时总会闪一下。


更多关于uni-app 安卓手机video标签poster封面图不随object-fit="fill"属性填充父容器 苹果手机正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

查看相同问题帖子：https://ask.dcloud.net.cn/question/129760

更多关于uni-app 安卓手机video标签poster封面图不随object-fit="fill"属性填充父容器 苹果手机正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的Android平台兼容性问题。在uni-app中，video组件的poster属性在Android设备上确实存在object-fit="fill"不生效的情况，而iOS设备表现正常。

问题原因： Android原生video控件对封面图样式的支持与iOS存在差异，poster图片默认采用居中显示而非填充模式。

临时解决方案：

  1. 使用CSS样式覆盖（推荐）：
video {
  width: 100%;
  height: 100%;
  object-fit: fill !important;
}
  1. 使用cover-view模拟封面： 如果上述CSS方案无效，可以尝试用cover-view覆盖在video上方模拟封面效果：
<template>
  <view class="video-container">
    <video :src="src" object-fit="fill"></video>
    <cover-view class="poster" v-if="showPoster">
      <image :src="poster" mode="aspectFill" class="poster-img"></image>
    </cover-view>
  </view>
</template>

<style>
.video-container {
  position: relative;
  width: 100%;
  height: 300px; /* 根据实际需求调整 */
}
.poster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.poster-img {
  width: 100%;
  height: 100%;
}
</style>
  1. 条件编译处理：
<template>
  <video 
    :src="src" 
    :poster="poster" 
    :object-fit="objectFit"
    :style="videoStyle"
  ></video>
</template>

<script>
export default {
  data() {
    return {
      src: 'your-video-url',
      poster: 'your-poster-url'
    }
  },
  computed: {
    objectFit() {
      // #ifdef APP-PLUS
      return 'fill'
      // #endif
      // #ifndef APP-PLUS
      return 'fill'
      // #endif
    },
    videoStyle() {
      // #ifdef APP-ANDROID
      return {
        'object-fit': 'fill'
      }
      // #endif
      return {}
    }
  }
}
</script>
回到顶部