Tutorials‎ > ‎

Resizable and draggable video using HTML5 and Jquery

posted Dec 23, 2011, 2:41 AM by Sofia _   [ updated Aug 15, 2016, 11:34 PM by Surya Wang ]

Do you know that canvas in HTML5 is allowed to draw an image from the video element? With drawImage function in HTML5, you can use to draw an image from an image or video element. In this post, I am going to explain how to make resizable and droggable video in canvas.

In HTML5, you can play video in your browser without any other plugin. That’s simple and amazing. That also allowed you to play audio too. You can see the explanation about video in here.

The canvas is the html5 element uses javascript to draw graphics in web page. With html5, we are free to draw anything we want and control the animation in the canvas area. How to begin? Just add < canvas> </canvas> in your body and begin draw with javascript.

First, let’s look at the html. I just need the canvas and video in my body. In canvas, I am setting the width, border, and height. In video, I am setting the controls, autoplay, loop and source. The video is setting to invisible, so we just need to see the video in canvas.

<canvas id="c" style="border:1px solid black" width="600" height="400"></canvas>
<video id="v" src="funny cartoon.ogg" style="display:none" controls="controls" autoplay="autoplay" loop="loop"></video>


Like I said above, we just need to call drawImage. For example,   

var c = document.getElementById("c");
var v = document.getElementById("v");
var con = c.getContext("2d");
con.drawImage(v,videoX,videoY,videoW,videoH);


We can use it another way too. Like the sample bellow. We can crop the image to how we want to. That’s allow us to separate our video to many side. We can do a lot of thing with it 

var c = document.getElementById("c");
var v = document.getElementById("v");
var con = c.getContext("2d");

con.drawImage(video,videoX,videoY,videoW,videoH,destX,destY,destW,destH);


To make the video resizable and draggable, we just simple manipulate the coordinat when mouseup and mousedown event. To handle the mouseevent, I am using Jquery because it’s more simple and easy for me. It’s fine if you want to another way. When the mouse down, we need to validate whether it is in the video or not. If it is true, we are going to validate if is the resize place or not. I use two lines to mark the resize place. I am using isResize and isMove as flag to notice which one is for current event. At the mouseup, we just need to know the coordinat.

I create a draw function to draw the video. The function is called and going to run every 100 miliseconds. That make our image seem animate like video. In here, I also draw the line as resize icon.

function draw()
{
    var c = document.getElementById("c");
    var v = document.getElementById("v");
    var con = c.getContext("2d");
    c.width = c.width;
    videoX = mouseX - posX;
    videoY = mouseY - posY;
    con.drawImage(v,videoX,videoY,videoW,videoH);
 
    con.moveTo(videoX+videoW,videoY+videoH);
    con.lineTo(videoX+videoW,videoY+videoH-10);
    con.moveTo(videoX+videoW,videoY+videoH);
    con.lineTo(videoX+videoW-10,videoY+videoH);
 
    con.stroke();
    setTimeout("draw()",100);
}

It is my logic to create this way, you can also create a lot of demo using HTML5. For example, you can create a puzzle that the image is video and moving. Or you can create a canvas that allowed you to draw on video.

You also need to understand that HTML5 is still under development and not all the browser can run it. But there’s plenty way to handle it.

ċ
resizable&draggableVideo.zip
(1k)
Sofia _,
Dec 23, 2011, 2:50 AM