HTML 5 Video stretch

¿Puedes hacer que un video se “estire” al ancho y alto del elemento de video? Aparentemente por defecto, el video se escala y se ajusta dentro del elemento de video, proporcionalmente.

Gracias

He probado usando object-fit: rellenar CSS

Funciona bien

video { object-fit: fill; } 

Desde MDN ( https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit ):

La propiedad CSS de ajuste de objeto especifica cómo el contenido de un elemento reemplazado debe ajustarse al cuadro establecido por su altura y ancho usados.

Valor: llenar

El contenido reemplazado está dimensionado para llenar el cuadro de contenido del elemento: el tamaño del objeto concreto del objeto es el ancho y la altura usados ​​del elemento.

De la especificación para :

El contenido de video debe mostrarse dentro del área de reproducción del elemento, de modo que el contenido de video se muestre centrado en el área de reproducción al mayor tamaño posible que encaje completamente en él, con la relación de aspecto del contenido de video preservada. Por lo tanto, si la relación de aspecto del área de reproducción no coincide con la relación de aspecto del video, el video se mostrará en letterbox o pillarboxed. Las áreas del área de reproducción del elemento que no contienen el video no representan nada.

No hay disposiciones para estirar el video en lugar de letterboxing. Esto es probable porque el estiramiento brinda una experiencia de usuario muy mala, y la mayoría de las veces no es lo que se pretende. Las imágenes se estiran para ajustarse por defecto, y debido a eso, se ven muchas imágenes que están muy distorsionadas en línea, muy probablemente debido a un simple error al especificar el alto y el ancho.

Puede lograr un efecto estirado usando transformaciones CSS 3 , aunque estas no están completamente estandarizadas o implementadas en todos los navegadores, y en las que se implementa, necesita usar un prefijo de proveedor como -webkit- o -moz- . Aquí hay un ejemplo:

    

Esto funcionó perfectamente para mí

http://coding.vdhdesign.co.nz/?p=29

 $VideoElement = $(_VideoElement); //Cache Jquery reference of this var iOriginalVideoHeight = _VideoElement.videoHeight; var iCurrentVideoHeight = $VideoElement.height(); var iVideoContainerHeight = $VideoElement.parent().height(); var iCurrentScale = iOriginalVideoHeight/iCurrentVideoHeight; var iScaleY = (iVideoContainerHeight / iOriginalVideoHeight)*iCurrentScale; //Important to note: Set the origin to the top left corner (0% 0%), or else the position of the video goes astray $VideoElement.css({ "transform-origin": "0% 0%", "transform":"scaleY(" + iScaleY +")", "-ms-transform-origin" : "0% 0% ", /* IE 9 */ "-ms-transform":"scaleY(" + iScaleY +")", /* IE 9 */ "-moz-transform-origin" : "0% 0%", /* Firefox */ "-moz-transform":"scaleY(" + iScaleY +")", /* Firefox */ "-webkit-transform-origin": "0% 0%", /* Safari and Chrome */ "-webkit-transform":"scaleY(" + iScaleY +")", /* Safari and Chrome */ "-o-transform-origin":"0% 0%", /* Opera */ "-o-transform":"scaleY(" + iScaleY +")" /* Opera */ }); 

También existe la propiedad CSS adecuada para objetos , que probablemente le proporcione lo que necesita.

A propósito, creo que esta solicitud se relaciona con ¿Cómo puedo hacer que la reproducción de video HTML 5 se ajuste al fotogtwig en lugar de mantener la relación de aspecto? .

Esto no cambiará la proporción de su video, pero se deshace de los feos espacios “sin llenar” en la parte superior, inferior o lateral del visor de video SI su navegador no admite el object-fit:cover estilo de object-fit:cover .

Supongamos que tiene un visor en la página de 500×281 (un cambio de tamaño adecuado de 1280×720). Pero a veces puede obtener un video que no está adecuadamente proporcionado a exactamente 16: 9, digamos 1278×720 o 320×176 como en el caso del video ‘Buck Bunny’ en el sitio del W3C. Sería bueno si el video llenó el contenedor por completo y no tiene que crear un nuevo contenedor para cada video de proporciones incorrectas.

Dado un fragmento de código como:

   

renderizará un video con líneas negras o blancas en la parte superior e inferior dependiendo de cómo maneje su navegador el object-fit . Agregue el siguiente JavaScript para cambiar el tamaño de la altura del contenedor de video, haciendo que esas líneas desaparezcan al obligar a su contenedor de video a que coincida con el video, al menos verticalmente.

  

Dividimos el ancho actual del contenedor por el ancho determinado de la secuencia de video y multiplicamos por la altura determinada de la secuencia de video. Eso resulta en lo que la altura del contenedor debe ser forzar lo más limpio posible de un ajuste.

Es importante que la altura y el ancho del video se establezcan como atributos en el HTML además de la definición de CSS.