初始加载时 HTML5 视频纵横比错误

如何解决初始加载时 HTML5 视频纵横比错误

更新 1：这是 Android cordova 应用程序中关联的 HTML 和 CSS。我最初没有添加它，因为简单地使用 chrome 的默认视频样式在浏览器中加载视频仍然会导致问题，所以我不认为我的 CSS 会负责。

<div class="pswp">
  <div class="video-centering-container shown">
    <div class="videoHolder">
      <p class="video_container">
        <video width="1088" height="1920" poster="<poster-url>" controls="" loop="" playsinline="">
          <source src="<video-url>" type="video/mp4">
        </video>
      </p>
    </div>
  </div>
</div>

和 CSS：

.pswp {
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    overflow: hidden;
    -ms-touch-action: none;
    touch-action: none;
    z-index: 1500;
    -webkit-text-size-adjust: 100%;
    -webkit-backface-visibility: hidden;
    outline: none;
    opacity: 1;
}

.pswp * {
    Box-sizing: border-Box;
}

.pswp .video-centering-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 70vh;
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.pswp .video-centering-container.shown {
    height: 100vh;
}

.pswp .videoHolder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
}

.video_container {
    width: 50vw;
    height: 20vh;
    overflow: hidden;
    position: relative;
}

.videoHolder .video_container {
    width: 100vw;
    height: 100%;
}

.video_container video {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
}

.videoHolder .video_container video {
    object-fit: contain;
}

在最初播放视频时，我发现有一段时间 HTML5 视频的尺寸不正确。看看这些截图：

按下播放后，视频加载前

https://fontawesome.com/how-to-use/on-the-web/using-with/react

在视频加载并开始播放后

我从笔记本电脑上的 Chrome 中获得了这些屏幕截图，但在 Android

上也出现了同样的问题。我已经在视频上设置了 width 和 height 属性，但这并不能阻止这种情况的发生。我正在从我自己的后端提供视频。我尝试将视频上传到 DropBox 并从那里提供服务，但没有发生错误。我可以看到 DropBox 将 preload="auto" 添加到 <video> 标签，所以我也这样做了，但没有帮助。我不知道还能尝试什么，我愿意接受任何想法。谢谢！