Est-ce que quelqu'un sait comment redimensionner l'affiche vidéo HTML5 pour qu'elle corresponde aux dimensions exactes de la vidéo elle-même?

voici un 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;
}​

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

De plus, ajouter simplement le CSS ci-dessous ne fonctionne pas non plus car il redimensionne la vidéo avec l'affiche:

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

Vous pouvez utiliser une image d'affiche transparente en combinaison avec une image d'arrière-plan CSS pour y parvenir ( exemple ); cependant, pour avoir un arrière-plan étiré à la hauteur et à la largeur d'une vidéo, vous devrez utiliser une <img>balise positionnée de manière absolue ( exemple ).

Il est également possible de mettre background-sizeà100% 100% dans les navigateurs qui supportentbackground-size ( par exemple ).

Mettre à jour

Une meilleure façon de le faire serait d'utiliser la object-fitpropriété CSS comme le suggère @Lars Ericsson.

Utilisation

object-fit: cover;

si vous ne souhaitez pas afficher les parties de l'image qui ne correspondent pas au rapport hauteur / largeur de la vidéo, et

object-fit: fill;

pour étirer l'image pour l'adapter aux proportions de votre vidéo

Exemple

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

object-fit: cover;

ou c'est peut fill- être ce que vous recherchez. Toujours à l'étude pour IE .

Ou vous pouvez utiliser simplement l' preload="none"attribut pour rendre l'arrière-plan VIDEO 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 que j'ai choisie é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 à la place une image transparente 1px encodée 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>

J'ai eu cette idée et cela fonctionne parfaitement. D'accord, nous voulons donc supprimer la première image de la vidéo de l'écran, puis redimensionner l'affiche à la taille réelle de la vidéo. Si nous définissons ensuite les dimensions, nous avons terminé l'une de ces tâches. Alors il n'en reste qu'un seul. Alors maintenant, le seul moyen que je connaisse pour me débarrasser de la première image est de définir une affiche. Cependant, nous allons donner à la vidéo une fausse vidéo, qui n'existe pas. Cela entraînera un affichage vide avec l'arrière-plan transparent. Ie arrière-plan de notre div parent sera visible.

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

<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 sur notre image , donc notre image n'est pas complètement affichée. Si vous utilisez une couverture adaptée aux objets, modifiez votre image sur une application visuelle en tant que Photoshop et ajoutez un contenu de marge inférieure.

J'ai eu un problème similaire et je viens de le résoudre en créant une image avec le même rapport hauteur / largeur 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. J'espère que cela pourra aider!

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

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

Vous pouvez utiliser l'affiche 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 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 styliser l'attribut poster qui se trouve à l'intérieur de la balise vidéo pour l'appareil mobile via une requête multimédia.

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

Cela a fonctionné

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

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