¿Modos de escala de video HTML5?

Question

Estoy tratando de hacer un fondo HTML a pantalla completa, que es bastante fácil. Pero debido a que el video HTML5 se redimensiona para ajustarse al contenedor mientras se mantiene la relación de aspecto, no puedo obtener el efecto deseado.

¿Hay modos de escala diferentes para video HTML5? Me gustaría escalar para llenar y recortar.

Este es el efecto deseado realizado en Flash: http://www.caviarcontent.com/

Si cambia el tamaño de la ventana verás que la escala y el cultivo. Nunca obtendrás barras negras

¡Gracias por la ayuda!

Answer 1

Lo descubrí usando la misma función I wrote about here.

Si tiene un elemento en la página, esta función de cambio de tamaño de jQuery escalará el video para que tenga un sangrado completo de la ventana del navegador.

Al cambiar las variables browserHeight y browserWidth puede hacer que el video se ajuste a una DIV (asegúrese de configurar ese DIV para desbordamiento: oculto).

Esta función también cambiará el tamaño dinámicamente con la ventana del navegador.

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 2

Esto se puede hacer simplemente con CSS:

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

usar Obviamente los prefijos de proveedores adecuados para la transformación propiedad

Bono: hacer esto con una imagen, puede utilizar "fondo -size: cover; " para recortar la imagen en el espacio deseado:

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

Answer 3

Otra forma de hacer esto con CSS es usar la propiedad object-fit. Esto funciona en elementos de vídeo o img

video { 
    object-fit: cover; 
} 

http://caniuse.com/object-fit

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

Esto sólo es compatible en Chrome 31+, pero es la solución más simple y CSS es una Candidata a Recomendación.

Answer 4

una rápida y sucia sólo con CSS:

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

como se ve en: http://www.codesynthesis.co.uk/tutorials/html-5-full-screen-and-responsive-videos