web-dev-qa-db-ja.com

HTML5でビデオの高さを設定する

簡単な質問かもしれませんが、それは本当に私を夢中にさせています。 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>

結果： enter image description here

高さ属性を追加すると

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

結果： enter image description here

だから私はここで何かが欠けていますか？

誰かが私がしている間違いを訂正できますか？.

htmlvideoheightwidth
12
coder

<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 );
12
antyrat

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

[〜＃〜] 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;
}

フィドルを参照

16
Musa