Video HTML5视频缩放模式？

我正在尝试制作一个全屏HTML背景，这很简单。但是，由于HTML5视频在保持纵横比的同时调整了大小以适应容器，所以我无法获得理想的效果

HTML5视频有不同的缩放模式吗？我想按比例填充和裁剪

这是在Flash中实现的理想效果：

如果调整窗口大小，您将看到它的缩放和裁剪。你永远不会得到黑条

---

谢谢你的帮助

我通过使用相同的函数找到了它

如果页面上有一个元素，此jQuery调整大小功能将缩放视频，使其完全覆盖浏览器窗口

通过更改browserHeight和browserWidth变量，可以缩放视频以适应DIV（确保将该DIV设置为overflow:hidden）

此功能还将随浏览器窗口动态调整大小

    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);        
    });

});

var-sxsw={
完全放气：功能（箱宽、箱高、内径、内径）{
//计算新的高度和宽度。。。
var initW=imgWidth；
var initH=imgHeight；
var比率=初始值/初始值；
imgWidth=箱宽；
imgHeight=箱宽*比率；
//如果视频的高度不合适，那么就让它这样。。。
if（仪表板高度<箱体高度）{
imgHeight=箱高；
imgWidth=imgHeight/比值；
}
//返回视频的新大小
返回{
宽度：imgWidth，
高度：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_引气（浏览器宽度、浏览器高度、视频宽度、视频高度）；
jQuery（'视频'）
.宽度（新尺寸.宽度）
.高度（新尺寸.高度）；
}
};
jQuery（文档）.ready（函数（$）{
/*
*全出血背景
*/
sxsw.init（）；
$（窗口）。调整大小（函数（）{
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_引气（浏览器宽度、浏览器高度、视频宽度、视频高度）；
$（“视频”）
.宽度（新尺寸.宽度）
.高度（新尺寸.高度）；
});
});

您只需使用CSS即可做到这一点：

video {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);        
}

显然，为transform属性使用适当的供应商前缀

好处：要对图像执行此操作，可以使用“背景大小：封面；”将图像裁剪到所需的空间：

.background {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(background-image.jpg) center;
  background-size: cover;
}

---

使用CSS执行此操作的另一种方法是使用object fit属性。这适用于视频或img元素

video {
    object-fit: cover;
}

---

这仅在Chrome 31+中兼容，但它是最简单的CSS解决方案，是一个候选建议。

仅在CSS中快速且肮脏：

video
{
    width: 100%;
    height: auto;
    max-height: 100%;
}

如图所示：

---

我使用ExtJS 5来显示视频，下面的代码很有效

```

var w=Ext.widget（'window'{
renderTo:Ext.getBody（），
x:10，
y:10，
宽度：480，
身高：670，
最大化：是的，
html:'
})
w、 show（）

---

```

看看这个：它应该是你想要的：）我想每个人都会喜欢这个，但它只是目前为止（16%的市场份额支持）不是一个选项，在所有最近的浏览器中都支持，除了IE now，根据MDN@DominikGeorgeEdge也不受支持。对我来说不起作用：/-Michael下面的答案非常有效。幸好这救了我一天。！我发现这会拉伸图像。@DrewBaker看到修改后的答案。我学到的一个小技巧是，你需要在元素中添加一个

width

和

height

标记。否则，视频会将页面推到右侧。链接页面已断开。@VictorZamanian-我更新了指向webarchive版本的链接。。。干杯

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()