javascript - 固定高度的 HTML5 视频拉伸(stretch)

Question

视频未在固定高度下以全宽显示。

我不需要保留原始的宽高比。

这是我正在使用的代码:

<video width="100%" height="314" autoplay loop>
    <source src="https://s3-us-west-1.amazonaws.com/lapka-assets/web_blur.mp4" type="video/mp4">
</video>

此外， JSFiddle :

有什么建议吗？

Answer 1

你已经很接近了，你所需要的就是将 height: auto 设置为 auto 或将其完全删除。关于宽度，如果您对需要扩展的宽度有限制，可以通过 max-width 和 min-width 指定。我建议最小宽度不要小于 320px，因为这是您需要支持的最小屏幕。

编辑在与OP讨论问题的具体细节后，我们决定在HTML5 Video Stretch上保持固定高度。 ;您需要以下包装器代码:

<div style="overflow: hidden; width: 100%; height: 314px;">
  <video height="auto" width="100%" autoplay loop>
    <source src="https://s3-us-west-1.amazonaws.com/lapka-assets/web_blur.mp4" type="video/mp4">
  </video>
</div>

其中 overflow:hidden、width: 100% 和 height: 314px 为内部video保留元素。