Question

簡単な質問かもしれませんが、本当に私を狂ってしまいます。 HTML5ビデオの高さと幅を設定したいだけです。

私はこのコードを使用しています：

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

結果：

私はheight属性を追加する場合

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

結果：

は、だから私はソムをしないのですがここに？

誰でも私がやっている間違いを訂正することはできますか？

Answer 1

<video>タグでは、縦横比を変更できません。

あなたのビデオコンテンツを読んで、<canvas>要素に書き込むことができます。例えば

：

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

そして、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

あなたが回避するためにCSSを使用することができます。

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

Answer 3

ここでは単純なCSSのトリックです。JavaScriptやjQueryコードを追加する必要はありません。ビデオタグにはCSSプロパティのobject-fitを使用してください。

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