An example of how to play video on your canvas tag

Written by Richard Heyes, on 15th July 2013

An example of how you can use HTML5 canvas to show a video and customise how the video appears on the canvas.

Note: The video doesn't play in some browsers. Use a different browser (eg Google Chrome) for this demo.

[No canvas support]

This is an example of HTML5 canvas video - using a HTML5 video element but hiding it and using JavaScript to paint the video on to a canvas instead. Then you can pick up the (by clicking on it) the video and drag it around and click to drop it back down again. The video also rotates (look carefully) by translating to the center of where video is going to be drawn, rotating the canvas, drawing the video and then translating back (in effect - actually the canvas state is saved and then restored).

The hands are achieved by simply painting an image on top of the clipped circle and moving it as the coordinates change.

What are its uses?

At this point in time it's just a demonstration of what you can do with HTML5 canvas and HTML5 video elements, (ie there aren't a whole lot of uses for it! One possible use though is to create your own custom video player).

Getting the source code

To get the source code simply view the source. All of the code is within the window.onload function and it's commented.