Flash vs HTML5
While part I focused on the quarrel between Adobe and Apple, the future of Flash is much larger than the ramblings of an over-dramatic control freak. Flash has been a definitive tool for web interaction. It’s lived through the indirect blow of AJAX by being more animation-centric and object oriented. It’s lived through the increasing functionality of Java by, again, being more animation centric and having a very hands-on design view in the Flash development environment. HTML5 however, is taking direct aim at animation, graphics, video and even 3D applications. Beyond the momentum of the current Flash-comfortable army of web developers, where will Flash sit in the future of the web?
Adobe has proven to be adaptive and intelligent. There is no doubt in my mind that right now, in various offices, at various desks, there are well paid people looking for ways to have Flash outlive this next battle. According to the W3C, HTML5 will reach recommendation by late 2010. That’s not a lot of time to come out with dramatic advances in Flash’s functionality. Lets take a look at where the battle fronts lay.
Video
Right now, there are a number of barriers to entry for placing videos on the web. If you don’t have your own Flash video player, getting one is confusing enough to give up on. Using YouTube or Vimeo has you sign up for an account and be subjected to their quality limit, censoring, upload times, user interface, ads, and terms of service. Windows Media Player embeds are dead due to their poor handling of codecs and even Apple’s .mov “embedding” technique is terrible. YouTube, Vimeo or one of the many other video uploading communities are almost always your best bet.
The W3C thankfully recognizes the web video problem and has brought us the salvation that is the “<video>” tag. Browsers will be able to see video files much like the way they see image files. Video files are however very, very different. The video playback controls for HTML5 are built in (and customizable) but the video file codec is a beggar. While H.264 is a real winner in terms of compression, quality and streaming abilities, it’s a huge mess in terms of legal use. If you want to use the codec for commercial purposes (which so many people would), you have to pay royalties. OGG is the other codec available for HTML5 and is completely free, but not as impressive in quality and compression.
Right now, Flash accounts for around 70% of the web’s video. The biggest player here is YouTube which accounts for around 40% of all web video. While YouTube is the child of Google, who has shown extensive co-operation with Adobe to bring Flash to their mobile platform Android, YouTube has also co-operated with Apple to stream videos in the Apple-friendly H.264 format. It seems YouTube will (rightfully) innovate to keep their grip on internet video, firm. YouTube has already dabbled with HTML5 and was in fact one of the first to offer a demo. You can opt-in to their HTML5 beta here. So far though, HTML5 videos don’t have the in-video ad-showing abilities of their Flash counterparts. Until HTML5 offers a way to do this, Flash will be a part of the YouTube and the overall web video mix.
Verdict: Let’s not lose perspective. HTML5 allows you to embed videos with the H.264 and OGG codecs and has built in controls. Flash is a platform capable of streaming video in a variety of codecs, any video control scheme imaginable, overlays, in-video links, advertisements, subtitles, keyboard interaction.. and… well the list is ever-expanding. Flash’s interactivity both server-side and user-side will earn its place in the future of web video. Both HTML5 video and Flash embedding (via swfObject) offer alternative content. If a browser doesn’t support Flash, it can seemlessly display an HTML5 video in its place.
Read on:
- See the HTML5 video tag in action – w3schools.com
- H.264 is a codec, Flash is a platform. One can not kill the other. – streamingmedia.com
- A developers perspective on HTML5 vs Flash. A little homegrown but good points are raised. – YouTube.com
Animation & Graphics
Unless you seek out things like Flash games, most of a web users experience with Flash animation is (unfortunately) ads. Flash’s ability to distract you is worth billions (I’m definitely not kidding). HTML5 currently lacks the time line animation environment of Flash, but coded animations could be on par with Flash via a canvas tween library. The idea behind browser add-ons like Flash Block is to protect your web experience from animated and invasive advertisements. Ironically, it’s because of such programs that there will undoubtedly be HTML5 animated ads. Flash has been in this game a long time though and I have no doubt their veteran status will trump HTML5 for the next few years.
Graphics are a different story. With HTML5, the web will support vector graphics directly. This doesn’t really conflict with Flash however since embedding static non-interactive vector images, with Flash, doesn’t make much sense. The benefit lies mostly on the side of developers that will be able to scale images without making/saving multiple copies of an image or scale a logo with a liquid layout. The benefit on the user side lies with reduced loading times.
Verdict: Put simply, Flash will win. HTML5 through the canvas API has the potential for animation engines like the popular GreenSock suite. The performance thus far has been lacking though and unless Adobe themselves come up with an HTML5 compiling animation environment (which they might), developers will be sticking with Flash. Web vector graphics on the other hand are filling a need that Flash never filled anyways. Apples and oranges.
Connectivity
This is a much more convoluted battle ground. Through Java, browsers have plenty of live peer connection abilities. Flash has fought back with a number of connection services. Firstly, there’s AMFPHP. Not made by Adobe but still very powerful; if PHP can do it, so can Flash. There’s the barrier to entry with interface setup and complications around dealing with that interface, but the capability is there. Plenty of todays Flash applications connect with databases and display PHP-retrieved data. Then there’s RTMP (Real Time Messaging Protocol). This is what ChatRoulette uses for it’s awkward magic. RTMP enables a Flash player to stream a file (such as a .flv Flash video) from a Flash Server. Another punch came with the Adobe Labs release of the “Stratus” service.
Adobe Stratus
Stratus 1.0, released in 2008, offered an exciting new way to connect Flash instances. When 2 Flash instances can connect directly to each other, this removes all server responsibility except the initial connection. The implications for chat and gaming were (and are) exciting. Then came Stratus 2.0, seen in the right panel above. Very exciting. Imagine the performance increase in gaming, conferencing and video streaming when you can receive information from your neighbors instead of a server half-way around the world. The only people more excited than Flash media users would be Flash media suppliers. The performance increase and server load decrease on something like YouTube would be phenomenal.
Verdict: This is the area in which Adobe has been advancing in leaps and bounds. Peer-to-peer connections are beyond the responsibility of the HTML5 specifications (or HTML6 for that matter). I don’t see HTML ever advancing to duplicate Adobe Stratus 2.0 functions. Flash wins this one in a big way.
3D
Let’s get something strait. This is not HTML5. It’s a Google Code project call O3D. In their own words – “Originally built as a browser plug-in, this new implementation of O3D is a JavaScript library implemented on top of WebGL”. While it’s not native HTML5, it makes use of HTML5, and it renders much more complex 3D environments, much better than Flash. 3D in Flash is sort of a hack – Adobe never intended for it to be a 3D engine. Papervision blazed the 3D Flash path and has since made a couple impressive advances. Away3D, Sandy 3D and Sophie 3D are other Flash 3D engines. With the release of Flash Player 10, Adobe recognized the 3D applications of Flash and made it much easier to render with it’s native 3D transformations. While it only allows 3D transformations of completely flat objects, this takes the calculation burden off of the imported library and dramatically improved performance. You can see what Papervision is capable of at papervisionshowcase.com (not currently working, but I assume it will be back soon).
Verdict: So far it’s a toss up which only time can settle. Even with Adobe offering performance enhancements and the dedication of the Papervision team, 3D in Flash is an exercise in how far you can push a hack. O3D is very young, but being a 3D-from-the-start development, it has a more solid foundation. It’s hard to say what will be developers’ mainstream choice. Sites that use 3D Flash, usually use to it to immerse a user in a product-centric environment. Flash’s animation abilities have proved much more immersive than any O3D (or Java based) implementation I’ve ever seen. I see that trend continuing for the next little while.
Games
Flash is without doubt the undisputed internet gaming king. Flash wins. By a lot. That was until my world was shaken… with this.
Quake II. In a browser. Don’t let the April 1st post date fool you – that’s Quake II running as well as it ever could. In a browser. This changes everything.
Verdict: Flash has an army of game developers behind it and a world of libraries such as Flixel. Developers are fickle and curious creatures though. I can see browser gaming exploding into 3D in the coming years and it will play out like the release of a new console. There will be communities and advocates for “retro” flash games, but the focus of internet gaming could entirely become HTML5 based Java ports like the one above. It’s a movement I would whole heartedly support.
In Conclusion…
The W3C aren’t bent on replacing Flash and it’s not what they’ve aimed for; Steve Jobs is responsible for any notion otherwise. HTML5 will change the role of Flash, but it is far from ever replacing it. I’d go as far to say that the role change would be minor – mainly simple video embeds and image rotators. The possibilities of Java and WebGL are very exciting and may largely replace Flash extensions such as Papervision, but not completely.
Read more on HTML5 vs Flash:
“We are scrapping three years of Flash development and betting the company on HTML5 because we believe HTML5 is a dramatically better reading experience than Flash. Now any document can become a Web page” Jared Friedman, CTO, Scribd
Scribd ditches 3 years of Flash development for HTML5 – slashgear.com
- W3School’s HTML5 Tag Reference – w3schools.com
- HTML5 experiance on the iPad – YouTube.com
- Introduction to HTML5 by Google developer Brad Neuberg (a must-see!) – YouTube.com
