HTML5视频比例模式？

Question

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

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

这是Flash中所需的效果:http: //www.caviarcontent.com/

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

谢谢您的帮助!

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解决方案,并且是候选推荐标准.

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

Answer 3

我通过使用我在这里写的相同函数来解决它.

如果页面上有元素,则此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);        
    });

});

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