CODEWITHSUNDEEP
htmlhtml5-video
KunalK
KunalK

Reputation: 1904

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.

enter image description here

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>

Upvotes: 7

Views: 60705

Answers (2)

dfsq
dfsq

Reputation: 193251

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/

Upvotes: 7

radu florescu
radu florescu

Reputation: 4343

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

Upvotes: 2

Related Questions