设置一个 HTML5 Video 元素来覆盖？
在CSS中，背景图像可以使用cover的size属性，这意味着图像总是足够大以填充空间。
我想使用 HTML5 视频元素创建相同的大小调整原则。有人有如何执行此操作的示例吗？
诀窍是计算出您要填充的盒子/窗口与视频的宽度：高度比，并进行相应调整。
谢谢！
In css, background images can use the size property of cover, this means the image will always be exactly big enough to fill the space.
I want to create this same sizing principal with an HTML5 video element. Does anyone have an example of how to do this?
The trick is figuring out width:height ratio of the box/window you're fillings compared to the video and adjust accordingly.
Thanks!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
如果您不介意一点 JQuery，您可能想看看这个插件 - http:// syddev.com/jquery.videoBG/
另外，深入了解 HTML5 系列是一篇关于使用 HTML5 视频的超级全面的文章 - http://diveintohtml5.info/video.html
If you don't mind a bit of JQuery, you might want to have a look at this plugin- http://syddev.com/jquery.videoBG/
Also, a great super comprehensive article on using HTML5 video is the Dive into HTML5 series - http://diveintohtml5.info/video.html
VideoBG 很好，但通过将元素设置为固定位置来工作，因此它可以用于例如实现视频位于“滚动页面”内的效果，等等。
VideoBG is nice, but works by setting the element to fixed position, so it can be used, for example, for implementing effects where the video is inside a "scrolling page", and so on, it seems.
您可以利用 CSS 翻译属性，因为它是根据元素大小计算的，无论视频输出的分辨率如何，它都允许您将其居中。
您可以使用 min-width 和 min-height 保持比例
在这里进行操作
You can take advantage of the CSS translate property as it is calculated on element size, it allows you to center it no matter the resolution of the video output you have.
You can keep ratios using min-width and min-height
Fiddle here