Ustaw Wysokość wideo w HTML5

Question

Może to proste pytanie, ale to naprawdę doprowadza mnie do szału. Chcę tylko ustawić wysokość i szerokość wideo HTML5.

Używam tego kodu:

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

Wynik:

Jeśli dodać atrybut wysokość

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

Wynik:

Więc ja brakujące som tutaj?

Czy ktoś może poprawić błąd, który robię.

Answer 1

Nie można zmienić współczynnika proporcji w tagu <video>.

Można jednak odczytać zawartość wideo i zapisać ją w elemencie <canvas>.

Na przykład:

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

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

Można użyć CSS, aby obejść.

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

Answer 3

Oto prosta sztuczka CSS, nie trzeba dodawać żadnego kodu JavaScript ani jQuery. Użyj właściwości CSS na etykiecie wideo.

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

See Fiddle