使 HTML5 视频适合父元素大小

Posted 2023-05-07

【中文标题】使 HTML5 视频适合父元素大小

【英文标题】：Fitting HTML5 video to parent element size

【发布时间】：2011-12-27 11:02:41

【问题描述】：

我在

中有一个

【问题讨论】：

容器的纵横比似乎与视频内容固有纵横比不匹配（渲染时始终保留视频内容固有纵横比）

视频图像应该在视频元素的边界内进行信箱处理，以保持其纵横比；视频元素本身应该是相当大的，但是你喜欢，这通常是有效的。我终于让它工作了，但原因却让我无法理解；请参阅jsfiddle.net/gliese1337/Djbvj/20 的小提琴。如果您将视频位置设置为“绝对”，它可以工作。如果您从 CSS 中删除该行，它的行为会莫名其妙。

@jammypeach 呃，怎么样？我一直盯着这两个问题以及海报问题上给出的答案大约 10 分钟，老实说，我无法理解你怎么能认为它们是相同的。此问题与视频海报图像无关，或与视频大小匹配任何内容。这是视频的问题，而不是视频图像，元素缩放奇怪。

@LoganR.Kearsley 就我而言，我有一个紧张的时刻并且错误地标记了这一点 - 我很抱歉。我已提名重新开放。不知道为什么其他人都同意！我仍然认为这是一个骗局，但你是对的，这不是我选择的那个骗局。

【参考方案1】：

我很清楚这是一个较老的问题，但我一直在努力使用 CSS 完成布局，其中视频自动调整大小以适合某个框，通常在父元素内。

仅将width 和height 与静态定位一起使用仅适用于父子拓扑的某些配置，并且还很大程度上取决于拓扑的样式。即使您让某个元素正确计算其边界，一旦您将播放视频元素放入其中，它也会扩展父母允许的框，即使这是您所期望的最不明智的行为。

加入一些fieldset 元素，你就会陷入 CSS 和浏览器特性的兔子洞。

我发现，使用position: absolute 将视频元素从其定位上下文中取出是最简单的。这并不意味着它在视觉上不会表现良好——使用width: 100% 和height: 100% 可以有效地使其正确地约束自己，否则它应该（但不会）。然后，您需要将position: relative 添加到视频元素的适当祖先元素，否则视频将相对于文档根绝对定位，这很可能不是您想要的。

省略left和right有效，因为绝对定位不会重置位置，只是切换计算方法。您也可以将这两个属性都设置为零，然后将视频对齐到偏移父级左上角。 max-width 和 max-height 是不必要的——我只是看到在很多情况下人们都在努力限制他们的视频元素——不要打扰。

您可以为视频元素或其偏移父元素指定背景颜色。这样，您将获得信箱效果 - 例如，视频两侧的黑条。

【参考方案2】：

由于您的video 在div 内，因此可以通过将视频的宽度和高度都设置为100% 来解决此问题。这使得视频占据了 div 元素的 100%。

标记示例：

<div id="video_container">
   <video></video>
</div>

样式表：

#video_container video 
    width: 100%;
    height: 100%;

【讨论】：

这正是我最初所做的。这是显而易见的事情。但它没有（或者至少 3 年前没有；这可能不再是这种情况了，之后的几个浏览器版本）。正如我在问题中所说：“如果包含 div 的尺寸低于视频图像的固有 videoWidth 或 videoHeight，那么它开始表现得好像 CSS 高度/宽度属性指的是视频图像固有尺寸的百分比，而不是容器 div ！”这就是我需要解决的问题。

我认为底线是浏览器始终保留视频的纵横比。

用户代理是否保留纵横比与问题无关——即使保留纵横比，根据哪个约束条件计算最大高度或宽度在数学上和其他方面都是微不足道的更适用，并计算其他维度以使纵横比正确。例如，这就是您在 4:3 显示屏上观看带有 4:3 内容的信箱电影的方式，反之亦然。你会得到黑条。使用video 可以通过background-color 属性实现。