如何动态调整HTML5中的视频大小？
Kun*_*alK 5 html html5 html5-video
我们在项目中要求在html页面中有3个视频,如下图所示.
现在,通过点击每个视频的右下角,用户可以调整视频大小,因此其他视频的大小也会发生变化.我在这里面临的问题是如何通过在每个视频的右下角按下并拖动鼠标来调整视频大小,我尝试使用标签的resize属性,video但它调整了控制器的宽度和高度.视频.我是否必须使用任何第三方API或JavaScript,或者我是否在做任何愚蠢的错误？
通过做一些RND,我开始了解canvas.但不知道如何将它与视频一起使用.
有人可以在这里指导我吗？任何形式的帮助将不胜感激.
代码:
<!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>
说实话,你有这么多的调整大小句柄有点令人困惑.它也使事情变得非常复杂.
这是我到目前为止所提出的,这应该让你对完整的实现有一个很好的认识:
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()));
}
});
演示:http://jsfiddle.net/dfsq/KuAsz/
- 这是在做什么 我所看到的只有三张图片，任何地方都没有调整大小 (2认同)