Définir la hauteur de la vidéo en HTML5

Question

C'est peut-être une question simple, mais elle me rend vraiment fou. Je veux juste définir la hauteur et la largeur de la vidéo HTML5.

J'utilise ce code :

 <video controls="controls" width="1000" id="video">
            <source src="sintel-trailer.ogv" type='video/ogg; codecs="theora, vorbis"'>
            <source src="sintel-trailer.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
  </video>

Résultat :

Si j'ajoute l'attribut de hauteur

<video controls="controls" width="1000" height="300" id="video">
                <source src="sintel-trailer.ogv" type='video/ogg; codecs="theora, vorbis"'>
                <source src="sintel-trailer.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
 </video>

Résultat :

Est-ce que j'ai raté quelque chose ici ?

Quelqu'un peut-il corriger l'erreur que je suis en train de faire.

Answer 1

Voici une simple astuce CSS, vous n'avez pas besoin d'ajouter de code JavaScript ou jQuery. Utilisez object-fit Propriété CSS sur la balise vidéo.

HTML

<video controls="controls" id="video">
<source src="sintel-trailer.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="sintel-trailer.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>

CSS

#video{
  object-fit: initial;
  width: 400px;
  height: 300px;
}

Voir Fiddle

Answer 2

Vous ne pouvez pas modifier le rapport hauteur/largeur dans <video> étiquette.

Cependant, vous pouvez lire votre contenu vidéo et l'écrire pour <canvas> élément.

Par exemple :

<canvas id="canvas" height="768" width="1024"></canvas>

Et JS :

function updateVideo( ) {
    var canvas = document.getElementById( 'canvas' );
    var ctx = canvas.getContext( '2d' );
    var myVideo = document.getElementById( 'video' );
    ctx.drawImage( myVideo, 0, 0, 640, 480 );
}
setInterval ( updateVideo, 24 );

Answer 3

Vous pouvez utiliser le css pour contourner le problème.

#video {
   width:1000px;
   height:auto;
}