Navigating HTML5 Video
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.
DYI-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 http://dev.opera.com/articles/view/custom-html5-video-player-with-css3-and-jquery.
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 http://praegnanz.de/html5video/index.php.
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
Related Articles
The world of HTML5 video is fragmented, but a recent webinar explains how content providers can best prepare for it.
19 Jan 2011
Google's attempt to clarify its decision to drop H.264 from Chrome in favor of WebM creates even more questions than it answers
17 Jan 2011