Interactive Video with HTML5 Video and Canvas
Below is an HTML5 video manipulation that takes a video and allows the user to pull parts of the video away from it. Probably isn’t browser compatible, but you get the idea…
I’ll start with the basics. What we are doing here is pulling the information from a an HTML5 video and re-writing that information to a canvas tag. In order to get the video to appear in a circle that you click, we need to take the video information in a circle pattern from where you clicked, write it to a canvas element, then make that canvas element follow your mouse around until you release it.
Basically we set up our “App” with a whole bunch of variables. When the window is finished loading we call App.init() which embeds the video, which is set to autoplay in the HTML Tag, look it up for reference. Then we set up some variables and grab some elements from the page. Then around line 62 we set some even listeners for when we click on the video, when our mouse moves, etc. Finally we call a recursive function called “callback()” when the video is playing. This function does two things, calls another function called “compute frame” which does all the work, then calls itself again to step to the next frame. Repeat.
“computeFrame()” checks to see if we’ve clicked and if we’re moving the mouse. If we are, it draws the video data from canvas1 to canvas3 (canvas 3 is the circular one that follows our mouse). Canvas 1 simply stores the image data, canvas 3 has a border radius like a circle and follows our mouse if we’ve pressed mouse down and not triggered the “mouseup” event.
As always, let me know if you need help!