Question

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

enter image description here

现在，通过点击每个视频的右下角，用户可以调整视频大小，因此其他视频的大小也会发生变化。我在这里面临的问题是如何通过在每个视频的右下角按下并拖动鼠标来调整视频大小，我尝试使用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>

Answer 1

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

这是我到目前为止所提出的，这应该让你对完整的实现有一个很好的认识：

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/

Answer 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);
}

如何动态调整HTML5中的视频大小？

2 个答案: