css - functions - video html5 options
escala de video HTML5 y relación de aspecto de ruptura para llenar todo el sitio (9)
Después de un poco de lucha, esto es con lo que terminé. Se escalará automáticamente el video en el momento adecuado.
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", "");
}
});
Simplemente coloque ese código en un bloque $(document).ready() .
Probado en Chrome 53, Firefox 49, Safari 9, IE 11 (IE escala el video correctamente, pero puede hacer otras cosas divertidas a su alrededor).
Quiero usar un video 4: 3 como fondo en un sitio, pero configurar el ancho y la altura al 100% no funciona, ya que la relación de aspecto se mantiene intacta, por lo que el video no ocupa todo el ancho del sitio.
¡gracias por tu ayuda!
Aquí está 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;
}
Este es un tema muy antiguo, lo sé, y lo que estoy proponiendo no es necesariamente la solución que está buscando, sino para todas las personas que aterrizan aquí por buscar lo que busqué: escalar el video para llenar el elemento del contenedor de video, mantener relación intacta
Si desea que el video llene el tamaño del elemento <video> pero el video se escala correctamente para llenar el contenedor mientras mantiene la relación de aspecto intacta, puede hacer esto con CSS utilizando object-fit . Al igual que background-size de fondo para las imágenes de fondo, puede utilizar lo siguiente:
video {
width: 230px;
height: 300px;
object-fit: cover;
}
Espero que esto pueda ser de ayuda para algunas personas.
La opción de 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 rompe la relación de aspecto), y mantiene 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 un video en el contexto del OP sería:
video#vidtest {
width: 100%;
height: 100%;
object-fit: contain;
}
Lo que funcionó para mí es
video {
object-fit: fill;
}
Lo uso para rellenar ancho o alto ... (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 que el <video> tenga el ancho y la altura establecidos al 100% y su div contenedor contenga un overflow:hidden css overflow:hidden solo pásele la etiqueta de video.
var vid = document.getElementsByTagName("video")[0];
fillVideo(vid);
Recogí esto ayer y he estado luchando por una respuesta. Esto es algo similar a la sugerencia de Jim Jeffers, pero funciona para escalas xey, está en sintaxis de javascript y solo se basa en jQuery. Parece funcionar 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á usando los controles nativos como puede ver en este fiddle: http://jsfiddle.net/MxxAv/
Tengo algunos requisitos inusuales debido a todas las capas de abstracción en mi proyecto actual. Debido a eso, estoy usando una división de envoltura en el ejemplo y escalando el video al 100% dentro de la envoltura para evitar problemas en algunos de los casos de esquina que he encontrado.
Trabajo alrededor de esto en javascript comparando la proporción establecida en el elemento con el video de origen y luego aplicando una transformación CSS: https://gist.github.com/1219207
http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/
[...] de la misma manera que el elemento img: si solo configura uno de ancho y alto, la otra dimensión se ajusta automáticamente de manera apropiada para que el video retenga su relación de aspecto. Sin embargo, a diferencia del elemento img, si establece el ancho y el alto en algo que no coincida con la relación de aspecto del video, el video no se estira para llenar el cuadro. En cambio, el video conserva la relación de aspecto correcta y está dentro de un 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.
puedes usar:
min-width: 100%;
min-height: 100%;
http://www.codesynthesis.co.uk/tutorials/html-5-full-screen-and-responsive-videos