Blowing up HTML5 video and mapping it into 3D space; No crashy Flash required

“I’ve been doing a bit of experimenting with the Canvas and Video tags in HTML5 lately, and found some cool features hiding in plain sight. [One API] lets you take the contents of specific HTML elements and draw them into a canvas, and the 3rd element in that list is just begging to be abused. Copying video into a canvas element means opening up the ability to manipulate or process video frames at runtime,” Sean Christmann reports for Craftymind. “Two concepts instantly came to mind that seemed like fun to try.”

• Blowing apart fragments of video: Click around the video frame to blow up that part of the video, the exploded pieces will continue to play the video inside them. After a while they retract back to their original place.

• 3D Video: This demo in particular runs really well inside webkit based browsers, but not so much in Firefox. Firefox doesn’t appear to have any hardware acceleration for Ogg decoding so I had to drop the video size in half in order to run at acceptable framerates. Even still, Firefox chokes pretty badly on my Macbook Pro. *Update* – I’ve changed the ogg video to be 640 x 360, prepare to see firefox weep.

Full article here.

Source: MacDailyNews