A Tale of Two Video Players: Flash and HTML5

It was the best of codes, it was the worst of codes, it had the tags of wisdom, it had the tags of foolishness, the Web had everything before it, the Web had nothing before it, we were all going direct to mobile, we were all going direct the other way…

Okay, maybe the advent of HTML5 isn’t quite that Dickensian.  But there do seem to be a lot of superlatives being tossed around on the net, and as is generally the case with either-or’s, the truth about the new markup is somewhere in the middle.

Let’s start at the beginning: what is HTML5, anyway? You may remember our article from May, Better Browsing on the Mobile Horizon, which described HTML5 as a markup for current coding practices. A main aim of the revisions is to make programming in HTML simpler at the same time that it provides improved usability. HTML5 won’t be standardized for awhile yet, but pieces of it are already in use and supported by current browsers (even Internet Explorer version 9 is catching on, as evidenced in the bar graph below, which shows how various browsers performed on a test of HTML5 compatibility. Formerly, IE didn’t support the markup and could’ve remained an impediment to its ubiquity, since the Microsoft browser still dominates the desktop market).

Click to enlarge.

There’s been a lot of talk about what this means for existing technologies, and the future of the Web in general. One of the biggest points of contention has been what the markup will mean for Flash, current king of online video and animation. Some are convinced that HTML5’s new <video> tags, which allow rendering of files directly in the code, will resonate as a death knell for the Adobe plug-in, especially since fallback solutions are currently needed for iPhone, iPad, and other devices that don’t support Flash playback. The recent Eloqua10 microsite was our first HTML5 project, and made extensive use of the <video> tag and Javascript to create a design that would function across all platforms.

Click to enlarge.

While <video> will make it easier than ever to play videos in-browser, HTML5 is not, in all likelihood, going to kick Flash to the curb. For one thing, old versions of IE are still in widespread use, and those versions don’t support HTML5 (see pie chart below). For the Eloqua microsite, Flash was still used as the backup video player for users viewing the video pages in IE7 or IE8.  The decision to use Flash as a backup, though, represents an important shift in programming philosophy: instead of catering to the current audience, as has been the norm in the past, we’ve concentrated on embracing emerging technologies. Call it a preemptive strike. As browsers get up to speed, our content will be there to meet them.

Click to enlarge.

Rather than rendering Flash obsolete, HTML5 is more likely to relegate it to more limited and appropriate applications. Flash assumed dominance because for years it was the only really workable approach to a lot of multimedia needs. With HTML5 on the scene, Flash can retire from years of overwork and take up hobbies in its areas of optimal performance: visual storytelling with animations and complex cueing of video playback, educational tools and other web applications, desktop applications,  3D motion and graphics, and online/offline gaming.

HTML5, on the other hand, is ideally poised to inherit the Web; the use of <video>, <audio>, <canvas> and Javascript replacing what Flash used to do for many sites. In addition to its native ability to play embedded video and audio, HTML5 offers a compelling list of other features that are (or will be) indispensable as browsing evolves. Geolocation, an API that can programmatically infer location – through, say, your mobile phone – is a good example, as is the fact that it incorporates controls for things like sliders, important to users browsing sans mouse. And HTML5 even makes headway in the attempt to jump the disconnect between browsers and desktops. Offline data storage isn’t new – if you’ve ever used Outlook, you know that you can sort through old data without an internet connection. HTML5 allows users to do the same thing right in the browser.

Click to enlarge.

The next few years will determine whether HTML5 becomes the new standard for site development. If the effort to simplify and innovate the language translates to a smooth adoption by software programmers - and if corporations and the public demonstrate alacrity in updating their browsers - we may have cause to say that HTML5 tis a far, far better code that we do now than we have ever done; tis a far, far better Web that we go to than we have ever known.