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

Answer 3

您可以使用 css 来解决。

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