web-dev-qa-db-fra.com

Comment remplir un élément vidéo avec une image d'affiche même si l'image d'affiche a un rapport d'aspect différent de son élément vidéo?

En l'état actuel, cela n'est testé que dans WebKit.

Lorsqu'une image d'affiche est définie sur un <video> élément utilisant l'attribut poster, cette image s'affiche avant que l'utilisateur ne lise la vidéo (comportement par défaut). Cependant, si l'image de l'affiche présente un rapport d'aspect différent de celui du <video> élément sur lequel il est défini, un espace (ou éventuellement un espace noir) est visible de chaque côté de l'image (gauche et droite ou haut et bas) et l'image est centrée (également, comportement par défaut).

Je voudrais savoir comment mettre à l'échelle cette image (de préférence en CSS) afin qu'elle remplisse l'élément vidéo, de manière similaire à l'utilisation du CSS3 background-size: cover; valeur.

Encore confus? Peut-être que ce JSFiddle aidera à expliquer: http://jsfiddle.net/jonnymilano/2w2CE/

Je serais également intéressé par les réponses qui ont forcé l'image dans le conteneur vidéo, en déformant sa hauteur et/ou sa largeur pour s'adapter aux dimensions du conteneur vidéo. Cependant, cette réponse ne résoudrait que partiellement mon problème.

html5css3html5-video
20
jonathanbell

Cette question m'a fait réfléchir et votre jsfiddle a été utile pour résoudre ce problème (mais pas pour IE car il n'implémente pas correctement l'image de l'affiche).

Combinez simplement ce que vous avez publié, définissez l'image d'affiche requise comme image d'arrière-plan de l'élément vidéo et spécifiez une image transparente 2x2 comme image d'affiche réelle.

par exemple.

<video controls poster="transparent.png"> 
   <source src="video.mp4" type="video/mp4"> 
   <source src="video.webm" type="video/webm"> 
</video>

et

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

J'ai écrit un peu plus à ce sujet sur Vidéo HTML5 et images de fond .

50
Ian Devlin