在 HTML5 中设置视频高度

Posted 2023-03-06

【中文标题】在 HTML5 中设置视频高度

【英文标题】：Set Video height in HTML5

【发布时间】：2012-04-18 04:14:52

【问题描述】：

可能是一个简单的问题，但它真的让我发疯。 我只是想设置 html5 视频的高度和宽度。

我正在使用此代码：

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

结果：

如果我添加高度属性

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

【参考方案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"  ></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;