Last December, we published “A Tale of Two Video Players” to compare the contributions of incumbent video heavyweight Flash and its more recent challenger, the <video> tag housed within the programming markup language HTML5. One year later, it seems like a good time to revisit the topic and assess how the web has operated until now, what it’s up to today, and where it may go in coming years. Think of it as A Christmas Carol for the digital age.

The Web of Christmas Past

Once upon a time, there was really only one option for playing video online, and that was through a plug-in called Flash. Flash accounted for about 70% of all web animations at the end of 2010, and techies argued over its staying power in the wake of HTML5: would Flash be kicked to the curb as the new markup’s native video and audio capabilities rose to prominence, or would users’ outdated browsers keep them from experiencing more innovative code? At the time, the single most ubiquitous browser was Internet Explorer, with a full 47% of the market between versions 6, 7, and 8 – none of which support HTML5. The most recent versions of Firefox, Chrome, Safari, Opera, Blackberry and Android browsers proved much more receptive to HTML5, earning a range of scores between 150 and 230 (on a scale of 0 to 300) in initial tests of compatibility, while IE hovered in the teens and twenties. The beta version of IE 9 seemed more promising, but it was too early to tell how well the browser and markup would mesh, and how quickly users would upgrade. To a large extent, the success or failure of HTML5 was in the hands of internet users; if half of the web audience continued to cling to older versions of browsing software, developers would be hesitant to create or update sites with cutting-edge code that those users would be unable to see. For the moment, Flash was still king.

The Web of Christmas Present

At the close of 2011, the online landscape is shifting. 41% of users still browse with older versions of IE, but Chrome 15 is nearly neck-and-neck with IE 8 for the distinction of the single most preferred platform – each commanding about a fifth of the total market. IE 9, the first version to support HTML5, has gained a foothold with 10% of total users. If the remainder of Explorer devotees upgraded to this most current version, HTML5 could be virtually ubiquitous. 

But, IE would still have some work to do to bring its user experience in line with new technologies. According to The HTML5 Test, which assigns a score out of 450 points to each web browser, IE 9 ranked poorly among the major players; at 141, it secures a distant fifth place. The test evaluated each browser’s support for HTML parsing rules, and features like canvas, video, audio, elements, forms, user interaction, among others, to tally the final score. Chrome was the winner, at 340, followed by Firefox (313), Safari (293), and Opera (286).

So, for those users who can see it, what does HTML5 look like? Essentially, the markup is a coalescence of HTML, CSS, and Javascript. Native video capability is not its only selling point (also better semantic tags, improved data storage and sharing, geolocation, and the canvas function, to name just a few), but it is perhaps the most talked-about. The popular video-playing site Vimeo uses HTML5, citing its fast load time, lack of buffering, and smoother playback. It also admits the drawbacks: no full-screen display, and the fact that only 25% of Vimeo users will be able to see it, given their current browser versions. At WD, Vimeo is our choice for video hosting, and the embed code uses a combo of HTML5 for supportive browsers and Flash for the rest.

While we’re speaking of video playback, there is one more shift to note: currently, 80% of all videos on the web are encoded with the H.264 standard, which means they will be portable to HTML5. Compared with the mere 10% of similarly encoded videos in January of 2010, this is a huge (and rapid) leap. Many experts cite Apple for the change, since its iOS platform (which runs the iPad, iPhone, and iPod) doesn’t support Flash, and was likely instrumental in accelerating the adoption of a compatible video format.

The Web of Christmas Yet to Come

Scrooge may have been lucky enough to catch a glimpse of his future, but when it comes to new technology we’ll have to be content to wait and see. The governing bodies of internet protocol – Microsoft, Apple, and Google – have all expressed support for HTML5. A Microsoft press release declares that “Microsoft is leading the adoption of HTML5 with a long-term commitment to the standards process,” and Apple agrees that “Standards aren’t add-ons to the web. They are the web. And you can start using them today.”

It would be nice if this kind of enthusiasm translated into a timely and ubiquitous upgrade, but there are several hurdles for HTML5 yet to jump. As noted previously, the majority of users are not operating HTML5-compatible browser versions; if the majority of web content made the change to a new markup, few people would actually see it. And it’s not as simple a solution as forcing them to upgrade, either. It is true that for many users, free downloads of new browsers are available. But newer browsers require newer computers – there is a percentage of people whose setup simply cannot support anything snazzier than what they already have, and short of buying new hardware, there isn’t any way for these users, conscientious though they may be, to jump on the bandwagon. A twofold problem emerges in the corporate environment; anyone who has worked for a large company knows that there is often an IT department controlling company-wide equipment and usage details. If a company mandates a certain computer model, or blocks websites with downloadable features, or requires all employees to cling to the cutting-edge browsers of 2001 (we’re looking at you, IE 6), then HTML5 can’t gain a foothold in those offices. At least, not until it becomes more expensive for the company to devise increasingly elaborate workarounds for its outmoded standards than it would be to upgrade all materials, and that can be a slow road.

But, let’s imagine an internet that doesn’t cater to the lowest common denominator. Traditionally, our in-house approach (and virtually everyone else’s) has been to develop content in the reigning format – in this case, Flash. In our recent projects, that attitude is reversing: embrace HTML5 as the wave of the future, and code fallback solutions for current or outdated systems. Using HTML, CSS, and Javascript “Reset” and “Shim” support, programmers can introduce workarounds that teach browsers how to interpret many of HTML5’s unfamiliar tags. If the web moves towards HTML5 as its main standard, these stopgap measures can be abandoned.

Above: HTML5 Video is a reality right now, when coupled with a little extra support from Javascript and a Flash object used for older browsers. This demo uses a solution that customizes the page’s markup when the page is loaded, based on which features it detects your browser can support. If you do use an HTML5-compliant browser that has full native video support, then you’re viewing HTML5 video. If you happen to use an older browser like IE7, then this video is playing through a Flash object instead.

Below: This interactive chart demo is a great example of embracing a more forward-thinking philosophy. In prior years the Flash plugin would have been the best tool for constructing a chart like this, but would of course not work on some browsers like iOS Safari (iPad, iPhone, iPod). This chart uses a mix of HTML, Javascript, CSS, and SVG to render a ubiquitous interactive chart solution—go ahead and try it, both on IE7 and on your iPad, we dare you! No fallbacks necessary, at the content entry level. Additionally this chart is fully indexable (great for SEO), and easily hooked up to a dynamic data source.

As the year comes to a close, our thoughts are on the future. In fact-checking this article we were surprised to see just how many big-name sites have already made the switch: Boston Globe, the Hearst family of publications, Newsweek, NPR, Google, Apple, GE, Sony, Windows, and Best Buy are all on board, and the markup seems to have also found a captive market in social media – Facebook, Youtube, Twitter, and LinkedIn have been converted as well. It’s a strong pack leading the way for HTML5, and if 2012 is anything like what we’ve seen this year, the race will not be a spectator’s sport for long.

Sources:

HTML5 browser compatibility test
 http://html5test.com/results.html

Vimeo and HTML5 
http://vimeo.com/blog:268?utm_source=twitterfeed&utm_medium=laconica

HTML5 new features tour
 http://slides.html5rocks.com/#landing-slide

Apple’s public statement on HTML5 
http://www.apple.com/html5/

Microsoft on HTML5 
http://www.microsoft.com/presspass/press/2011/apr11/04-12mix1pr.mspx