How to Navigate the HTML5 Video Maze

How to Navigate the HTML5 Video Maze

Rate This
  • Comments 0

I am constantly being asked by web developers how they can get started with HTML5 Video.

My first question is normally: Why do you want to use it? What problem are you trying to solve?

More often than not the answer comes back as: I want my video to play on mobile devices.

When you break it down to these simple terms it is much easier to come up with a suggestion on how to get started.

In most cases video content already exists in one format or another.

Previously I wrote about the back story behind the HTML5 video codecs and why I believe H.264 is the clear leader in actual adoption on the web. A year and a half on I’d say that very little has changed. You still need to support a couple of codecs to be compatible with the full suite of modern desktop and mobile browsers but it is up to you as content creator to choose how far you want to go when encoding your video content.

Take a look at the IE Test Drive Video Format support page to see some examples of how this works across the different browsers.

clip_image002

What this means in reality is that on desktop browsers web developers are generally happy to leave their existing solution in place to play their pre-existing video/audio content using plugins. They will then supplement this with the HTML5 Video and Audio tag if the browser is able to play their particular codec of choice natively. In my experience I have found that on the current most popular mobile platforms H.264, AAC and MP3 are generally well supported using the HTML5 video and audio tags and this is the format that the majority of people have their content in already.

How Do You Get Started?

clip_image004

The Microsoft Media Platform (MMP) frameworks are the glue that holds together individual pieces of the Microsoft end-to-end media solution. They save time, development cost and nerves. I have worked on a number of large scale projects that are based on the MMP; most recently the video platform that sits behind the upcoming Rugby World Cup 2011 event (50 mins in). Check out the Full Replay of the All Blacks v Tonga Match from Rugby World Cup 2011.

The Microsoft Media Platform: Player Framework (that is licensed for commercial use under the Microsoft Public License Ms-PL) has recently added a preview of support for HTML5 (Demo) that enables you as web developers to compliment the Silverlight player framework with a HTML5 video experience that enables you to reach additional mobile platforms.

Also there are a number of commercial solutions available that do all the work for you. I think two that are particularly good are JW Player™ (licensed for commercial use) and SublimeVideo® (Player as a Service).

What if You Want to Roll Your Own Player?

It is surprisingly easy to role your own video solution using the default browser controls and codecs that the browser supports. The markup below shows what you need to play a video in HTML5 with a “Fall Back” to an unlisted video on YouTube. For examples like this I tend to use WebMatrix as a lightweight IDE for building HTML5 mark-up.

Demo

image

Common Gotchas

1. Video MIME types

2. <video>Fall-Back</video>

  • Fall-back content (like the YouTube example above) is only displayed by browsers that do not support the <video> tag.
  • If the browser supports the video tag but cannot play any of the media types that you have requested the fall-back code won’t fire. In this case you need to use JavaScript to detect this scenario using the canPlayType() method and provide fall-back content as shown in the example below.

Demo

image

3. Byte Range Requests (seeking)

  • Content should be served from a HTTP 1.1-compatible web server to enable seek ahead to the end of the video.
  • If you server is not HTTP 1.1-compatible (e.g. Azure Storage) you must encode the video with key index frames in the file & not at the end so that seek ahead still works. The “H.264 YouTube HD” profile in Expression Encoder 4 Pro does this.
  • Also note that if the video file is gzipped seeking won’t work. Since with most codecs the video/audio data is already compressed, gzip/deflate won't actually save you much bandwidth anyway.
  • IIS also supports Bit Rate Throttling to save you bandwidth on the server side when delivering video content.

Real World Example

Last week at Tech·Ed New Zealand I presented a session with Gus and Zach from NV Interactive about a new video analysis system that they are building for New Zealand Cricket.

The existing solution uses video in the wmv format and displays in a browser using the Windows Media Plugin. This solution isn’t really supported cross platform and it definitely doesn’t work on mobile devices.

NV Interactive has chosen to use H.264 and MediaElement.js to extend their video experience across a greater number of users and devices. Like the other commercial players I have mentioned above MediaElement.js uses the same HTML/CSS for all players meaning that the HTML5 and Flash player experience looks the same for all users. It is also worth noting that MediaElement.js is licensed under GPLv2/MIT meaning that any enhancements that you make to the source code also need to be shared.

Watch the video of the solution that they are developing (to display this video I have used H.264 Main Profile 1080p w/ fallback to H.264 Baseline Profile 480p for mobile devices using CSS3 Media Queries, if the browser does not support H.264 I have fallen back to an unlisted video on YouTube - View Source on the page to see the code that I've used).

image

Where Does HTML5 Video Need to Go?

There are currently a few key areas not addressed by the current W3C Video Standard (full screen support, live streaming, real time communication, content protection, metadata and accessibility). Recently the W3C Web and TV Workshop discussed some of these areas and offered some early thinking on how they may be adopted as web standards in the future.

The big one for me is a solution for live and adaptive streaming. Currently there are three proprietary solutions that support live and adaptive streaming.

Dynamic Adaptive Streaming over HTTP (DASH) is currently in Draft International Standard. It looks likely that it will get W3C support if it is offered royalty free.

DASH supports:

  • Live, on-demand and time-shifted content delivery and trick modes
  • Splicing and ad insertion
  • Byte-range requests
  • Content descriptors for protection, accessibility and rating

What about Real Time Communications?

HTML5Labs is where Microsoft prototypes early and unstable specifications from web standards bodies such as W3C. Sharing these prototypes helps Microsoft have informed discussions with developer communities to provide better feedback on draft specifications based on this implementation experience.

On the labs site Microsoft has released a Media Capture Audio Prototype that implements the audio portion of this W3C specification. Their next prototype will support Speech recognition and will implement the Microsoft proposal available on the W3C website. Then, after that, the labs team will deliver another update to the Media Capture prototype that will add video capture capabilities.

In Conclusion

If you are hosting progressive download video and audio on the web you should be looking to support HTML5 video and audio today to extend the reach of your content.

More Resources