Author:
Joe Hakooz
Category:
Flash
Over the past few months I've paid very close attention to the much hyped debate between Flash and HTML5. Of course I had an initial bias in the debate, as did almost everyone involved, but there comes a time when you need to be objective and learn both sides of the story.
Now that I've spent time getting up to speed on HTML5, I thought I would clear up a few misconceptions which have been largely ignored...
Summary of New HTML5 Features - The Good
- Structure Tags - HTML5 proposes many new "structure" related tags. Seemingly designed with bloggers in mind, we soon can enjoy cleaner markup using the Section, Header, Article, Navigation, and Footer tags.
- Input Types - New form input types include: Placeholder Text for text fields, Email Address, Number (stepper), Number (slider), Search Boxes, and Color Pickers. All of these new inputs will make standard form development much easier and less dependent on JavaScript.
- Canvas Element - The Canvas allows developers to draw shapes, animations, images, and other visual elements using a drawing API.
- Video Tag - This is the big bad Flash killer we've heard so much about. Keep reading to learn more about the "future of video".
- Geolocation API - As the name implies, this allows the end user, with their permission, to share current GPS coordinates for location based applications.
- Super Cookie - Browser storage is about to get a big upgrade from the current ~10kb cookie limit.
- Offline Caching - Developers will be able to take advantage of a manifest file allowing applications to continue working while the user is offline.
Sure there are many more features, but these are some of the most exciting I've come across.
HTML5 Features - The Bad
- Is HTML5 Ready? - W3C is nearing the HTML5 final draft stage. Although already overdue, I've heard the final draft will be ready anywhere from a few months to a few years. The final recommendation isn't due until 2022. Typically browser makers really begin cranking once the final draft is ready, so we could begin to see widespread HTML5 support as early as 2012, but maybe much later.
- Browser Compatibility - Browser makers ultimately decide which features to support. And if we have learned anything from history, don't expect them to agree on everything. We already know that some browsers will allow canvas radial gradient fills, while others will not. Designers will love that! There are many other disagreements among browser makers, most notably the video format standoff. (keep reading...)
- Feature Detection - From what I have read, your HTML5 code will need to be littered with feature detection JavaScript. Fortunately there is a Javascript library called Modernizr that will help you out, but then you need to decide what to do if a browser does not support your code!
- Security Limbo - The aforementioned "Super Cookie" has already been criticized as a major potential security risk, and security paranoia has caused the W3C to eliminate critical features such as fullscreen video support. The thought is that a "well crafted video" could be used, in fullscreen mode, to trick users into providing passwords, etc... What they apparently don't know is that several years ago Flash overcame this issue by 1) requiring a user mouse click to activate fullscreen, 2) showing a mandatory notification to the end user when entering fullscreen, and 3) disallowing textbox support while in fullscreen.
Now let's look at the elephant in the room... Flash vs. HTML5
HTML5 Canvas vs. Flash
The Canvas Element has been widely accepted by the press as a Flash animation replacement. The Canvas drawing API does resemble Flash's drawing class allowing both technologies to programmatically create lines, fills, images, and other visuals. Setting aside the possible lack of Canvas compatibility across major browsers, Flash contains dozens of other graphic classes that HTML5 simply doesn't have. It is not realistic to expect HTML5 to hang with Flash as an advanced animation tool.
HTML5 Video vs. Flash
According to "HTML5 Up and Running", by Mark Pilgrim, there are several factors to consider when using HTML5 video...
- A video should be encoded into three (or more) formats to be viewed on most major HTML5 compatible browsers: Ogg, WebM, and MP4. This is subject to change due to uncertainty in the browser community.
- A Flash based "fallback player" should be included while HTML5 gains popularity.
- Fullscreen playback is not supported among other features.
- DRM is not supported.
- iPad currently has a bug with the video "source" tag.
Here are the steps required to provide a professional HTML5 video experience...
- Encode your video three times into the above mentioned formats.
- Add video tag markup to the page.
- Include one source tag for each of the three videos you encoded.
- Due to the iPad bug, the MP4 must be listed first.
- Include code to embed a Flash video player if the HTML5 video tag is not supported.
As you can see, there are quite a few more steps involved when using HTML5 video instead of Flash. You will also need additional storage space, and possibly more bandwidth since MP4s are arguably smaller in file size than comparable Ogg and WebM videos.
In Conclusion
HTML5 has much to offer. It will even be a good Flash substitute for simple animations and simple video players. But the reality is that Flash is absolutely in a different league. Flash has always been considered a compliment to HTML providing functionality and cross browser compatibility where HTML fell short. I think that type of relationship will continue with Flash and HTML5.