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

MacDailyNews Note: Best viewed in WebKit-based browsers like Apple’s Safari.

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.

MacDailyNews Note: Help kill Adobe’s Flash:
• Ask MarketWatch to offer HTML5 video via the customer support web form here.
• Ask CNBC to offer HTML5 video via the customer support web form here.
• Contact Hulu and ask them to offer HTML5 video via email:
• Ask ESPN360 to offer HTML5 video instead Flash via their feedback page here.
• Join YouTube’s HTML5 beta here.
• On Vimeo, click the “Switch to HTML5 player” link below any video.

[Thanks to MacDailyNews Readers “Edward W.” and “jax44” for the heads up.]

Reader Feedback

This site uses Akismet to reduce spam. Learn how your comment data is processed.