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

96

¿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%;
}
tim peterson
fuente
1
no creo que puedas usar "%" en atributos; sin embargo, cambiarlo a 100 no soluciona el problema. Apuesto a que es un estilo de medios webkit. no dude en escoger a través de ellos trac.webkit.org/browser/trunk/Source/WebCore/css/...~~V~~3rd
Albert
@albert, gracias. No veo ninguna referencia posteren el enlace que enviaste. ¿Puede mostrarme cómo se ve el CSS para lo que está hablando, es decir, " -webkit media style"? gracias
tim peterson
bueno, eso es lo que quise decir con "recoger"; esos son estilos de medios específicos de Chrome; sólo estoy vagamente familiarizado con ellos, y mucho menos con los pseudo selectores que están declarando; sin punto de partida: buscaría declaraciones con relleno, etc.
albert

Respuestas:

52

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

usuario2428118
fuente
- @ user1419007, su ejemplo repite la imagen de fondo. Dado que sugiere que esta no es la mejor manera, ¿le importaría proporcionar un jsfiddle que demuestre cómo implementar su segunda estrategia?
tim peterson
He no-repeateditado la imagen de fondo. En cuanto a la otra solución, dame un momento para resolver esto.
user2428118
Editar: ejemplo agregado para la segunda solución propuesta.
user2428118
gracias por eso, necesitamos algo de javascript para cambiar z-indexla imagen de modo que el video sea visible cuando comiences a reproducirlo.
tim peterson
2
.. el segundo ejemplo no funcionó en Chrome? necesitas darle al div externo una posición como jsfiddle.net/xh8er ; entonces funciona.
commonpike
88

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 .

Lars Ericsson
fuente
3
Esta es definitivamente la respuesta.
cilphex
1
+1 para el enlace a la propiedad de ajuste de objeto , usando lo object-fit: initialhice por mí.
FireBrand
"object-fit: fill" funcionó! al igual que "object-fit: initial" (curiosamente, porque no veo un valor "inicial" en la especificación en developer.mozilla.org/en-US/docs/Web/CSS/object-fit ). Tanto "cubrir" como "contener" distorsionaron el póster en reproducción en el navegador nativo de Samsung en Android 5.1.1. ¡Y no afecta a IE!
plugincontainer
1
¿A qué selector de CSS apuntaron para la regla de ajuste de objetos? Dado que no hay forma de orientar la imagen del póster, supongo que usaste video{object-fit: cover;}?
zıəs uɐɟəʇs
@ zıəs uɐɟəʇs En mi css es ... video [poster] {object-fit: fill}
plugincontainer
27

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>
Veiko Jääger
fuente
2
mejor respuesta. no rompe nada, y no precargar un video realmente no daña su página a menos que sea un sitio centrado en videos. +1.
totalmenteNotLizards
1
Tuve un cambio de tamaño de fondo en el juego en móviles. De otras preguntas / respuestas aquí (por ejemplo, stackoverflow.com/questions/18229974/… ) parece que el problema es la duplicación de imágenes (el fondo css del reproductor y el póster del elemento de video). Esta solución funcionó.
plugincontainer
1
Hmm ... funcionó en Chrome pero creó un nuevo problema en el navegador nativo de Android. Ver: stackoverflow.com/questions/39546792/…
plugincontainer
Arreglado por fin - vea la respuesta de Lars Ericsson a continuación
plugincontainer
27

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;
}
Patricio
fuente
¡Gracias! Esta fue la solución exacta que estaba buscando para ELIMINAR la brecha de video en la parte superior e inferior
cpcdev
12

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>
Jamie G
fuente
¿Solo tiene que ser el nombre de la imagen o la ruta completa?
En el navegador nativo de Android (el navegador se llama "Internet") en mi Samsung, el póster cambió de tamaño ... catastróficamente en el juego. Esta solución - un gif transparente como póster y el "póster" como fondo - resolvió eso, PERO, .. ahora el póster no se muestra en IE-9, 10 u 11.
plugincontainer
1
La solución fue abandonar el gif transparente y el póster como fondo y usar (ver la respuesta de Lars Ericsson arriba) el video [póster] {object-fit: fill}. Problema resuelto en el navegador nativo de Samsung bajo Android 5.1.1. e IE muestra el póster sin problemas
plugincontainer
Este enfoque es mejor especialmente para dispositivos móviles. object-fitno evita las distorsiones de tamaño salvaje posterque ocurren en Android mientras el contenido aún se está cargando.
TheLinguist
5

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);
}
Jonathan J
fuente
eso es inteligente, lo intenté. No es perfecto, pero llegar allí ... jsfiddle.net/trpeters1/NJtc9
tim peterson
Si, tienes razón. Al mirar su jsfiddle, ahora me doy cuenta de que la dimensión del video también debe ser correcta y no solo el elemento del video. Supongo que tuve suerte cuando lo probé en mi página.
Jonathan J
5
<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.

Daniel Eduardo Delgado Díaz
fuente
1

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!

deebs
fuente
1

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);
Motilal Soni
fuente
1

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;
}
}
gopal sharma
fuente
En realidad, iOS 10+ admite la función de reproducción automática de video con el atributo PlayInline.
Lukas Petr
¿Cómo especifica ese atributo?
Khom Nazid
0
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;
Irinachen
fuente
0

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;
}
usuario2903934
fuente
0
  <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>
Aladein
fuente