Faire en sorte que l'affiche de la vidéo HTML5 ait la même taille que la vidéo elle-même

Question

Quelqu'un sait-il comment redimensionner le poster vidéo HTML5 de manière à ce qu'il corresponde aux dimensions exactes de la vidéo elle-même ?

Voici une jsfiddle qui montre le problème : http://jsfiddle.net/zPacg/7/

voici ce code :

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

Remarquez que le rectangle orange ne s'adapte pas à la bordure rouge de la vidéo.

De plus, l'ajout du CSS ci-dessous ne fonctionne pas non plus car il redimensionne la vidéo en même temps que l'affiche :

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

Answer 1

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

Couverture

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

Remplir

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

Notez que les contrôles vidéo sont au-dessus de notre image donc notre image n'est pas complètement montrée. Si vous utilisez une couverture d'objet, éditez votre image sur une application visuelle comme Photoshop et ajoutez une marge en bas du contenu.

Answer 2

J'ai eu cette idée et elle fonctionne parfaitement. En gros, nous voulons supprimer la première image de la vidéo de l'affichage, puis redimensionner le poster à la taille réelle de la vidéo. Si nous définissons ensuite les dimensions, nous avons accompli une de ces tâches. Il n'en reste donc plus qu'une. Donc maintenant, la seule façon que je connaisse de se débarrasser de la première image est de définir réellement un poster. Cependant, nous allons donner à la vidéo un faux, un qui n'existe pas. Cela se traduira par un affichage vide avec un arrière-plan transparent. C'est-à-dire que l'arrière-plan de notre div parent sera visible.

Simple à utiliser, mais il se peut qu'il ne fonctionne pas avec tous les navigateurs Web si vous voulez redimensionner la dimension de l'arrière-plan de la division à la dimension de la vidéo, car mon code utilise "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 3

Vous pouvez utiliser le poster pour afficher l'image au lieu de la vidéo sur les appareils mobiles (ou les appareils qui ne prennent pas en charge la fonctionnalité de lecture automatique des vidéos). En effet, les appareils mobiles ne prennent pas en charge la fonctionnalité de lecture automatique des vidéos.

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

Maintenant, il suffit de donner un style à l'attribut poster qui se trouve dans la balise vidéo pour les appareils mobiles via 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;
}
}

Answer 4

Pas besoin de divs supplémentaires.

HTML:

<video controls width="100%" height="100%"  poster="http://www.wpclipart.com/blanks/buttons/glossy_buttons/glossy_button_blank_orange_rectangle.png">
  <source src="https://mathisart.org/vid0000_plandemic.mp4" type="video/mp4" />
  <source src="https://mathisart.org/vid0000_plandemic.ogg" type="video/ogg" />
  <source src="https://mathisart.org/vid0000_plandemic.webm" type="video/webm" />
</video>​

CSS :

video[poster]{ object-fit:cover; }  /* or object-fit:fill */

Answer 5

J'ai eu un problème similaire et je l'ai résolu en créant une image avec le même ratio d'aspect que ma vidéo (16:9). La largeur est fixée à 100 % dans la balise vidéo et l'image (320 x 180) s'adapte parfaitement. J'espère que cela vous aidera !