HTML5: seriously, it's not just for video
In a way, HTML5 has been reduced to a buzzword. You hear a lot of noise about how great it is for video, and how the web standard is an alternative to Flash content, but you don't see a whole lot of examples of that. We thought we'd take a moment and round up some of the cooler, more exciting instances of HTML5 online -- sites and experiments that go way beyond just playing someone's home movies. We're talking 8-bit gaming, some really crazy video effects, and a handful of incredibly interesting ways designers are maximizing the potential of the everyone's favorite new toy. Check out the links below, and prepare to readjust your expectations of HTML5.
Note: Your best experiences for the links below will be in Chrome or Safari. You can get some of this working in Firefox, but as Chris Ziegler just remarked, "It's mega slow."
Note: Your best experiences for the links below will be in Chrome or Safari. You can get some of this working in Firefox, but as Chris Ziegler just remarked, "It's mega slow."
- These will absolutely blow your mind. Mr.doob's Chrome experiments -- Ball Pool and Google Gravity.
- Here's a roundup of experiments from Ben Joffe, including a rudimentary 3D shooter, a 3D functions plotter, and an HTML5 color picker.
- Some of my personal favorites, KesieV's Akihabara game room. The Legend of Sadness is where it's at.
- Exploding, real-time video.
- WPilot -- a multiplayer shooter. Like Asteroids meets Quake.
- A giant, color-cycling canvas. Weirdly addictive to play with.
- 3D molecules. 'Nuff said.
- Mega Man intro. In HTML5.






















