在 HTML5 中设置视频高度答案

【问题标题】：Set Video height in HTML5在 HTML5 中设置视频高度
【发布时间】：2012-04-18 04:14:52
【问题描述】：

可能是一个简单的问题，但它真的让我发疯。我只是想设置 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>

结果：

那么我在这里错过了什么吗？

谁能纠正我的错误。

【问题讨论】：

您是否尝试过在 CSS 中设置尺寸？从那里调整它们可能更容易。您还可以将视频设置为调整到其父级的大小（视频 { width:100%; height:100%; }）并即时编辑其父级的尺寸。没有测试过。只是一个想法！

标签： html video height width

【解决方案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

【讨论】：

以前从来没有听说过这个属性，在找到这个之前已经经历了几个小时的奇怪定位视频，谢谢
为我工作，+1，我使用了 objest-fit:cover，但这有效。
我使用过 object-fit: contains;解决我的问题。但感谢您的提示。

【解决方案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 );

【讨论】：

【解决方案3】：

您可以使用 css 来解决。

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

【讨论】：