6

我们在项目中要求在一个 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>
4

2 回答 2

7

老实说，你有这么多调整大小的句柄有点令人困惑。它也使事情变得相当复杂。

这是我到目前为止提出的，这应该让您对完整的实现有一个很好的了解：

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/

于 2013-03-29T08:39:00.993 回答
2

这更好：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;"/>

然后，您可以使用计时器更改输入滑块，该计时器将每秒检查画布的宽度并相应地调整视频的大小。

您可以尝试使用 jquery ui resizable 进行类似操作：

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);
}
于 2013-03-29T07:24:30.817 回答