Thank You, Joshua!!!! A post like this is exactly what I wanted to see :)
If anyone has the attention span, this discusses some other interesting innards:
http://apirocks.com/html5/html5.html#slide1
My favourite stuff: Drag and drop, geolocation, client side storage.
There's something for everyone :)
(Although I am not a fan of how columns are implemented. It's all progress, though!)
@Picklesworth
Nice slide and yes those are interesting new bits and pieces that will be implemented on some browsers and are actually very cool. I'm not sure if IE is supporting SVG's yet...I'll look it up again if it comes up.
But, HTML5 is the markup language ..not the combination of HTML5, Javascript API's (which in no way are standardized across browsers), and CSS3!
Perhaps we should follow AJAX and call it HJC(Hijack) come on! it's kind of edgy and cool!
So the conclusion judging by those demos:
If it runs like a dog and looks like a dog...it's done with HTML5.
I'd like to see a business example done in HTML5. We're in the midst of using Flex (Flash) to build up a business app, and while we're happy with it, it'd be nice to see something that's been done in HTML5.
So.. forms, graphs (live), user logins, page security, nested data elements, data object import from a server backend (we're pushing XML data via PHP now), "pretty" components like calendar objects for scheduling...
Anyone know of anything? Please reply back if so... THANKS!
Ha, already high score in Ben Joffe's Torus Classic.
html5 is for websites. Javascript makes the magic possible. Engadget, don't add fuel to the ignorance. Saying something is "in html5" is misleading. Javascript is independent of the spec. That's like saying a jpg photo is "in photoshop". Javascript is the difference between a static canvas and animation.
Saying otherwise overstates the significance of html5 as a markup specification into a fully featured programming language. If I could, I'd urge everyone not to fall into this trap and to know the difference.
@zeroinfinity2 I can't agree with you anymore. Jobs can't stand this point acutally. He just misleading most of people. Be honest, most interest for him is just $$, revenue of Apple.
@adrianmak
I have to agree that the decision against flash is financially motivated.
@ddddd : One of those is a plugin, the other is a specification that applications implement. There's one popular browser that falls to bits if we tell it to move a block of text, and which doesn't understand rounded corners. That doesn't mean Javascript or CSS2 are failures.
Here is another one, a little klondike/solitaire in HTML5, with canvas and sound: http://www.warpdesign.fr/warpklondike/
@warpdesgin
very slow on the iPhone. Think Steve has spread lies hasn't he
One important point regarding html5 video as Jobs said, imho, html5 is not the key role to play back the video, html5 just provide a handy video markup tag that tell web browsers this is a video content. That's all. The video rendering is not done by html5 (html invented from day one is just a markup language), the video rendering is handle by web browser itself or some degree of relay on OS layer too. Therefore, if web browsers has no consensus in the video codec , my browser support only h264, your browser support VP8 and other browser something else, I can forsee html5 video playing how better than Flash ?
I can't believe that people say that ogg has terrible video quality. That one exploded video had quality better than most Youtube videos I've seen.
Wow...that looks like ass. Congrats on that.
If any of you guys have a Nexus One running 2.2 froyo you can watch these demos via xScope browser and Skyfire. Skyfire works best.
Thank you Google
Well, Ball Pool crashed my Chrome instantly.
So, nice job HTML5.
awesomely my pre will run some of these things!
I cany wait for html5 to mature. It's a game changer for the start of cloud os of the future. Good time to start learning javascript!!
I realize this article is not about Apple, but FWIW most of these examples (and all the other html5 examples I've seen) did not work on my iPad. The one or two that did work were slow and painful. I am at a loss to understand why Steve is boosting this technology when it doesnt even work on the devices he claims dont need flash because of html5.
Also, why should we get excited about a "new" technology that can barely do what Flash was doing back in the 90's, all because it wont require a "proprietary" player? Is it really worth going back 15 years in technological advancement just so there is no flash player in the mix? I dont see the logic or benefit from a business standpoint OR a personal one. Who actually wins in this equation???
Your HTML5 nonsense just spiked my cpu temp from 130F to 170!
sweet
I'm an Android/Google enthusiast (Gmal, HTC Desire, etc.), i like Apple alot (Macs, iPods, etc.) and i like the Job's vision of technology. I take the best of two worlds. I love Flash because of all the things now we are able to do/see. But in the debate of Flash/HTML5 i think Jobs hit the point. HTML5 is freaking, seriously. I opened all those links in my browser in separate windows and the CPU temp was always the same when i'm googling news. Usually it's enough a Farmville windows to hear the fan take the fly...
really impressive.
@Dokdude
when you play a video, it is done in the cpu layer (and if is available in the gpu), no matter if you are using a media player, flash, quicktime or html5. So, if there are a performance hit with flash, then html5 will not do any difference.
html5 and javascript is not cpu efficient.
Apple should be credited with significantly raising the awareness of HTML5 & getting serious websites & media companies to start utilizing it.
Is it perfect? No.
Does it completely replace Flash? No.
Is it good enough, for many ads/apps? Yes
Apple products seem to be selling fine, without Flash. Perhaps many people don't care about Flash (I use FlashBlock) or don't use sites that make use of Flash.
People should stop complaining about Apple & let the market decide if Flash is necessary on mobile products or not.
these aren't HTML 5. They're HTML 5 + JavaScript.
The legend of sadness looks like this:
7 link tags to external javascript files
open and close body tags with no content
inline source tag with like 500 lines of javascript
which means the whole thing is just canvas/svg (which requires javascript) and document.write() This is JS vs Flash, not HTML.
@SophT Are you kidding me?
I wonder why you comment on this when you clearly don't know what you're talking about. HTML5 is NOT a programming language, it's a markup language. The programming part of HTML5 IS done by Javascript. That's what you should use to create these kinds of things in HTML5. And Canvas/Svg is what you use in HTML5 to display these kinds of things.
The only thing HTML5 does is creating the possibilty to use these other tools within the html code.
@Ijey419
SophT is right, this game can be done WITHOUT HTML5.
@Ijey419
LOL oh the irony. You didn't understand a word he said, did you?
@zeroinfinity2 Complaining that it is JS doesn't give you a valid point, since JS is what is going to be used i HTML5 as well.
@magallanes And how exatcly would it be different in HTML5?
Really neat -> http://mugtug.com/sketchpad/
Shows audio -> http://9elements.com/io/projects/html5/canvas/
@Picklesworth
the average joe doesn't really care if it is running a plugins or not.
engadget is written by journalists (well..kind of) not technical people, despite what they may think. They appear to have just swallowed this whole "HTML5' is the future thing from Jobs without question because they're undeniably apple biased (putting it nicely).
@ajwoodhouse well you are an idiot and they had articles about HTML5 long before Jobs started talking about it. So take your apple hate somewhere else
@ddddd
is easiest to install a plugin versus to install or to update a new browser.
The legend of sadness game and other games by that site play on my iPod touch... This is awsome.
I'm using the engadget app.
A prefect example of how HTML5 is useful in other ways besides combating Apple's anti-Flash ways. Just remember, Internet Explorer users, that you are left out of this (IE has no HTML5 support).
FLASH is D E A D
How many line of code does it take to animate something in every other language compare to flash? It took pages I tell you, and years of learning compare to Flash. People debunking Flash is ignorant. As a developer/designer, I accepted every technology that lived in harmony with one another and not always sticking with one particular technology.
Dear Jobs, your Apple technology is as close as my B*tt h0le so stop trying to convince me that it's open.
I see nothing here that Flash doesn't do better