HTML5视频缩放模式？

Question

我想制作一个全屏的HTML背景，这很容易。但是因为HTML5视频会被缩放以适应容器并保持纵横比，所以我无法获得所需的效果。

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

以下是使用Flash实现的所需效果：http://www.caviarcontent.com/

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

谢谢帮助！

- Drew Baker

---

看一下这个：http://syddev.com/jquery.videoBG 这应该是你要找的 :) - sydlawrence

Answer 1

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

video {
    object-fit: cover;
}

http://caniuse.com/object-fit

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

这仅适用于 Chrome 31+，但它是最简单的 CSS 解决方案，并且是候选推荐。

- Michael

---

我认为每个人都会喜欢这个，但现在它并不是一个可选项（只有16%的市场份额支持）。 - marksyzm

根据 MDN 的说法，除了 IE 现在不支持，该功能在所有最近的浏览器中都得到支持。 - Dominik George

@DominikGeorge Edge 也不被支持。 - oucil

对我没用 :/ - Michael 下面的回答完美解决了问题。 - Stephen Tetreault

截至7月20日，支持率达到96.89％。 - Michael

Answer 2

你可以只使用CSS来完成这个操作:

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

显然对于transform属性使用适当的供应商前缀。

奖励内容：要将此方法用于图像，您可以使用“background-size: cover;”将图像裁剪到所需的空间：

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

- Michael

---

我发现这将会拉伸一张图片。 - Drew Baker

@DrewBaker 请查看修改后的答案。 - Michael

Answer 3

我是使用同一个函数在这里写过后，解决了这个问题。

如果在页面中有一个<video>元素，这个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);        
    });

});

- Drew Baker

---

我学到的一个小技巧在这里，就是你需要为元素添加width和height标签。否则视频会向右推出页面。 - synth3tk

Answer 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

这个链接展示了有关HTML 5全屏和响应式视频的教程。

- womd

---

链接页面已经损坏。 - Victor Zamanian

@VictorZamanian - 我更新了一个网页存档版本的链接...干杯 - womd

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

```

- Zhouxing Fang