html5 - the - ¿Cómo rellenar el elemento de video con la imagen del póster incluso si la imagen del póster tiene una relación de aspecto diferente a su elemento de video?
video poster css3 (1)
Esta pregunta me hizo pensar y su jsfiddle fue útil para resolver esto (aunque no para IE, ya que no implementa la imagen del póster correctamente).
Básicamente, combine lo que publicó, configure la imagen de póster requerida como la imagen de fondo del elemento de video y especifique una imagen transparente de 2x2 como la imagen de póster real.
p.ej
<video controls poster="transparent.png">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>
y
video {
width:305px;
height:160px;
background:transparent url(''poster.jpg'') no-repeat 0 0;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
Escribí un poco más sobre esto en Vídeo HTML5 e Imágenes de fondo .
Esta pregunta ya tiene una respuesta aquí:
Tal como está ahora, esto solo se prueba en WebKit.
Cuando se establece una imagen de póster en un elemento <video> utilizando el atributo de poster , esta imagen se muestra antes de que el usuario reproduzca el video (comportamiento predeterminado). Sin embargo, si la imagen del póster tiene una relación de aspecto diferente a la del elemento <video> que está configurada, el espacio en blanco (o posiblemente el espacio en negro) se ve a cada lado de la imagen (izquierda y derecha o arriba y abajo) y La imagen está centrada (también, comportamiento por defecto).
Me gustaría saber cómo escalar esta imagen (preferiblemente en CSS) para que llene el elemento de video, de forma similar al uso de CSS3 background-size: cover; valor.
¿Sigo confundido? Quizás este JSFiddle ayude a explicar: http://jsfiddle.net/jonnymilano/2w2CE/
También estaría interesado en las respuestas que forzaron la imagen en el contenedor de video, deformando su altura y / o ancho para ajustarse a las dimensiones del contenedor de video. Sin embargo, esta respuesta solo resolvería parcialmente mi problema.