escala HTML5 Video y relación de aspecto de rotura para llenar todo el sitio

Quiero usar un video 4: 3 como fondo en un sitio, pero establecer el ancho y alto al 100% no funciona, ya que la relación de aspecto se mantiene intacta , por lo que el video no llena todo el ancho del sitio.escala HTML5 Video y relación de aspecto de rotura para llenar todo el sitio

gracias por su ayuda!

aquí es mi código HTML y CSS

html:

<!DOCTYPE HTML> 
<html land="en"> 

<head> 

<link rel="stylesheet" type="text/css" href="html5video.css" /> 


<title>html 5 video test</title> 


</head> 

<body id="index"> 

<video id="vidtest" autoplay> 
<source src="data/comp.ogv" type="video/ogg" width="auto" > 
</video> 

<div class="cv"> 

<p> 
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 

</div> 


</body> 
</html>

css:

body 
{ 
background-color:#000000; 
} 



#vidtest { 
position: fixed; 
top: 0px; 
left: 0px; 
right: 0px; 
bottom: 0px; 
width: 200%; 
height: 100%; 
z-index: -1000; 
} 

.cv 
{ 
width: 800px; 
position:relative; 
text-align:center; 
margin-top: 100px; 
color:#FFFFFF; 
font-family:"Arial"; 
font-size: 10px; 
line-height: 2em; 
text-shadow: 3px 3px 2px #383838; 
margin-left: auto; 
margin-right: auto; 
}

Fuente

2010-10-22 Roland

http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/

[...] de la misma manera como se el elemento img - si solo configura uno de ancho y alto, th La otra dimensión se ajusta automáticamente de forma adecuada para que el video conserve su relación de aspecto. Sin embargo, a diferencia del elemento img, si configura ancho y alto en algo que no coincide con la relación de aspecto del video, el video no se alarga para llenar el cuadro. En su lugar, el video conserva la relación de aspecto correcta y se muestra en forma de buzón dentro del elemento de video. El video se renderizará lo más grande posible dentro del elemento de video mientras se mantiene la relación de aspecto.

Fuente

2010-10-22 21:01:56 drudge

gracias, ¿dónde está el mejor lugar para quejarse de esto, sin embargo? Es solo una reticencia innecesaria en mi opinión. – Roland

siempre puede usar el espacio donde ** el video ** no está reproduciéndose para agregar widgets y cosas. :) – drudge

@Roland Las especificaciones de HTML5 todavía están en las etapas de diseño, así que si quieres quejarte estoy seguro de que puedes buscar maneras de hacerlo :) –

que evitar este en javascript comparando el conjunto cociente en el elemento a la fuente de vídeo y luego aplicar una transformada de CSS: https://gist.github.com/1219207

Fuente

2011-09-15 13:28:06

abordó esta cuestión ayer y han estado luchando por una respuesta. Esto es algo similar a la sugerencia de Jim Jeffers, pero funciona para la escala xey, está en la sintaxis de JavaScript y solo se basa en jQuery. Parece que funciona bastante bien:

function scaleToFill(videoTag) { 
    var $video = $(videoTag), 
     videoRatio = videoTag.videoWidth/videoTag.videoHeight, 
     tagRatio = $video.width()/$video.height(); 
    if (videoRatio < tagRatio) { 
     $video.css('-webkit-transform','scaleX(' + tagRatio/videoRatio + ')') 
    } else if (tagRatio < videoRatio) { 
     $video.css('-webkit-transform','scaleY(' + videoRatio/tagRatio + ')') 
    } 
}

se encontrará con algunos problemas si está utilizando los controles nativos como se puede ver en este violín: http://jsfiddle.net/MxxAv/

Tengo algunos requisitos inusuales debido a todo el capas de abstracción en mi proyecto actual. Por eso, estoy usando un divisor envoltorio en el ejemplo y escalando el video al 100% dentro del envoltorio para evitar problemas en algunos de los casos de esquina que he encontrado.

Fuente

2012-10-31 21:09:56 Shane

+1 Para la relación X/Y – Yehonatan

que puede utilizar:

