Getting Started - Navigating HTML5

From HTML5 Video
(Difference between revisions)
Jump to: navigation, search

Revision as of 20:06, 26 August 2011

HTML5 has quickly transitioned from an ad hoc standards process into a widely adopted and highly visible platform for delivering rich media web experiences. We will look at key developments that shaped the HTML5 platform and how HTML5 is playing an increasingly critical role in organizations' online media presence. We will also highlight many practical and technical resources to help navigate HTML5 video for use in your organization or software platform. And finally, we look at what developments we can expect in 2011.


HTML5, a Short History: Before Steve Jobs

Much has been said about Steve Jobs' "crusade" against Adobe as the primary mover of an entire online video industry toward reluctantly supporting a non-Flash platform. In fact, the shift is part of a much broader industry transition toward commoditization of core web technologies that started before Jobs became one of its biggest advocates.

To understand the rapid adoption of HTML5, it's good to brush up on its history. Mark Pilgrim's book Dive Into HTML5 offers some great insight. To summarize, in 2004 at the W3C (World Wide Web Consortium) workshop on Web Applications and Compound Documents, Mozilla and Opera jointly outlined their vision for future extension of HTML. The meeting established that the W3C was not going to put any resources into extending HTML.

As a consequence, a separate organization, WHATWG, with a competing vision for the future of extending HTML was formed. This separate organization offered greater flexibility and an open process that was more agreeable to innovative evolution of the web application platform.

Among many other extensions to HTML, the video tag was proposed as part of the WHATWG efforts. Opera was the first browser to ship experimental video tag support in November 2007. As HTML5 began to gain interest from the industry, the issue of a standard codec for the video tag became a highly contentious issue in the standard process. Another W3C Workshop, Video on the Web, took place in December 2007. There, open web video advocates argued that the HTML5 spec should specify a royalty-free baseline codec. Ultimately, all the involved parties could not agree on a single codec, so the HTML5 spec ended up being codec-agnostic. (More detail about codecs can be found in the practical guides included in this article.)

In mid 2008, Kaltura-together with the Mozilla Foundation, Yale Information Society Project, and Participatory Culture Foundation-founded the Open Video Alliance, which helps promote open standards for online video. The alliance hosts the annual Open Video Conference. Around this time, Kaltura also began working on a project to develop open collaborative video tools for Wikipedia based on the emerging HTML5 video specification.

HTML5 Takes Off

In January 2010, YouTube began to support an HTML5 video player, as by this time all the major browsers except Internet Explorer were shipping HTML5 video support.

In May 2010, Google announced the WebM project with the aim of gaining industry support for a royalty-free codec for the HTML5 standard.

In April 2010, Steve Jobs published his thoughts on Flash in an open letter, which served as a clear industry marker that supporting HTML5 was going to be critical for reaching the hugely popular iOS devices and, probably more than any other event, triggered industrywide uptake.

Around the same time, Microsoft expressed its commitment to the HTML5 platform. A Microsoft general manager later went on to say, "The future of the web is HTML5."

As a result, video platform providers reacted. Soon, many video platforms and video sharing sites began to flesh out their HTML5 support options.

Kaltura launched, an industry resource for HTML5 video-related information and home of Kaltura's open source collaboration with Wikimedia and Mozilla that delivers a robust, high-quality HTML5 library. Finally, in late 2010, Adobe announced its entrance into the HTML5 playing field with its HTML5 Video Player widget based on Kaltura's HTML5 library.

What did all these developments mean in terms of real-world adoption? In January 2010, the percentage of online video that was available via HTML5 was about 10%. By October of the same year, 54% of online video was available in HTML5, according to a report by MeFeedia. In 2011, HTML5 adoption will be even more pervasive.

HTML5 and Flash

