How to resize the video in HTML5 dynamically?

问题

we have the requirement in the project that having 3 videos in an html page like shown in the following image.

Now by clicking at the bottom-right corner on each of this video user can resize the video and accordingly the size of other videos will change. The problem i am facing here is how to resize the video by just pressing and dragging the mouse click on the bottom-right corner of each video, i've tried using resize property of video tag but it resizes the width and height of the controllers of the video. Do i have to use any third party API or JavaScript or am i doing any silly mistake?

by doing some RND on this i came to know about canvas. but doesn't get any idea how to use it with video together.

can anyone please guide me here? Any kind of help would be greatly appreciated.

CODE :

<!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>

回答1:

To be honest it's a little bit confusing that you have so many resize handles. It also makes things pretty complicated.

This is what I came up so far, this should give you a good sense of the complete implementation:

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

Demo: http://jsfiddle.net/dfsq/KuAsz/

回答2:

This is way better: 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;"/>

Then you may change the input slider with a timer which will check the width of the canvas every second and re size the videos accordingly.

You may try something like this with 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);
}

来源：https://stackoverflow.com/questions/15698961/how-to-resize-the-video-in-html5-dynamically

标签

html

html5

html5-video