在HTML5中设置视频高度 [英] Set Video height in HTML5
本文介绍了在HTML5中设置视频高度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
这可能是一个简单的问题,但这确实使我发疯. 我只想设置HTML5视频的高度和宽度.
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.
我正在使用以下代码:
<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>
结果:
那么我在这里错过了什么吗?
So am I missing something here?
谁能纠正我正在做的错误.
Can anyone correct the mistake I'm doing.
推荐答案
您不能在<video>
标签中更改长宽比.
You can't change aspect ratio in <video>
tag.
但是,您可以阅读视频内容并将其写入<canvas>
元素.
However you can read your video content and write it to <canvas>
element.
例如:
<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 );
这篇关于在HTML5中设置视频高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文