Режимы видеосъемки HTML5?

Я пытаюсь создать полноэкранный HTML-фон, что достаточно просто. Но поскольку видео HTML5 изменяется в соответствии с контейнером при сохранении пропорций, я не могу получить желаемого эффекта.

Существуют ли различные режимы масштабирования для видео HTML5? Я хотел бы масштабировать для заполнения и урожая.

Это желаемый эффект во Flash: http://www.caviarcontent.com/

Если вы измените размер окна, вы увидите его масштаб и обрезку. Вы никогда не получите черные полосы.

Спасибо за помощь!

ОТВЕТЫ

Ответ 1

Я понял это, используя ту же функцию о которой я писал здесь.

Если у вас есть элемент на странице, эта функция изменения размера 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);        
    });

});

Ответ 2

Другой способ сделать это с помощью 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 и является рекомендацией кандидата.

Ответ 3

Вы можете сделать это только с помощью 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;
}

Ответ 4

Я использую 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()

"""