HTML5 视频缩放模式？答案

【问题标题】：HTML5 Video scale modes?HTML5 视频缩放模式？
【发布时间】：2010-12-07 18:17:48
【问题描述】：

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

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

这是在 Flash 中完成的预期效果： http://www.caviarcontent.com/

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

感谢您的帮助！

【问题讨论】：

看看这个：syddev.com/jquery.videoBG应该是你要找的:)

标签： video html fullscreen scale

【解决方案1】：

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

video {
    object-fit: cover;
}

http://caniuse.com/object-fit

http://dev.opera.com/articles/css3-object-fit-object-position/

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

【讨论】：

我想每个人都会喜欢这个，但它现在根本不是一个选择（16% 的市场份额支持）
根据 MDN，除 IE 外，所有最近的浏览器都支持
@DominikGeorge Edge 也不支持。
对我没用：/ - 下面迈克尔的回答非常完美。
感谢这拯救了我的一天！

【解决方案2】：

您只需使用 CSS 即可：

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

显然为转换属性使用适当的供应商前缀

奖励：要对图像执行此操作，您可以使用“background-size:cover;”将图像裁剪到所需的空间：

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

【讨论】：

我发现这会拉伸图像。
@DrewBaker 查看修改后的答案。

【解决方案3】：

我用同样的函数I wrote about here弄明白了。

如果页面上有一个元素，这个 jQuery 调整大小功能会将视频缩放到浏览器窗口的全出血。

通过更改 browserHeight 和 browserWidth 变量，您可以缩放视频以适合 DIV（确保将该 DIV 设置为溢出：隐藏）。

此函数还将随浏览器窗口动态调整大小。

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

});

【讨论】：

我学到的一个小技巧here 是您需要在元素中添加width 和height 标记。否则视频会从页面向右推。

【解决方案4】：

仅使用 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

【讨论】：

链接页面已损坏。
@VictorZamanian - 我更新了指向 webarchive 版本的链接......干杯

【解决方案5】：

我使用 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()

```

【讨论】：