uni-app 安卓手机video标签poster封面图不会随objectFit="fill"填充父容器 苹果手机可以

uni-app 安卓手机video标签poster封面图不会随objectFit="fill"填充父容器 苹果手机可以

项目 信息
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 20H2
HBuilderX类型 Alpha
HBuilderX版本号 3.2.5
手机系统 Android
手机系统版本号 Android 10
手机厂商 华为
手机机型 mate20, note10
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

示例代码：

<template>  
    <view>  
        <video :src="src" :poster="poster" objectFit="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标签设置属性：objectFit=“fill” 安卓手机应该和苹果手机应该保持效果一致，poster封面图应该跟随视频属性填充父容器

实际结果：

  • 安卓手机poster封面图未填充
  • 苹果手机poster封面图填充了

bug描述：

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


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

9 回复

官方没复现？

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


我现在试试

bug 已确认，稍后版本会修复这个问题

感谢

回复 首席烟花引燃师: 内测环境修复了。 你留一下qq. 我加你验证一下

回复 DCloud_Android_DQQ: 550497655

HX3.2.10 alpha 已修复该问题

请问有遇到这个情况吗？就是设置的poster封面图在视频的上面显示。

这是一个已知的 Android 平台兼容性问题。objectFit="fill" 属性在 Android 上对 poster 封面图的支持确实不如 iOS 完善。

核心原因：Android 系统 WebView 对 <video> 标签 poster 的 CSS object-fit 属性解析存在差异，导致 poster 未能正确应用填充模式。

临时解决方案：

  1. 使用 CSS 强制覆盖（推荐）： 在 <video> 标签上添加自定义样式，强制 poster 图片填充容器。

    <template>
    <view>
        <video 
            :src="src" 
            :poster="poster" 
            objectFit="fill"
            style="object-fit: fill !important;"
        ></video>
    </view>
</template>

  2. 使用背景图模拟 poster： 如果上述 CSS 方法无效，可以用一个 <view> 容器包裹 <video>，将 poster 设为容器的背景图，视频播放时隐藏该背景。

    <template>
    <view class="video-container" :style="{backgroundImage: 'url(' + poster + ')'}">
        <video 
            :src="src" 
            objectFit="fill"
            @play="onPlay"
        ></video>
    </view>
</template>

<script>
export default {
    methods: {
        onPlay() {
            // 播放时隐藏背景图
            const container = document.querySelector('.video-container');
            if (container) container.style.backgroundImage = 'none';
        }
    }
}
</script>

<style>
.video-container {
    width: 100%;
    height: 400rpx; /* 根据需要设置 */
    background-size: cover;
    background-position: center;
}
</style>

  3. 使用条件编译： 针对 Android 平台单独处理样式。

    <template>
    <video 
        :src="src" 
        :poster="poster" 
        objectFit="fill"
        :style="videoStyle"
    ></video>
</template>

<script>
export default {
    computed: {
        videoStyle() {
            // #ifdef APP-PLUS
            if (uni.getSystemInfoSync().platform === 'android') {
                return { 'object-fit': 'fill' };
            }
            // #endif
            return {};
        }
    }
}
</script>
回到顶部