Html 在 HTML5 中设置视频高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10011389/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set Video height in HTML5
提问by coder
May be its a simple question but it's really driving me crazy. I just want to set the height and width of the HTML5 video.
可能是一个简单的问题，但它真的让我发疯。我只想设置 HTML5 视频的高度和宽度。
I am using this code:
我正在使用此代码：
<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>
Result:
结果：
If I add height attribute
如果我添加高度属性
<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>
Result:
结果：
So am I missing something here?
所以我在这里错过了什么吗？
Can anyone correct the mistake I'm doing.
任何人都可以纠正我正在做的错误。
回答by Musa
Here is simple CSS trick, you don't need to add any JavaScript or jQuery code. Use object-fitCSS property on video tag.
这是简单的 CSS 技巧，您不需要添加任何 JavaScript 或 jQuery 代码。object-fit在视频标签上使用CSS 属性。
HTML
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
CSS
#video{
object-fit: initial;
width: 400px;
height: 300px;
}
回答by antyrat
You can't change aspect ratio in <video>tag.
您无法更改<video>标签中的纵横比。
However you can read your video content and write it to <canvas>element.
但是，您可以阅读视频内容并将其写入<canvas>元素。
For example:
例如：
<canvas id="canvas" height="768" width="1024"></canvas>
And JS:
和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 );
回答by Dips
You can use css to work around.
您可以使用 css 来解决。
#video {
width:1000px;
height:auto;
}
