首席烟花引燃师
首席烟花引燃师
  • 发布:2021-08-28 15:42
  • 更新:3 天前
  • 阅读:473

【报Bug】uni-app 安卓手机video标签poster封面图不会随属性objectFit="fill"填充父容器,苹果手机是可以填充的。

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

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

HBuilderX类型: Alpha

HBuilderX版本号: 3.2.5

手机系统: Android

手机系统版本号: Android 10

手机厂商: 华为

手机机型: mate20, note10

页面类型: vue

nvue编译模式: fast

打包方式: 云端

项目创建方式: 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封面图不会填充父容器,导致播放时总会闪一下。

2021-08-28 15:42 负责人:DCloud_Android_DQQ 分享
已邀请:
首席烟花引燃师

首席烟花引燃师 (作者)

官方没复现?

DCloud_Android_DQQ

DCloud_Android_DQQ

我现在试试

DCloud_Android_DQQ

DCloud_Android_DQQ

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

DCloud_Android_ST

DCloud_Android_ST

HX3.2.10 alpha 已修复该问题

9***@qq.com

9***@qq.com

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

要回复问题请先登录注册