Split Video into HTML5 Canvas Tiles with Drag and Drop

Last week, I wrote about making YouTube screenshots and creating video effects with HML5 canvas, and now I want to follow up and show how you can split a video into many draggable CANVAS objects. It is a bit similar to Craftymind’s video blow out demo and Matt Greer’s Movie Puzzle but with two major differences.

First of all, I wanted to keep the code small and simple, and secondly, I am building and drawing into many CANVAS elements instead of using one CANVAS. This is mostly to support the drag and drop functionality, allowing the end user to move the video tiles around the page. Draggable functionality is simply added with the jQuery UI draggable function applied on each CANVAS element. So, how does this all work?

We start by dropping the video tag on the page, hiding it with CSS, and adding an empty div where we will append all the CANVAS elements. In the JavaScript code, we define the size of the video and the amount of tiles we want (using rows and columns) and setup 2 functions. The first call is to the tiles function, where we pass all the measurements (video width, video height, rows, and columns) but do not pass the actual video object. Inside the tiles function we have an if statement that looks for the video object and if it’s undefined, it just runs through a double loop to make all the necessary tiles according to the specified rows and columns.

All the CANVAS elements get appended to the empty div on the page and using jQuery UI, they get the drag and drop functionality. The second function, update, get’s called next, and it right away calls the tiles function again, but this time it does pass the video source. As a result, the tiles function now draws the video frames into each appropriate CANVAS element on the page. The update function has a self timeout so it just keeps looping and drawing the video frames as the movie is playing. Pretty simple, and now the end user can move around each video tile on the page. Checkout the demo and take a look at the source code to see how it works.