HTML 视频始终显示为正方形，不遵守纵横比

Question

我有以下代码：

.videoWrapper {
display:flex;
position: relative;
}


.videoWrapper  video {
 width:100%;
 height: auto;
}

<div className='videoWrapper'>
      
    <video controls class="videoPlayer">
        <source src='some-video' type="video/mp4" />
     </video>
</div>

我只是想根据视频的纵横比以父 div 的全宽显示视频，以便根据父 div 的宽度调整高度。

但就我而言，视频始终显示为正方形。

我玩过对象填充属性，但没有任何改变。

完全迷失在这里。 非常感谢。

Answer 1

<video> 元素在加载和解码之前不知道源视频的实际宽高比（在页面本身呈现之后），因此您必须使用 javascript 来一旦知道实际的纵横比，就调整元素的大小。您可以尝试收听loadedmetadata event，并在该处理程序中使用视频的intrinsic width/height 调整元素的大小。

如果您提前知道视频的宽高比，也许您可​​以使用aspect-ratio 规则，或者搜索如何使用padding-bottom 设置比例的技巧。