<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>
<style>
</style>
首席烟花引燃师
- 发布：2021-09-24 15:29
- 更新：2021-09-28 20:18
- 阅读：680
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： 20H2
HBuilderX类型： Alpha
HBuilderX版本号： 3.2.8
手机系统： Android
手机系统版本号： Android 10
手机厂商： 华为
手机机型： mate20, note10
页面类型： vue
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
新建uni-app工程，在index.vue中粘贴上述示例代码，目前是用的华为mate20和荣耀note10等屏幕比较大的设置，发现poster封面图没有填充父容器，播放时视频是可以填充的，导致视频播放时画面会拉伸闪一下。而苹果手机测试不会出现该问题，poster封面图也会填充父容器。vue和nvue页面均会出现该问题。
新建uni-app工程，在index.vue中粘贴上述示例代码，目前是用的华为mate20和荣耀note10等屏幕比较大的设置，发现poster封面图没有填充父容器，播放时视频是可以填充的，导致视频播放时画面会拉伸闪一下。而苹果手机测试不会出现该问题，poster封面图也会填充父容器。vue和nvue页面均会出现该问题。
预期结果：
video标签设置属性：object-fit="fill"
安卓手机应该和苹果手机应该保持效果一致，poster封面图应该跟随视频属性填充父容器
video标签设置属性：object-fit="fill"
安卓手机应该和苹果手机应该保持效果一致，poster封面图应该跟随视频属性填充父容器
实际结果：
安卓手机poster封面图未填充
苹果手机poster封面图填充了
安卓手机poster封面图未填充
苹果手机poster封面图填充了
bug描述：
安卓手机测试时，video标签设置属性object-fit="fill"，视频播放可以正常填充父容器，但设置的poster封面图不会填充父容器，导致播放时总会闪一下。
