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

【问题标题】：How to resize the video in HTML5 dynamically?如何动态调整 HTML5 中的视频大小？
【发布时间】：2013-03-29 07:09:35
【问题描述】：

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

现在通过点击每个视频的右下角，用户可以调整视频的大小，相应地其他视频的大小也会发生变化。我在这里面临的问题是如何通过按住并拖动鼠标单击每个视频的右下角来调整视频的大小，我尝试使用video 标签的resize 属性，但它调整了宽度和视频控制器的高度。我必须使用任何第三方 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>

【问题讨论】：

这是我从 w3school 使用的代码。但它只调整控制器而不是整个视频的大小。
不要使用 w3schools，它有很多问题
如果你使用一些像 jQueryUI 可调整大小的库，这很容易。
好的。但是你能帮我吗？查看我的编辑。
@dfsq 一定会试一试的。

标签： html html5-video

【解决方案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/

【讨论】：

这是在做什么？我只看到三张图片，没有任何地方调整大小

【解决方案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);
}

【讨论】：

谢谢，但我不想使用任何额外的控件，如范围，我只想通过拖动视频的右下角来调整它的大小。我想我已经通过使用 jQueryUI resizable. 得到了解决方案
@KunalK 检查我的编辑，我这样做是为了向您展示您可以轻松更改视频宽度，稍后将提供更详细的示例