css - that - video src

Hacer que el póster de video HTML5 tenga el mismo tamaño que el video en sí

Question

¿Alguien sabe cómo cambiar el tamaño del póster de video HTML5 para que se ajuste a las dimensiones exactas del video en sí?

Aquí hay un jsfiddle que muestra el problema: http://jsfiddle.net/zPacg/7/

aquí está ese código:

HTML:

<video controls width="100%" height="100%"  poster="http://www.wpclipart.com/blanks/buttons/glossy_buttons/glossy_button_blank_orange_rectangle.png">
  <source src="http://demo.inwebson.com/html5-video/iceage4.mp4" type="video/mp4" />
  <source src="http://demo.inwebson.com/html5-video/iceage4.ogg" type="video/ogg" />
  <source src="http://demo.inwebson.com/html5-video/iceage4.webm" type="video/webm" />
</video>​

CSS:

video{
border:1px solid red;
}​

Tenga en cuenta que el rectángulo naranja no se adapta al borde rojo del video.

Además, solo agregar el CSS a continuación tampoco funciona, ya que vuelve a escalar el video junto con el póster:

video[poster]{
height:100%;
width:100%;
}

Answer 1

Dependiendo de qué navegadores esté orientando, puede ir a la propiedad de object-fit para resolver esto:

object-fit: cover;

o tal vez fill es lo que estás buscando. Todavía en consideración para IE .

Answer 2

Estuve jugando con esto e intenté con todas las soluciones, eventualmente la solución con la que fui fue una sugerencia del inspector de Google Chrome. Si agrega esto a su CSS, funcionó para mí:

video{
   object-fit: inherit;
}

Answer 3

Mi solución combina user2428118 y las respuestas de Veiko Jääger, lo que permite la precarga pero sin requerir una imagen transparente por separado. En su lugar, utilizamos una imagen transparente 1px codificada en base64.

<style type="text/css" >
    video{
        background: transparent url("poster.jpg") 50% 50% / cover no-repeat ;
    }
</style>
<video controls poster="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" >
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
</video>

Answer 4

O puede usar el atributo simplemente preload="none" para hacer visible el fondo de VIDEO. Y puedes usar background-size: cover; aquí.

 video {
   background: transparent url(''video-image.jpg'') 50% 50% / cover no-repeat ;
 }

 <video preload="none" controls>
   <source src="movie.mp4" type="video/mp4">
   <source src="movie.ogg" type="video/ogg">
 </video>

Answer 5

Puede cambiar el tamaño de la imagen después de generar el pulgar

exec("ffmpeg -i $video_image_dir/out.png -vf scale=320:240 {$video_image_dir}/resize.png",$out2, $return2);

Answer 6

Puede usar póster para mostrar la imagen en lugar de video en un dispositivo móvil (o dispositivos que no admitan la funcionalidad de reproducción automática de video). Porque los dispositivos móviles no admiten la funcionalidad de reproducción automática de video.

<div id="wrap_video">
<video preload="preload" id="Video" autoplay="autoplay" loop="loop" poster="default.jpg">
<source src="Videos.mp4" type="video/mp4">
Your browser does not support the <code>video</code> tag.
</video>
</div>

Ahora puede simplemente diseñar el atributo de póster que se encuentra dentro de la etiqueta de video para dispositivo móvil a través de consulta de medios.

#wrap_video
{
width:480px;
height:360px;
position: relative;
} 
@media (min-width:360px) and (max-width:780px)
{
video[poster]
{
top:0 !important;
left:0 !important;
width:480px !important;
height:360px !important;
position: absolute !important;
}
}

Answer 7

Puede usar una imagen de póster transparente en combinación con una imagen de fondo de CSS para lograr esto ( example ); sin embargo, para tener un fondo estirado a la altura y al ancho de un video, tendrá que usar una etiqueta <img> posicionada de manera absoluta ( example ).

También es posible establecer background-size en 100% 100% en los navegadores compatibles background-size ( example ).

Answer 8

Se me ocurrió esta idea y funciona perfectamente. Bien, básicamente queremos deshacernos del primer cuadro de video de la pantalla y luego cambiar el tamaño del póster al tamaño real de los videos. Si luego establecemos las dimensiones, hemos completado una de estas tareas. Entonces solo queda uno. Entonces, la única manera que conozco de deshacerme del primer fotograma es definir un póster. Sin embargo, vamos a dar un video falso, uno que no existe. Esto dará como resultado una pantalla en blanco con el fondo transparente. Es decir, el fondo de nuestro div padre será visible.

Simple de usar, sin embargo podría no funcionar con todos los navegadores web si desea cambiar el tamaño de la dimensión del fondo del div a la dimensión del video ya que mi código está usando "background-size".

HTML / HTML5:

<div class="video_poster">
    <video poster="dasdsadsakaslmklda.jpg" controls>
        <source src="videos/myvideo.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
<div>

CSS:

video{
    width:694px;
    height:390px;
}
.video_poster{
    width:694px;
    height:390px;
    background-size:694px 390px;
    background-image:url(images/myvideo_poster.jpg);
}

Answer 9

Tuve un problema similar y lo solucioné creando una imagen con la misma relación de aspecto que mi video (16: 9). Mi ancho está configurado al 100% en la etiqueta de video y ahora la imagen (320 x 180) se ajusta perfectamente. ¡Espero que ayude!

Answer 10

<video src="videofile.webm" poster="posterimage.jpg" controls preload="metadata">
    Sorry, your browser doesn''t support embedded videos.
</video>

Cubrir

video{
   object-fit: cover; /*to cover all the box*/
}

Llenar

video{
   object-fit: fill; /*to add black content at top and bottom*/
   object-position: 0 -14px; /* to center our image*/
}

Tenga en cuenta que los controles de video están sobre nuestra imagen , por lo que nuestra imagen no se muestra completamente. Si está utilizando una cubierta adaptada a objetos, edite su imagen en una aplicación visual como Photoshop y agregue un margen inferior de contenido.

Answer 11

height:500px;
min-width:100%;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size:100% 100%;
object-fit:cover;

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:cover;