如何动态调整HTML5视频的大小？ [英] How to resize the video in HTML5 dynamically?
问题描述
我们在项目中要求在一个html页面中放置3个视频，如下图所示。
现在点击每个视频用户的右下角可以调整视频的大小并相应地改变其他视频的大小。我在这里面临的问题是如何通过在每个视频的右下角点击并拖动鼠标来调整视频大小，我尝试使用 resize 属性 video 标签，但它会调整视频控制器的宽度和高度。我是否必须使用任何第三方API或JavaScript，或者我是否犯了一个愚蠢的错误？
通过对此做一些RND，我了解了 canvas 。但没有任何想法如何与视频一起使用。
任何人都可以在这里指导我吗？任何形式的帮助将不胜感激。
CODE：
<！DOCTYPE html>
< html>
< head>
< style>
video {
resize：both;
}
< / style>
< / head>
< body>
< video width =320height =240controls>
< source src =movie.mp4type =video / mp4>
< source src =movie.oggtype =video / ogg>
< / video>
< / body>
< / html>
老实说，有点混淆，如此多的调整大小手柄。这也使得事情变得非常复杂。
这是我到目前为止的内容，这应该让您对完整的实现有一个很好的理解：
var $ cont = $（'＃container'），
contWidth = $ cont.width（），
contHeight = $ cont .height（），
$ one = $（'＃one'），
$ two = $（'＃two'），
$ ltop = $ one.find（'。ltop '），
$ lbot = $ one.find（'。lbot'）;
$ ltop.resizable（{
句柄：'se'，
minWidth：'100'，
maxWidth：'400'，
resize： function（）{
var width = $（this）.width（），
height = $（this）.height（），
remSpaceH = contWidth - width，
remSpaceV = contHeight - height;
$ one.width（width）;
$ two.width（remSpaceH - （$ two.outerWidth（） - $ two.width（）））;
$ lbot.height（remSpaceV - （$ lbot.outerHeight（） - $ lbot.height（）））;
}
}）;
演示： http://jsfiddle.net/dfsq/KuAsz/
we have the requirement in the project that having 3 videos in an html page like shown in the following image.
Now by clicking at the bottom-right corner on each of this video user can resize the video and accordingly the size of other videos will change. The problem i am facing here is how to resize the video by just pressing and dragging the mouse click on the bottom-right corner of each video, i've tried using resize property of video tag but it resizes the width and height of the controllers of the video. Do i have to use any third party API or JavaScript or am i doing any silly mistake?
by doing some RND on this i came to know about canvas. but doesn't get any idea how to use it with video together.
can anyone please guide me here? Any kind of help would be greatly appreciated.
CODE :
<!DOCTYPE html>
<html>
<head>
<style>
video{
resize:both;
}
</style>
</head>
<body>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
</body>
</html>
To be honest it's a little bit confusing that you have so many resize handles. It also makes things pretty complicated.
This is what I came up so far, this should give you a good sense of the complete implementation:
var $cont = $('#container'),
contWidth = $cont.width(),
contHeight = $cont.height(),
$one = $('#one'),
$two = $('#two'),
$ltop = $one.find('.ltop'),
$lbot = $one.find('.lbot');
$ltop.resizable({
handles: 'se',
minWidth: '100',
maxWidth: '400',
resize: function() {
var width = $(this).width(),
height = $(this).height(),
remSpaceH = contWidth - width,
remSpaceV = contHeight - height;
$one.width(width);
$two.width(remSpaceH - ($two.outerWidth() - $two.width()));
$lbot.height(remSpaceV - ($lbot.outerHeight() - $lbot.height()));
}
});
Demo: http://jsfiddle.net/dfsq/KuAsz/
这篇关于如何动态调整HTML5视频的大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
