动态更改 HTML5 视频分辨率的最佳方法答案

【问题标题】：Best way to dynamically change the resolution of an HTML5 video动态更改 HTML5 视频分辨率的最佳方法
【发布时间】：2012-03-21 12:41:43
【问题描述】：

在网页中动态更改 HTML5 视频的宽度和高度的最佳方法是什么？我所指的行为与http://flipboard.com/的介绍视频中的行为相同

调整窗口大小时，视频仍占可视大小的 100%（不滚动）。我注意到视频会在一定程度上调整大小，但会停止调整大小并在某些时候被裁剪。

获得相同行为的最佳方法是什么？我想让视频占据浏览器的整个可视区域而没有滚动条。这只是在台式机/笔记本电脑上，我不考虑使用任何移动设备 ATM。

我现在想到的是使用 javascript 动态更改视频的宽度/高度属性以适应可视区域，但还要设置最小尺寸以使视频不会失真。视频可以放置在始终居中的容器中，因此如果浏览器的尺寸太小，它会被有效地裁剪。我不确定这是否太啰嗦，是否有更简单的方法。

谢谢。

【问题讨论】：

标签： css dynamic resize html5-video

【解决方案1】：

看起来他们将高度和宽度的 css 属性设置为 100%。如果您使用像 chrome 或 Firefox 的 firebug 那样内置的元素检查器，您应该能够准确地看到它们是如何为 video 元素以及嵌套在其中的 div 构建 html/css 的。然后，正如你所说，还要设置一个 min-width/min-height 属性。

除非我误读了您的问题，否则应该就这么简单。希望这会有所帮助！

【讨论】：

【解决方案2】：

您可以使用“响应式 CSS”来做到这一点，有一些方法可以做到这一点，
您可以设置viewport、max-width、min-width 等。
这个链接有一个很好的解释如何做到这一点：http://kyleschaeffer.com/best-practices/responsive-layouts-using-css-media-queries/

【讨论】：