“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.]
Wow… That’s … new!
I agree about dumping Flash for HTML5 but currently I find it streams erratically, hangs up, and has many other small issues of its own. Not ready for prime time yet, imho.
nice
How long before most browsers support html5?
Seriously, it has been a long time since I have used windows explorer, how does it do with current standards let alone with html5?
Most sheep will use explorer because they don’t take the time to install different browsers, they only use the default installed browser.
So what did the big mutant rabbit shoot?
Just tried it on an iPad and it was a no go.
Yeah, it did not load on the iPad. 🙁
That is fabulous, having had some recent troubles with Flash for no apparent reason hiccuping I am pretty impressed with that demo doing so much more so much more smoothly. Can’t wait for Flash to be sent to Room 101.
Thats really cool actually but too bad its not working on the iPhone that would be truly impressive!
@ theloniousMac,
And Flash is?
Ha! Ha! HTML5 is the futur! It really rocks!
explode works on Firefox (win), rotating doesn’t
Safari (win) neither video shows, audio does though.
Wow, looks great in Opera 10.5. This really shows that html5 is a great alternative for flash!
MrScrith,
Don’t know why it won’t play in your Safari. No one else having the same problem.
If you having trouble viewing HTML5 objects in Safari, then download this newest WebKit for Safari.
http://nightly.webkit.org/
Both solid like a rock!
@MrScrith
Ditto with Safari 4.0.5 on XP at work–no video, only sound. Maybe it’ll work better on my Mini at home
Safari 4.0.5 on 10.6.3 on a Unibody MBP, and both play flawlessly!
Cool stuff MDN, thanks for sharing! One more reason to get on the HTML5 bandwagon.
–mAc
Most impressive! And the code looks fairly simple. Now the “Wow” starts…
Both looked great for me in Chrome, and my MacBook isn’t exactly new.
Or a gecko based browser like Firefox, Seamonkey etc.
It’s plays flawlessly, but it’s using 105% CPU on my 2.26GHz Core 2 Duo MacBook Pro. That’s not an improvement.
That is so cool! And they both showed great in Chrome!
I have to say, YouTube using HTML5 is, thus far, a big pile of suck. Sorry to say, I had to switch back to Flash.
Hopefully someday soon I can switch to HTML5 permanently.