uni-app使用video头部出现黑边去不掉bug

video问题

在app测试中，video出现头部很宽的黑边。（只有app手机基座出现这个情况，h5都没有出现）

 问题导致1：video外侧使用了flex的align-items: center;垂直居中导致。

问题导致2：在设置video的height使用的单位是100%，100vh。也会出现这个问题。

解决方法：height使用rpx为单位。如何将100vh改为rpx。代码如下。

<template>
  <!-- 将动态计算的高度绑定到容器 -->
  <view :style="{ height: containerHeight + 'rpx' }">
    <!-- 页面内容 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      containerHeight: 0,
    };
  },
  mounted() {
    // 获取系统信息
    const systemInfo = uni.getSystemInfoSync();
    // 计算 rpx 高度：可用窗口高度（px）转换为 rpx
    this.containerHeight = (systemInfo.windowHeight * 750) / systemInfo.screenWidth;
  },
};
</script>

有遇到这个问题，能有更好的方式解决，欢迎经行沟通，可以下面留言。