html5 vs flash - full comparison chart anywhere?

Question

So since Steve Jobs said Flash sucks and implied that HTML5 can do everything Flash can without the need for a Plugin, I keep hearing those exact words from a lot of People.

I would really like to have a Chart somewhere (similar to http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28HTML5%29#Form_elements_and_attributes ) that I can just show to those people. Showing all the little things that Flash can do right now, that HTML5/Ajax/CSS is not yet even thinking about. But of course also the things that HTML5 does better.

I would like to see details compared like audio playback, realtime audio processing, byte level access, bitmap data manipulation, webcam access, binary sockets, stuff in the works such as P2P technology (adobe stratus) and all the stuff I don't know about myself. Ideally with examples of what can be accomplished with, lets say Binary Sockets (such as a POP3 client) because otherwise it won't mean a lot to non-programmers since they will just say "well we can do without Binary Sockets". And ideally with some current benchmarks and some examples of websites that use this technology.

I've searched the web and am surprised not to find anything. So is there such a comparison somewhere? Or does anybody want to create this and post it to Wikipedia? ;-)

Answer 1

There are already many questions asked on SO for comparisons between HTML5 and Flash. HTML5 by itself isn't powerful enough (being a markup language), but people commonly refer to the whole stack that is HTML5, Javascript, CSS3 and more when referring to HTML5. This is not the tabular comparison that you were looking for, but it gets some points across.

To start with, HTML5 is a standard and will take time to reach completion. Browser implementation varies as of today although Chrome, Safari, and Firefox are really active in terms of what has already been implemented. Now the biggest difference between Flash and HTML5 is the sandbox. Flash being a browser plugin has access to all low level functionality that HTML5 does not due to the browser's security restrictions. It's much more easier to lift a restriction in Flash with a simple update to the plugin, but a lot more difficult to update the spec once it has been finalized and implemented, being the reason why it is taking so long. That said, HTML5 is bridging that gap to get as close as possible to what Flash does.

Audio/Video playback

In HTML5, full programmatic access is provided for audio and video playback. The issue of supported codec is still lurking wide open and being debated over.

Real-time audio/video processing

For real-time audio and video processing, things are not looking bad for HTML5. Checkout this demo for a sample of real-time audio visualization. Another demo for real-time motion-detection is available.

Websockets (with server sent events) and P2P support

HTML5 has WebSockets that allows creating a full-duplex connection to a server, thus reducing the need for Reverse Ajax/Comet techniques. This will be very helpful for games, chat, stocks and many other types of application that require real-time data. WebSockets are not raw sockets, and will only connect to servers that implement the WebSocket protocol. So direct access to your IMAP account, for example, won't not possible. One major shortcoming with WebSockets as they stand today is the lack of P2P support. It would have been much more useful had it supported connections to other clients. This might change in the future but as of today there is no P2P support.

UI

HTML lacked the UI side of things mainly due to a lack of a canvas like Flash. SVG was there but it wasn't the easiest thing to use in the world. IDE support for these is still minimal, but it should improve with time. A canvas puts HTML5 at par with Flash, at least on the UI side of things.

Devices - Webcam/Microphone/..

A HTML5 Device spec is targeted towards providing access to devices such as a webcam, microphone, etc. Interestingly enough, there is also a mention of P2P support on this link. It's still an editors draft but looks like we will finally have P2P before HTML6. More details on the capture API (video/audio) are available here. A full list of things being worked on the device end specifically are listed here. This has been forked off the HTML5 spec and is under a separate working group afaik.

Offline storage, Geo-Location, Parallel processing

among other things

Mobile support for HTML5 is also looking good with Mobile Safari on the iPhone and Android.

For some cool demos, checkout these links:

1. http://linuxers.org/article/some-cool-html5-demos
2. http://html5demos.com/
3. http://people.mozilla.com/~prouget/demos/
4. http://htmlfive.appspot.com/
5. http://9elements.com/io/projects/html5/canvas/
6. http://ajaxian.com/archives/html5-demos

Two more awesome links thanks to @iddqd

1. http://apirocks.com/html5/html5.html#slide
2. http://html5readiness.com

Answer 2

Perhaps more relevant would be a comparison between Flash and Canvas.

It's not very comprehensive, but here's a post with a few pros and cons listed for each, as well as an example ported from one to the other:

http://blog.mangrove.nl/?pageID=3&messageID=18436

There's also plenty of discussion on SO (for example: http://stackoverflow.com/questions/2172626/how-can-html5-replace-flash )... but it's not really the 'big picture' comparison you're looking for.

I'd be interested if others have any good leads on this.

Answer 3

This chart might be the sort of thing you're looking for.