Html 如何动态调整 HTML5 中的视频大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15698961/
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
How to resize the video in HTML5 dynamically?
提问by KunalK
we have the requirement in the project that having 3 videos in an html page like shown in the following image.
我们在项目中要求在 html 页面中有 3 个视频，如下图所示。
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 resizeproperty of videotag 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?
现在，通过单击每个视频的右下角，用户可以调整视频大小，其他视频的大小也会相应改变。我在这里面临的问题是如何通过在每个视频的右下角按下并拖动鼠标来调整视频大小，我已经尝试使用标签resize属性，video但它会调整控制器的宽度和高度的大小视频。我必须使用任何第三方 API 或 JavaScript 还是我犯了任何愚蠢的错误？
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.
通过对此进行一些 RND，我开始了解canvas. 但不知道如何将它与视频一起使用。
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>
回答by dfsq
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()));
}
});
回答by radu florescu
This is way better: http://jsfiddle.net/ScDmp/9/
这是更好的方式：http: //jsfiddle.net/ScDmp/9/
<div id="myContainer">
<video width="320" height="240" controls id="myVideo">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
<div>
<input type="range" min="100" max="500" step="50" id="mySlider" value="0" onchange="document.getElementById('myVideo').width = this.value;"/>
Then you may change the input slider with a timer which will check the width of the canvas every second and re size the videos accordingly.
然后您可以使用计时器更改输入滑块，该计时器将每秒检查画布的宽度并相应地调整视频大小。
You may try something like this with jquery ui resizable:
您可以尝试使用可调整大小的 jquery ui：
function ready(){
$("#myContainer").resizable();
var interval = setInterval(checkWidth, 1000);
function checkWidth()
{
$("#myVideo").width($("#myContainer").width());
}
setTimeout($("#myContainer").width("100px"),1000);
setTimeout($("#myContainer").width("200px"),5000);
setTimeout($("#myContainer").width("300px"),10000);
}
