HTML5'teki Video yüksekliğini ayarlama

Question

Bu basit bir soru olabilir ama gerçekten beni delirtiyor. Sadece HTML5 videosunun yüksekliğini ve genişliğini ayarlamak istiyorum.

Bu kodu kullanıyorum:

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

Sonuç:

Ben yüksekliği niteliği

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

Sonucu eklerseniz:

Yani ben eksik som Buraya gelmek mi?

Yaptığım hatayı düzelten var mı?

Answer 1

Görüntü oranını <video> etiketinde değiştiremezsiniz. Ancak video içeriğinizi okuyabilir ve <canvas> elemanına yazabilirsiniz. Örneğin

:

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

Ve 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

Sen geçici bir çözüm için css kullanabilirsiniz.

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

Answer 3

İşte basit CSS numarası, JavaScript veya jQuery kodu eklemeniz gerekmez. Video etiketinde object-fit CSS özelliğini kullanın.

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