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

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

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

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

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

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

4 ответа

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

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


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


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


быстрый и грязный только css:

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

как показано на: http://www.codesynthesis.co.uk/tutorials/html-5-full-screen-and-responsive-videos

licensed under cc by-sa 3.0 with attribution.