Nothing in the Spec Allows for Smooth Or Adaptive Streaming, an Essential Feature for A

Default player menus (which we will use), are very basic and may take a fair bit of effort to skin with a branded identity or a sophisticated look and feel. Complicating this, different browsers still implement HTML5 and CSS differently. Add rounded corners, for example, and your video player may look round in IE and Firefox, but still look square in Chrome and Safari.

Nothing in the spec allows for smooth or adaptive streaming, an essential feature for a serious video playback site.

Perhaps even more important to some, the spec does not, and evidently never will, include Digital Rights Management (DRM). This means content protected by copyright will never be delivered through HTML5 (by the copyright holders, at least).

Second, the HTML5 spec allows developers to deliver video to platforms on which the issue has been forced, such as iOS products (iPhone, iPad). But looking at the issue a little differently, it also frees developers from proprietary delivery platforms that can restrict or control how media is delivered. This is, after all, the purpose of having open standards.

Video Codecs

As already mentioned, your biggest challenge with HTML5 video will be preparing and incorporating your content in multiple codecs. Currently, each browser has its own preferred video format. And it appears that the fractured implementation of HTML5 video will get worse before it gets better.

Right now you have three possible options for encoding your video:

H.264 – a popular format that can take advantage of hardware acceleration, supported by graphics chips in desktops and devices; also the default recording format for many of the newer video and mobile devices on the market; however the format is patented and while it remains royalty free for non-commercial use, it gets complicated, and potentially expensive.
Ogg Theora – an open standard that is not patented and is royalty free. Supported by: Firefox 3.5, Chrome 4, Opera 10.5
VP8 (WebM) – a newer standard recently acquired by Google and released as an open source, royalty-free (but still patented) format. Supported by: Firefox 4.0, Chrome 6.0, Opera 10.6.

Chrome deserves special mention since Google will actually be removing support for one of the three HTML5 video formats. Google announced that future versions of Chrome will no longer support H.264. Instead they’ve released WebM free, non-exclusive, royalty-free patent license.

H.264

Out of the three standards, H.264 has the momentum, the quality and the recognition among media professionals. It also has the backing of a massive consortium of some of the industry’s biggest companies, including Microsoft and Apple, via MPEG LA. And therein lies its critics chief complaint: H.264 is not free.

Lastly, consider ease of production, not an insignificant issue. All major video editors, including Final Cut, Adobe Premiere and Avid, export to H.264 format. The same can’t be said for Ogg Theora or VP8. If your shop is producing its own video, and a lot of it, using H.264 exclusively will shave a big chunk off your workflow.

Ogg Theora

Ogg is the only standard that is truly unencumbered by patent. However, it is also arguably the lowest in quality, though not by much. Multiple head to head comparisons against H.264 have favored the latter. While Ogg encodes to a slightly tighter file, it produces a lower image quality than H.264 and suffers even more in its streamability.

VP8 (WebM)

Between the two extremes of high quality but patent-encumbered (H.264) and marginal quality but royalty-free (Ogg) rests VP8, probably the most controversial standard of the three. So far, tests have shown that H.264 provides a slightly higher quality video than VP8, but that difference is negligible for most commercial purposes.

In summary, as in most situations, no one solution will fit the needs of all projects in all circumstances. But for most projects in most circumstances, you’ll probably want to go with H.264. Not only is it the most widely adopted format, on both the production and consumer end, but it holds a clear performance advantage due to hardware acceleration. For commercial video sites, potentially huge licensing fees may be the bullet to bite in favor of market reach.

But this whole debate tends to fall flat for one major reason: whether now or in the near future, all browsers will support HTML5. However, not all browsers will support all codecs. Just as you wouldn’t code a stylesheet that looks beautiful in IE but breaks in Firefox, you want to create cross-compatible video tags as well.

Video Converters

What this means in practical terms for you, the developer, is that your video content will need to be encoded in at least two (optimally all three) video formats in order to work with the HTML5 spec. Fortunately, you have several tools ready to help you with this task.We use Adobe’s media encoder

The <video> Tag

As you’ll recall, in HTML5 embedding video essentially comes down to using a single tag: <video>. But as with any HTML tag, you have a lot of options for parameters. Here are the essentials within the tag itself:

src: the location and name of the source video, it works the same as the src parameter for the <img> tag. Note, however, that rather than identifying the video source here, you can, and probably should, do that outside the tag (see below).

width and height: (optional) dimensions of the video. More accurately, this is the width and height of the video frame, rather than the video itself. As with <img>, leaving this out will cause the browser to default to the dimensions of the source video. However, unlike <img>, putting in a size different than the source will scale the video, rather than skew it. In other words, the embedded video will retain the ratio of its source. If you specify a size smaller than the source, the entire video will scale down. However, if you specify a size larger than the source, the video will display in its original size, with the remainder of the dimensions you specified filled by empty space.

controls: adds a default video control overlay. This is useful if you don’t want to create your own custom control. However, if you do want to delve into customizing the player controls, you can use JavaScript and CSS. The spec allows for manipulation of methods and properties such as play(), pause(), currentTime, volume, muted and more.

preload: begins downloading the video as soon as the user hits the page. To instruct the video to preload, simply include the attribute. To instruct it not to preload, set the attribute equal to “none.”

autoplay: pure evil. This instructs the browser to begin playing the video as soon as the page loads. Do not use this.

Now comes the magic. The HTML5 spec includes a handy quirk that allows you to compensate for the browser dysfunction currently happening around the video format. Rather than specifying the video source using the src attribute, you can nest multiple tags within the <video> tag, each with a different video source. The browser will automatically go through the list and pick the first one it’s able to play. For example:

</video>

If you test that code in Chrome, you’ll get the H.264 video. Run it in Firefox, though, and you’ll see the Ogg video in the same place.

Ideally, though not strictly necessary on all browsers, you should include a MIME type in the type parameter to ensure compatibility with all browsers. This parameter should specify video type, as well as the video and audio codec. The specifics of the parameter will depend solely on how you encode your video. A list of the many possibilities can be found here:

</video>

As an example of all three video types in action, visit own site.

On this page, you’ll see source code for three different videos: H.264, Ogg and WebPM. The videos themselves are labeled with their codec, so you can see what shows up in your browser.

One small gotcha regarding MIME types: your server needs to be configured to recognize the various types. For Windows Server, that means adding entries for the various MIME types to IIS. For Apache servers, you’ll need to add the AddType directive to your httpd.conf or local .htaccess files:

AddType video/ogg .ogv

AddType video/mp4 .mp4

AddType video/webm .webm