Faire HTML5 vidéo affiche être même taille que la vidéo elle-même

Selon les navigateurs que vous ciblez, vous pouvez utiliser la propriété object-fit pour résoudre ce problème:

object-fit: cover;

Ou peut-être fill est ce que vous cherchez. Toujours à l'étude pour IE .

Ou vous pouvez simplement utiliser l'attribut preload="none" pour rendre l'arrière-plan vidéo visible. Et vous pouvez utiliser background-size: cover; ici.

 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>

Je jouais avec cela et j'ai essayé toutes les solutions, finalement la solution avec laquelle je suis allé était une suggestion de L'inspecteur de Google Chrome. Si vous ajoutez ceci à votre CSS cela a fonctionné pour moi:

video{
   object-fit: inherit;
}

Ma solution combine les réponses de user2428118 et Veiko Jääger, permettant un préchargement mais sans nécessiter une image transparente séparée. Nous utilisons une image transparente 1px codée en base64 à la place.

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

J'ai eu cette idée et cela fonctionne parfaitement. Ok, donc, fondamentalement, nous voulons nous débarrasser des vidéos de la première frame de l'écran, puis redimensionner l'affiche pour les vidéos de la taille réelle. Si nous définissons ensuite les dimensions, nous avons terminé l'une de ces tâches. Ensuite, il ne reste qu'un. Alors maintenant, la seule façon de me débarrasser de la première image est de définir une affiche. Cependant, nous allons donner à la vidéo un faux, un qui n'existe pas. Cela se traduira par un affichage vide avec le arrière-plan transparent. C'est-à-dire que l'arrière-plan de notre div parent sera visible.

Simple à utiliser, mais il peut ne pas fonctionner avec tous les navigateurs web si vous voulez redimensionner la dimension de l'arrière-plan de la div à la dimension de la vidéo puisque 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);
}

Vous pouvez utiliser poster pour afficher l'image au lieu de la vidéo sur un appareil mobile(ou des appareils qui ne prennent pas en charge la fonctionnalité de lecture automatique de la vidéo). Parce que les appareils mobiles ne prennent pas en charge la fonctionnalité de lecture automatique vidéo.

<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, vous pouvez simplement Styler l'attribut poster qui se trouve dans la balise vidéo pour appareil mobile 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;
}
}

J'ai eu un problème similaire et je l'ai juste corrigé en créant une image avec le même rapport d'aspect que ma vidéo (16: 9). Ma largeur est définie à 100% Sur la balise vidéo et maintenant l'image (320 x 180) s'adapte parfaitement. Espérons que ça aide!

Vous pouvez redimensionner la taille de l'image après avoir généré thumb

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

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;

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

Couvrir

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 sur notre image , donc notre image n'est pas complètement montrée. Si vous utilisez object-fit cover, modifiez votre image sur une application visuelle en tant que photoshop et ajoutez un contenu de fond de marge.