uni-app Video APP 端 object-fit为contain时视频尺寸显示非常小

发布于 1周前 作者 songsunli 来自 Uni-App

uni-app Video APP 端 object-fit为contain时视频尺寸显示非常小

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

PC开发环境操作系统：Mac

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

HBuilderX类型：正式

HBuilderX版本号：4.26

手机系统：Android

手机系统版本号：Android 12

手机厂商：模拟器

手机机型：MuMu模拟器 Pro

页面类型：vue

vue版本：vue3

打包方式：云端

项目创建方式：HBuilderX

示例代码：

```html
<view class="page-course-study">  
  <view id="main" class="main">  
    <view class="video-box">  
      <video  
        id="myVideo"  
        title="这是课程学习的视频"  
        class="video"  
        src="https://static.10000.wiki/video/%E9%80%8D%E9%81%A5%E5%8F%B9.mp4"  
        controls  
        object-fit="contain"  
        poster=""  
        autoplay  
        @loadedmetadata="onVideoLoad"  
      />  
    </view>  
  </view>  

  <view class="info">  
    <view class="title">1.这是课程学习的视频</view>  
    <view class="content">  
      {{  
        `    这是课程学习的视频这是课程学习的视频这是课程学习的视频这是课程学习的视频这是课程学习的视频这是课程学习的视频这是课程学习的视频这是课程学习的视频这是课程学习的视频。`  
      }}  
    </view>  
    <view class="bar">  
      <view class="index">1/1</view>  
      <tn-button class="read" size="sm">  
        <view class="label"> ---- </view>  
      </tn-button>  
    </view>  
  </view>  
</view>  

.page-course-study {  
  width: 100%;  
  height: 100%;  
  min-height: fit-content;  
  background-color: #f8f8f8;  
  display: flex;  
  align-items: center;  
  overflow: hidden;  
  .main {  
    flex: 1;  
    height: 100%;  
    display: flex;  
    justify-content: center;  
    align-items: center;  
    background-color: #000;  
    .video-box {  
      width: 100%;  
      height: 100%;  
      .video {  
        width: 100%;  
        height: 100%;  
      }  
    }  
  }  
  .info {  
    flex-shrink: 0;  
    width: 400px;  
    height: 100%;  
    padding: 12px;  
    display: flex;  
    flex-direction: column;  
    background-color: #69b1ff;  
    .title {  
      font-size: 14px;  
      color: #fff;  
    }  
    .content {  
      flex: 1;  
      overflow: auto;  
      font-size: 12px;  
      color: #fff;  
      white-space: pre-wrap;  
    }  
    .bar {  
      display: flex;  
      justify-content: space-between;  
      align-items: center;  
      .index {  
        color: #fff;  
        font-size: 12px;  
      }  
      .read {  
        width: 80px;  
        .label {  
          font-size: 14px;  
        }  
      }  
    }  
  }  
}

操作步骤： 运行代码
打开页面

预期结果： 视频按比例铺满视频

实际结果： 视频过小且出现在左下角

bug描述： Video APP 端 object-fit为contain时视频尺寸显示非常小


Harmonyos Next教程
2 回复

真机测试未复现此问题，建议去掉其他代码用最简单的示例单独真机调试看看呢


在 uni-app 中，当使用 <video> 组件并设置 object-fit 为 contain 时，如果视频尺寸显示得非常小，这通常是由于视频容器的尺寸和视频本身的比例不匹配所导致的。以下是一些可能的解决方案和代码示例，展示如何调整视频组件以确保视频正确显示。

1. 确保容器有合适的尺寸

首先，确保 <video> 组件的父容器有合适的宽度和高度。如果容器本身尺寸很小，视频自然会显示得很小。

<template>
  <view class="video-container">
    <video
      class="video"
      src="your-video-url.mp4"
      object-fit="contain"
      controls
    ></video>
  </view>
</template>

<style>
.video-container {
  width: 100%; /* 或者设置一个具体的宽度，比如 300px */
  height: 50vw; /* 使用视窗单位确保高度与宽度成比例 */
}

.video {
  width: 100%;
  height: 100%;
}
</style>

2. 使用 aspect-ratio 控制比例

CSS 的 aspect-ratio 属性可以用来确保视频容器保持正确的宽高比。注意，这个属性在一些旧版浏览器中可能不被支持。

<template>
  <view class="video-wrapper">
    <video
      class="video"
      src="your-video-url.mp4"
      object-fit="contain"
      controls
    ></video>
  </view>
</template>

<style>
.video-wrapper {
  width: 100%;
  height: 0;
  padding-top: 56.25%; /* 16:9 的比例，即 (9/16)*100% */
  position: relative;
}

.video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

3. 动态调整容器大小

如果视频的比例是动态的，或者你想根据屏幕大小自动调整视频大小，可以使用 JavaScript 动态设置容器的样式。

export default {
  mounted() {
    const videoContainer = this.$refs.videoContainer;
    const videoRatio = 16 / 9; // 假设视频是 16:9 的比例
    const screenWidth = uni.getSystemInfoSync().windowWidth;
    const containerHeight = screenWidth / videoRatio;
    videoContainer.style.height = `${containerHeight}px`;
  },
};

<template>
  <view ref="videoContainer" class="video-container">
    <video
      class="video"
      src="your-video-url.mp4"
      object-fit="contain"
      controls
    ></video>
  </view>
</template>

<style>
.video-container {
  width: 100%;
}

.video {
  width: 100%;
  height: 100%;
}
</style>

通过上述方法，你可以确保 uni-app 中的 <video> 组件在 object-fit 为 contain 时能够正确显示，并且根据需要进行尺寸调整。

回到顶部