在HTML5中设置视频高度

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>

结果：

如果我添加高度属性

<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

这是简单的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;
}

See Fiddle

Answer 2

您无法在<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 3

你可以使用css来解决。

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