One way of understanding the HTML5 platform is in terms of differentiation from the Flash Platform. Here are some of the major differences between the two:

  • Single vendor vs. many vendors-Within the Flash Platform, a single vendor (Adobe) controls the platform. With HTML5, many different browser makers (Apple, Google, Mozilla, Opera, Microsoft, and more) support the standard to varying degrees across numerous desktop browser versions. Each company also has a mobile version(s) of its browser along with other mobile vendors (BlackBerry, Palm, Nokia) with various software versions across devices and mobile network carriers; this makes for a huge compatibility matrix. On the one hand, HTML5 makes for a complex platform, but on the other hand, it contributes to a fast pace of innovation with interest and investment from a wide range of powerful forces in the industry.
  • No DRM-Unlike with Flash or other media platforms, there are no cross-browser DRM solutions. There are tricks that make copying content slightly more difficult. But in general, HTML5 is not presently very good for restricted rights content. This is expected to improve during 2011 and into the future.
  • No fine-grain network controls-Currently, it's difficult to do network management on the client, and there is no cross-browser adaptive streaming solution. (Apple iOS devices do support Apple's HTTP Live Streaming.)
  • Integrated solutions for advertising not as widely supported as in Flash-This is another area that is expected to greatly improve in 2011.
  • Generally not as easy to plug and play third-party components with player frameworks-There is no top-down OSMF (Adobe's Open Source Media Framework) that makes it easy to adapt plug-ins to players.

It's important to note that even given the above limitations, HTML5 has some advantages:

  • Combined with faster JavaScript engines, CSS3, and other features of modem browsers, rich interfaces can be built around HTML5 and can be leveraged across numerous platforms and devices.
  • Numerous open source JavaScript libraries have emerged to help bridge gaps in HTML5 implementations.
  • Forward-thinking content distribution companies such as Netflix have already started adopting HTML5 for their user interfaces and working to address the limitations of the video tag for distribution of their media content.
  • HTML5 is here to stay and continues to build huge industry momentum. It's hard to find an active browser vendor or mobile software platform that is not going to support HTML5.

Perhaps the most important advantage is that you don't have to choose HTML5 exclusively over Flash. Content providers will be embracing both Flash and HTML5 for the foreseeable future. As I'll outline in more detail later, the key to successful adoption of HTML5 technologies is leveraging software solutions that bridge both Flash and HTML5 to deliver robust rich media experiences across devices and platforms with a unified API and development platform. Like other open source components, leveraging these solutions allows companies to focus more directly on their online presence rather than on the plumbing.

Developing an HTML5 Strategy

The key to any HTML5 strategy is to understand your needs and current online media presence. In this section, I'll outline a few starting points and the technologies and resources you should be looking at.

DIY-Building Your Own HTML5 Player

There are a few cases where you would want to build your own custom player (instead of leveraging an existing video platform solution). You could be a hobbyist or student who is interested in learning more about HTML5 video players without the need to maintain a real-world player that scales up features across many platform contexts. Your HTML5 player needs may be very simple, and you don't care about features such as analytics or player branding.

Getting a simple player up and running for a given browser is not too complicated. But once you want it to work across many browsers, it gets more complex.

The book Dive Into HTML5 is a good place to start to get an overview of most of the technical complexities of getting basic playback of the HTML5 video tag working across browsers and devices. You will notice there is a lot to consider "just for basic playback." Some of this complexity comes from the lack of a single standard codec, and other issues arise from incomplete or broken HTML5 implementations. In the concluding section, you can see what is needed for compatible playback. You need to create three different encodes of the asset (H.264, Ogg Theora, and WebM) and include three different markups (the HTML5 video tag, with fallback to the Flash object, and with fallback to a direct link to the file).

Once you get your basic playback working, you will probably want to theme the player. Cristian I. Colceriu of Opera has written a nice tutorial on player theming using CSS3 and jQuery, which is available at

Once you start theming and adding features, your project will quickly turn into a player library.

Using a JavaScript HTML5 Player Library

If dealing with all the complexities of building an HTML5 player from scratch does not sound fun, there are fortunately many open source HTML5 players to choose from. A good site to try some of the more popular players is

Choosing a particular software solution is never easy. Here, I have broken down choosing an HTML5 player into three major areas of consideration: feature set, extendibility, and sustainability/community.

The feature set of a given player is relatively straightforward to evaluate:

  • Does the player meet your current and perceived future needs? Most of the players support Flash fallback, iOS, and full-screen playback. A lot of players support playlists, subtitles, share functionality, and skinning. Few players have strong support analytics, advertising, and tight online video platform integration.
  • Does the player provide a consistent experience across browsers and devices? When evaluating players, be sure to have at least one Android and one iOS device handy. Seeing how the players flash fallback performs with Internet Explorer 6 through 8 is very important.

For extendibility we consider three factors:

  • Is the project open source? Pretty much all the players in consideration are open source, but some may better fit your license criteria.
  • Is the library modular in code structure and support being extended via plug-ins? Are there third-party plug-ins or integration?
  • Does it have a well-documented API? Does it let you use the HTML5 video tag API regardless of its underling playback method?

When looking at sustainability/community, consider the following:

  • Does the library have active development community and a public source repository? Are there multiple developers committing to the project? When was the last commitment to the repository?
  • Does the library have real-world usage?
  • Does the library have an organization backing its development? Is the project a critical part of that organization's platform and long-term strategy?

Using an Online Video Platform for HTML5 Video

A video player is only as good as the video platform behind it. A video platform manages everything from content ingestion, encoding, player feature customization, and dynamic playlists to analytics and advertising. Most importantly, the platform provides a "marketplace of features" that enables the integrator to make high-level choices about plug-ins, partnerships, and integrated components without worrying about underlying platform implementations. When evaluating platforms with HTML5 support, look for platforms that provide as much feature parity between Flash and HTML5 as possible.

Things to Watch for in 2011

While HTML5 adoption was rapid in 2010, Flash is still widely preferred for desktop browsers. The HTML5 spec will continue to evolve but will become slightly more fragmented around new features such as temporal URLs and timed text accessibility. Here again, JavaScript libraries will help bridge gaps across implementations.

DRM will also likely have a fragmented feature set across browsers and devices. DRM will continue to work as plug-ins or specific per-HTML5-platform implementations. Free software browsers will have a hard time integrating DRM secrets into the transparent core of their free software browsers.

WebM has made a lot of progress in the latter half of 2010, with 80% of YouTube videos now supported in the format. But 2011 will dictate how important the codec will become for sites outside of Google.

An open adaptive streaming protocol should be nailed down in early 2011, and by the end of the year, Mozilla, Google, and Opera browsers will likely support the standard. If it performs favorably, it may help Google pave the way for broader WebM adoption for Android-based tablets and TVs that presently don't have a good adaptive streaming solution. WebM hardware decoding and encoding chips are just starting to arrive to the market. By late 2011, they should start to appear in retail mobile devices.

Advertising in HTML5 should pick up a great deal in 2011, with all the major video ad platforms improving their support for the standard.

Many JavaScript libraries are making it relatively easy to support HTML5 video. In 2011, we suspect we will see some consolidation of widely used HTML5 players as the network effects take hold of the market. Specialty plug-in makers (analytics, advertising, network management tools) can't easily build plug-ins for every HTML5 player out there, so some consolidation will occur

Originally written by Michael Dale for Streaming Media Magazine Navigating HTML5 article But feel free to edit this document and make improvements.