gpt4 book ai didi

html - 如何动态调整 HTML5 中的视频大小?

转载 作者:搜寻专家 更新时间:2023-10-31 08:04:01 24 4
gpt4 key购买 nike

我们在项目中有要求,在一个 html 页面中有 3 个视频,如下图所示。

enter image description here

现在,通过单击每个视频的右下角,用户可以调整视频的大小,其他视频的大小也会随之改变。我在这里面临的问题是如何通过在每个视频的右下角按下并拖动鼠标单击来调整视频大小,我尝试使用 video< 的 resize 属性 标签,但它会调整视频 Controller 的宽度和高度。我是否必须使用任何第三方 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/

关于html - 如何动态调整 HTML5 中的视频大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15698961/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com