设置要覆盖的 HTML5 视频元素？答案

【问题标题】：Set a HTML5 Video element to cover?设置要覆盖的 HTML5 视频元素？
【发布时间】：2012-02-20 10:34:33
【问题描述】：

在 css 中，背景图片可以使用封面的 size 属性，这意味着图片总是足够大以填满空间。

我想使用 HTML5 视频元素创建相同的大小调整原则。有没有人有如何做到这一点的例子？

诀窍是计算出您填充的框/窗口与视频相比的宽高比，并进行相应调整。

谢谢！

【问题讨论】：

【解决方案1】：

如果你不介意一点 JQuery，你可能想看看这个插件-http://syddev.com/jquery.videoBG/

另外，一篇关于使用 HTML5 视频的超级综合文章是 Dive into HTML5 系列 - http://diveintohtml5.info/video.html

【讨论】：

【解决方案2】：

VideoBG 很不错，但它通过将元素设置为固定位置来工作，因此它可以用于例如实现视频在“滚动页面”内的效果等等。

【讨论】：

【解决方案3】：

您可以利用 CSS translate 属性，因为它是根据元素大小计算的，无论您拥有的视频输出的分辨率如何，它都可以让您居中。

您可以使用 min-width 和 min-height 保持比率

position:absolute;
top: 50%;          
left: 50%;         
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);

【讨论】：