Making use of Video tag and Canvas

There’s a lot of great stuff in the (X)HTML5 spec, but the greates thing is how these additions work together. For example, the video element may not seem terribly exciting at first.

YAVE – Yet Another Video Embedder, so to speak. But once you scroll a few pages down to the Canvas element and fully grasp what the following two sentences actually mean, you can’t help but marvel at its magnificence:

“To draw images onto the canvas, the drawImage method can be used. […] The image argument must be an instance of an HTMLImageElement, HTMLCanvasElement, or HTMLVideoElement.”

What this means is that videos are for the first time in a browser fully scriptable. Just draw it to a canvas and you can read it, pixel by pixel. For example, you can have a song include volume and frequency information in the video track, then use Javascript to build great visualizations (this only works in recent Firefox 3.5 beta builds for now) from it.
Or you could prepare a depth map so that it appears threedimensional when viewed through anaglyph glasses. Or feed it into a real 3D engine and view it from all sides.

Sure, there’s lots more to do until web applications will have the same power available as desktop ones, but with video and canvas working together we are making major progress towards web browsers not just showing media content, but actually being able to process it.

Right now, the web is a great place to be 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

*