¿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;
}​

Observe que el rectángulo naranja no se adapta al borde rojo del video.

Además, simplemente agregar el CSS a continuación tampoco funciona, ya que cambia la escala del video junto con el póster:

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

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

También es posible establecer background-sizea100% 100% en los navegadores que el apoyobackground-size ( ejemplo ).

Actualizar

Una mejor manera de hacer esto sería usar la object-fitpropiedad CSS como sugiere @Lars Ericsson.

Utilizar

object-fit: cover;

si no desea mostrar aquellas partes de la imagen que no se ajustan a la relación de aspecto del video, y

object-fit: fill;

para estirar la imagen para que se ajuste a la relación de aspecto de su video

Ejemplo

Dependiendo de los navegadores a los que se dirija, puede optar por la propiedad de ajuste de objeto para resolver esto:

object-fit: cover;

o quizás filles lo que estás buscando. Todavía bajo consideración para IE .

O puede usar simplemente preload="none"atributo 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>

Estaba jugando con esto y probé todas las soluciones, finalmente, 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;
}

Mi solución combina user2428118 y las respuestas de Veiko Jääger, lo que permite la precarga pero sin requerir una imagen transparente separada. En su lugar, usamos una imagen transparente de 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>

Se me ocurrió esta idea y funciona perfectamente. Bien, básicamente queremos deshacernos del primer fotograma de los videos de la pantalla y luego cambiar el tamaño del póster al tamaño real de los videos. Si luego establecemos las dimensiones, habremos completado una de estas tareas. Entonces solo queda uno. Así que ahora, la única forma que conozco de deshacerme del primer fotograma es definir un póster. Sin embargo, le daremos al video uno 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.

Fácil de usar, sin embargo, es posible que no funcione con todos los navegadores web si desea cambiar el tamaño del fondo del div a la dimensión del video, ya que mi código usa "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);
}

<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 portada ajustada a objetos, edite su imagen en una aplicación visual como Photoshop y agregue un contenido de margen inferior.

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) encaja perfectamente. ¡Espero que ayude!

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);

Puede usar un póster para mostrar una imagen en lugar de un video en un dispositivo móvil (o dispositivos que no admitan la función de reproducción automática de video). Porque los dispositivos móviles no admiten la función 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 diseñar el atributo de póster que se encuentra dentro de la etiqueta de video para dispositivos móviles mediante media-query.

#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;
}
}

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;

Esto funcionó

<video class="video-box" poster="/" controls>
    <source src="some source" type="video/mp4">
</video>

Y el CSS

.video-box{
 background-image: 'some image';
 background-size: cover;
}

  <div class="container">
        <video poster="~/Content/WebSite/img/SiteSetting/Load.gif" autoplay muted loop class="myVideo">
            <source src="~/Content/WebSite/images/VideoTube.mp4" type="video/mp4" />
        </video>

    </div>



 <style>
    .myVideo {
position: absolute;
right: 0;
left: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
object-fit: inherit;
 }
@media only screen and (max-width:768px) {
.myVideo {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    max-width: -webkit-fill-available;
    min-height: 100%;
    object-fit: cover;
    }
   }

     @media only screen and (max-width:320px) {
.myVideo {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    max-width: -webkit-fill-available;
    min-height: 100%;
    object-fit: cover;
  }
}
</style>