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?
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.