min-width: 100%; 
min-height: 100%;

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

Fuente

2014-01-09 15:32:57 Ouadie

ese artículo fue excelente, gracias – iamserious

este un hilo muy viejo, lo sé, y lo que estoy proponiendo no es necesserily la solución que está buscando, sino para todas las personas que aterrice aquí debido a la búsqueda de lo que busqué: escalar el video para llenar el elemento del contenedor de video, manteniendo la proporción intacta

Si desea que el video llene el tamaño del elemento <video>, pero el video se escala correctamente para llenar el contenedor manteniendo la relación de aspecto intacta, puede hacerlo con CSS usando object-fit.Al igual que background-size de imágenes de fondo que puede utilizar el siguiente:

video { 
    width: 230px 
    height: 300px; 
    object-fit: cover; 
}

espero que esto puede ser de ayuda para algunas personas.

EDIT: not in all browsers yet.

Fuente

2015-03-05 00:02:59 Mathias

object-fit: cover; OMG I LOVE YOU – moeiscool

Lo utilizo para llenar ya sea ancho o la altura ... (requiere jQuery) Esto mantiene la relación de aspecto y llena el div. Sé que la pregunta era romper la relación de aspecto, pero no es necesario.

var fillVideo = function(vid){ 
    var video = $(vid); 
    var actualRatio = vid.videoWidth/vid.videoHeight; 
    var targetRatio = video.width()/video.height(); 
    var adjustmentRatio = targetRatio/actualRatio; 
    var scale = actualRatio < targetRatio ? targetRatio/actualRatio : actualRatio/targetRatio; 
    video.css('-webkit-transform','scale(' + scale + ')'); 
};

siempre y cuando el <video> tiene anchura y la altura se establece en 100% y su contenedor div css tiene overflow:hidden que sólo tiene que pasar la etiqueta video.

var vid = document.getElementsByTagName("video")[0]; 
fillVideo(vid);

Fuente

2015-03-26 09:51:10 Mulhoon

La opción CSS correcta para esto es object-fit: contain;

El siguiente ejemplo estirar una imagen de fondo a través del ancho de la pantalla (mientras que romper la relación de aspecto), y el mantenimiento de una altura fija constante.

body { 
    background-image:url(/path/to/background.png) 
    background-repeat: no-repeat; 
    background-position: top center; 
    background-size: 100% 346px; 
    object-fit: contain; 
}

Para ver un vídeo en el contexto de la OP sería entonces:

video#vidtest { 
    width: 100%; 
    height: 100%; 
    object-fit: contain; 
}

Fuente

2015-07-15 17:37:21 user2121874

Esto no funciona para videos que usan Android 4.4.4 WebView (aplicación Cordova). –

Después de un forcejeo, esto es lo que terminó con. Escalará automáticamente el video en el momento correcto.

var videoTag = $('video').get(0); 
videoTag.addEventListener("loadedmetadata", function(event) { 
    videoRatio = videoTag.videoWidth/videoTag.videoHeight; 
    targetRatio = $(videoTag).width()/$(videoTag).height(); 
    if (videoRatio < targetRatio) { 
     $(videoTag).css("transform", "scaleX(" + (targetRatio/videoRatio) + ")"); 
    } else if (targetRatio < videoRatio) { 
     $(videoTag).css("transform", "scaleY(" + (videoRatio/targetRatio) + ")"); 
    } else { 
     $(videoTag).css("transform", ""); 
    } 
});

sólo hay que poner ese código en un bloque $(document).ready().

Probado en Chrome 53, Firefox 49, Safari 9, IE 11 (IE escala el video correctamente, pero podría hacer otras cosas divertidas a su alrededor).

Fuente

2016-10-14 22:40:42 jox

lo que funcionó para mí es

video { 
object-fit: fill; 
}

Fuente

2016-12-03 17:53:10 JAck

Gracias. Esto en realidad rompió la relación de aspecto, que es lo que OP solicitó. –

escala HTML5 Video y relación de aspecto de rotura para llenar todo el sitio

Respuesta

Cuestiones relacionadas