Html HTML5 视频缩放模式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4380105/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 Video scale modes?
提问by Drew Baker
I'm trying to make a fullscreen HTML background, which is easy enough. But because HTML5 video get's resized to fit the container while maintaining aspect ratio, I can't gett he desired effect.
我正在尝试制作全屏 HTML 背景，这很容易。但是因为 HTML5 视频在保持纵横比的同时调整了大小以适应容器，我无法得到他想要的效果。
Are there different scale modes for HTML5 video? I'd like to scale to fill-and-crop.
HTML5 视频是否有不同的缩放模式？我想缩放到填充和裁剪。
This is the desired effect done in Flash: http://www.caviarcontent.com/
这是在 Flash 中完成的预期效果：http: //www.caviarcontent.com/
If you resize the window you'll see it scale and crop. You will never get black bars.
如果您调整窗口大小，您会看到它缩放和裁剪。你永远不会得到黑条。
Thanks for the help!
谢谢您的帮助！
采纳答案by Drew Baker
I figured it out by using the same function I wrote about here.
If you have a element on the page, this jQuery resizing function will scale the video to be full bleed of the browser window.
如果页面上有一个元素，此 jQuery 调整大小功能将缩放视频以完全覆盖浏览器窗口。
By changing the browserHeight and browserWidth variables you could have the video scaled to fit a DIV (make sure you set that DIV to overflow:hidden).
通过更改 browserHeight 和 browserWidth 变量，您可以缩放视频以适合 DIV（确保将该 DIV 设置为溢出：隐藏）。
This function will also resize dynamically with the browser window.
此功能还将随浏览器窗口动态调整大小。
var sxsw = {
full_bleed: function(boxWidth, boxHeight, imgWidth, imgHeight) {
// Calculate new height and width...
var initW = imgWidth;
var initH = imgHeight;
var ratio = initH / initW;
imgWidth = boxWidth;
imgHeight = boxWidth * ratio;
// If the video is not the right height, then make it so...
if(imgHeight < boxHeight){
imgHeight = boxHeight;
imgWidth = imgHeight / ratio;
}
// Return new size for video
return {
width: imgWidth,
height: imgHeight
};
},
init: function() {
var browserHeight = Math.round(jQuery(window).height());
var browserWidth = Math.round(jQuery(window).width());
var videoHeight = jQuery('video').height();
var videoWidth = jQuery('video').width();
var new_size = sxsw.full_bleed(browserWidth, browserHeight, videoWidth, videoHeight);
jQuery('video')
.width(new_size.width)
.height(new_size.height);
}
};
jQuery(document).ready(function($) {
/*
* Full bleed background
*/
sxsw.init();
$(window).resize(function() {
var browserHeight = Math.round($(window).height());
var browserWidth = Math.round($(window).width());
var videoHeight = $('.wd-thumb-list li a').eq(0).attr('data-wd-height');
var videoWidth = $('.wd-thumb-list li a').eq(0).attr('data-wd-width');
var new_size = sxsw.full_bleed(browserWidth, browserHeight, videoWidth, videoHeight);
$('video')
.width(new_size.width)
.height(new_size.height);
});
});
回答by Michael
Another way to do this with CSS is to use the object-fit property. This works on video or img elements
使用 CSS 执行此操作的另一种方法是使用 object-fit 属性。这适用于视频或 img 元素
video {
object-fit: cover;
}
http://dev.opera.com/articles/css3-object-fit-object-position/
http://dev.opera.com/articles/css3-object-fit-object-position/
This is only compatible in Chrome 31+ but is the simplest CSS solution and is a Candidate Recommendation.
这仅在 Chrome 31+ 中兼容，但它是最简单的 CSS 解决方案，并且是候选推荐。
回答by Michael
You can do this just with CSS:
你可以只用 CSS 来做到这一点：
video {
position: absolute;
min-width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Obviously use the appropriate vendor prefixes for the transform property
显然对转换属性使用适当的供应商前缀
Bonus: to do this with an image, you can use "background-size: cover;" to crop the image to the desired space:
奖励：要对图像执行此操作，您可以使用“background-size: cover;” 将图像裁剪到所需的空间：
.background {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url(background-image.jpg) center;
background-size: cover;
}
回答by womd
a quick and dirty with css only:
仅使用 css 快速而肮脏：
video
{
width: 100%;
height: auto;
max-height: 100%;
}
如上所示：http: //web.archive.org/web/20171013204829/www.codesynthesis.co.uk/tutorials/html-5-full-screen-and-responsive-videos
回答by Zhouxing Fang
I use ExtJS 5 to show video, the following code works!
我使用 ExtJS 5 来显示视频，以下代码有效！
```
``
var w = Ext.widget('window',{
renderTo: Ext.getBody(),
x : 10,
y : 10,
width: 480,
height: 670,
maximizable: true,
html: '<video style="width: 100%;height: auto;max-height: 100%;" controls playsinline autoplay muted loop><source src="'+url+'" type="video/mp4"></video>'
})
w.show()
```
``
