视频高度不正确加载元数据时？

问题描述

在开始播放之前，我发现视频的高度发生了变化。这在android webview的Cordova app中。首次将视频添加到页面时，外观如下（不想要）：

然后，一旦为视频加载了足够的数据以开始播放，它就是这样（所需）：

您可以看到纵横比不正确，直到可以播放视频为止。我尝试在视频上设置width和height属性，但这无济于事。我无法轻松重现此内容，但这是html结构和CSS的相关部分：

<ul>
  <li>
    <div class="outer">
      <p class="first-inner">
        <span>
          <video src="something.mp4" poster="another.jpeg"></video>
        </span>
      </p>
    </div>
  </li>
</ul>

// styles.css
.outer {
    max-width: 62%;
    min-width: 75px;
}

.first-inner {
    width: 189px;
    max-width: 100%;
}

.first-inner > span {
    display: block;
    position: relative;
    height: 0;
    overflow-y: hidden;
    padding-top: 133.33333333333331%;
}

.first-inner > span video {
    min-height: 201px;
    max-width: 99%;
    max-height: 250px;
    width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

即使元数据仍在加载，我也希望视频始终看起来像第二个屏幕截图。关于为什么发生这种情况或可以解决的任何想法？谢谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

aspect-ratio html video