playsinline - Safari en iPad(iOS6) no escala el video HTML5 para llenar el 100% del ancho de la página
autoplay video ios (5)
Veo dos problemas aquí:
Mobile Safari no determinará las dimensiones de su video (o relación de aspecto) por usted. Debe especificar el alto y el ancho en los atributos del elemento o CSS, porque no va a descargar el encabezado del archivo de video hasta que empiece a jugar. Vea esta página , tercera sección.
Incluso si haces eso, al navegador no parece importarle. Cuando lo configura en automático, vuelve a la altura predeterminada de 150 px. Honestamente, no puedo entender por qué. Probablemente sea un error. Pero...
... hay una solución.
iOS no parece tener el mismo problema con un lienzo. Entonces puede colocar un lienzo y su video dentro de un div, que se establece en position: relative . Escala el lienzo como lo harías con tu video. Establezca el video en la position: absolute alto y ancho, ambos al 100%. De esta forma, el lienzo obligará al div a ser del tamaño que desee, y el video se expandirá para llenar el div.
Muestra de trabajo aquí: http://jsbin.com/ebusok/135/
Estoy usando el siguiente CSS para mostrar un video de ancho completo (100%) en una página responsiva de HTML5. El tamaño nativo del video es 480x270. El video se escala para ocupar todo el ancho de la página en todos los navegadores de escritorio mientras se mantiene la relación de aspecto.
Sin embargo, Mobile Safari y Chrome en mi iPad (iOS 6.0.1) muestran un rectángulo negro con el mismo ancho que la página. El video es pequeño y se muestra en su tamaño original (480x270) en el centro del rectángulo negro.
video {
width: 100%;
max-width: 100%;
height: auto;
}
inspirado en http://webdesignerwall.com/tutorials/css-elastic-videos . Hay un comentario en esta página que me lleva a pensar que hay una regresión en iOS6.
Desde que actualicé mi iPad a iOS 6, esta solución parece no funcionar más, creo que es altura: el problema es automático. ¿Alguien experimentado similar y tiene una solución?
¿Alguien más está experimentando este problema? ¿Hay alguna forma de mostrar un video HTML5 con todo el ancho en el iPad (iOS6) mientras se preserva la relación de aspecto usando solo CSS?
El HTML es el siguiente:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1" />
<style>
video {
width: 100%;
max-width: 100%;
height: auto;
border: 1px solid red;
}
</style>
</head>
<body>
<video preload autoplay controls>
<source src="file.mp4" type="video/mp4">
<source src="file.webm" type="video/webm; codecs=vp8, vorbis">
<source sr="file.ogv" type="video/ogg; codecs=theora, vorbis">
</video>
Tenía que hacer algo similar con los videos subidos por los usuarios. Esto significa: no sé qué resolución tiene el video, incluso podría estar en modo retrato.
Mi trabajo fue establecer la altura a través de javascript cuando se cargan los metadatos. Para la mayoría de los navegadores, el video tiene el tamaño correcto desde el principio; en el iPad, el tamaño del video se ajusta cuando el usuario toca el juego. Para mí, estuvo bien permitir que el video creciera tan pronto como sé lo grande que debe ser.
Código (object.id se usa porque en mi configuración podría haber varios videos en la misma página):
<script type="text/javascript">
// set height and width to native values
function naturalSize_{{ object.id }}() {
var myVideo = document.getElementById(''video-{{ object.id }}'');
var ratio = myVideo.videoWidth / myVideo.videoHeight;
var video_object = $(''#video-{{ object.id }}'');
video_object.animate({
height: (video_object.width() / ratio) + "px"
}, 1000);
}
$(document).ready(function() {
var myVideo = document.getElementById(''video-{{ object.id }}'');
myVideo.addEventListener(''loadedmetadata'', naturalSize_{{ object.id }}, false);
})
</script>
Si alguien tiene una solución más limpia, tal vez en CSS puro, me gustaría verla ...
Tuve un escenario similar con IOS6 y un objeto de video que no cambiaba de tamaño a su principal. Lo resolví apuntando a todos los elementos dentro del div principal que contiene el video con CSS. Entonces, en su ejemplo, debería rodear su video con un div (por ejemplo, class = "DivWithVideo") y agregar el siguiente CSS:
.DivWithVideo * {max-width: 100%}
Al incorporar parte de la respuesta de @brianchirls, esto es lo que hice. Esto parece estar funcionando hasta ahora en computadoras de escritorio, Android e iOS. Aproveche el truco de relleno receptivo, donde la parte superior acolchada, como porcentaje, será un porcentaje del ancho. Mi video es 16: 9 así que aquí está mi código:
#video-container {
position: relative;
padding-top: 56.25%;
}
video, object {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
}
puede usar esto para establecer el centro de su video en el contenedor con los márgenes que desee. no es necesario agregar un elemento adicional. arreglar para iOS 7 especialmente. preste atención a -webkit-calc prefijos -webkit-calc si es necesario
width: 100%;
position: absolute;
top: calc(50% - 10px);
left: 50%;
height: calc(100%);
-webkit-transform: translateY(-50%) translateX(-50%);