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

见小提琴

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