Working with HTML5 multimedia components – Part 1: Video

As you are no doubt aware by now, one of the most popular and most talked about features of HTML5 is the ability to embed video content directly into your web pages without the need for a third-party plug-in such as Flash Player.

This new ability for browsers to provide native video has made it easier for web developers to add video content to their websites without having to rely on the availability of external technology. With the limitations Apple has currently imposed on  Flash technology for iPhones and iPads, the ability to deliver HTML5 video has become even more important.

This tutorial introduces you to the video element, its attributes, and the different types of video that can be used with it. It is the first tutorial in a three-part series that covers the video element, the audio element, and custom controls for working with both elements.

Note: You can explore some of the sample code and many of the concepts illustrated in this article by downloading and delving into the sample files.

If you were to set up a simple MP4 video to be played on a website using Flash Player, you might use the following code:

Using HTML5, you can use the following code:

Of course this HTML5 example is extremely simplified, but the functionality is the same and you can see just how much easier it is.

Video codecs are software that encode or decode video for a specific file format. Although the HTML5 specification initially mandated support for the Theora Ogg video codec, this requirement was dropped from the specification after it was challenged by Apple and Nokia.

Sadly this means that different browsers support different codecs, which sounds like a bit of a pain and it is. Recently, however, the situation has improved so that you actually only need to provide your video content in two different formats: MP4/H.264 for Safari and Internet Explorer 9, and WebM for Firefox, Chrome, and Opera. Firefox also supports Theora Ogg, but it has supported WebM since version 4.

There is, of course, a way to define more than one video file for your video content, but I’ll cover that a bit later.

The video element, which you use to embed the video into your web page, can include several different attributes, some of which are outlined in Table 1.

Table 1. Attributes of the video element

For example, if you want a video to play automatically and for the browser to provide the controls, you simply use:

The examples used in the previous sections use only one video file in one format, MP4. So how do you go about also serving a WebM video file?

This is where the source element comes in. A video element can contain any number of source elements, which let you specify different sources for the same video.

Using the source element

The source element has three attributes, as shown in Table 2.

Table 2. Attributes of the source element.

To specify both an MP4 and WebM source for the same video, you could use the following code:

When a browser attempts to play the video, it will check the list of sources until it finds one that it can play. So Firefox will skip the MP4 source as it is unable to play it, but it will happily play the WebM source file.

Note that in the previous example I've removed the src attribute from the video element itself since the src attributes in the source element are being used instead. If you did specify the src attribute in the video element, it would override any src attributes in the source elements.

Specifying the codec

If you wish, you can specify the exact codec that was used to encode the video file. This helps the browser decide whether it can play the video or not. It's generally a better idea to simply provide the type and let the browser decide for itself, as often you're not sure of what codec was actually used.

Should you wish to include the codec, you can do so as follows:

Note how the codec is added to the type attribute, specifically the quotes used and the separation of the type and codec by a semicolon. When adding the codec to the type definition, it's relatively easy to misplace the quotes, which will make the video unplayable because the browser will be unable to parse the source element. So, if you decide to specify the codecs explicitly, be careful.

Of course, you'll also need to provide a solution for those users who continue to use a browser that doesn't support HTML5, such as Internet Explorer 8 and below.

Since browsers ignore what they don't understand, legacy browsers such as Internet Explorer 8 will ignore the video and source elements and simply act as if they don't exist. You can take advantage of this behavior to provide an alternative method of displaying your video, either via a simple download link, or a third-party plug-in such as Flash Player.

Building on the earlier example, you might provide a link to the same video as follows:

The legacy browser will only display the link to the video file download.

Adding support for Flash Player is just as easy:

With this example, an older browser such as Internet Explorer 8 will display the video in Flash Player (if Flash Player is installed on the system) and also the download link. By providing a download link as well as a Flash Player fallback, you're giving users who don't have Flash Player installed a way access the video by downloading it and viewing it from their desktop.

If you're concerned about people being able to download and freely share your videos, then HTML5 video may not be right for you. When you use any of the methods described in this article, you enable users to access the direct URL to your video files, which they can then freely download. There is currently no way to prevent this with HTML5.

At some point in the future a standard method may emerge to handle digital rights management (DRM) in HTML5 itself, but currently there is no such method.

For more information on HTML5 and DRM see the W3C's HTML FAQs on this topic.

The provision of subtitling for HTML5 video was initially part of the HTML5 specification. A file format called WebSRT was defined, and this format could be used to specify video subtitles using the popular SRT file format.

Later renamed to WebVTT (Web Video Text Tracks), the subtitling specification was taken out of the HTML5 specification and given a specification of its own.

The WebVTT file format

A WebVTT file is a specially formatted text file with a .vtt file extension. The file itself must be UTF-8 encoded and labeled with the type/vtt MIME type.

The file must begin with a WebVTT string at the top. Lines within the file are terminated by a carriage return (\r), a new line (\n), or a carriage return followed by a new line (\r\n).

The file consists of a number of cues, which are used to specify the text and timing location within the video file of the subtitle in question.

The basic format is as follows:

The unique-cue-identifer is optional. It is a simple string that helps identify the cue within the file. The cue timing is given in a straightforward format, with the hour portion optional. Each cue can also have a number of cue settings, which are used to align and position the text. These are described in more detail below. Next follows the actual text of the subtitle, on one or more lines.

The individual cues for different time locations within the video file are set up in this way, with each cue block separated by a new line.

Here is a short example:

You can use the cue settings to specify the location and alignment of the subtitle text that is overlaid on the video. There are five such settings, as shown in Table 3.

Table 3. Cue settings.

For example, to position text at the end of the line, 10% from the top of the video frame, you would use the following cue settings:

You can see how the WebVTT file can be built up in this way to add subtitles to an entire video.

The track element

You may be wondering how you link your WebVTT file to your video. The answer is the track element. This element, which was also introduced in HTML5, lets you specify external text tracks for media elements such as video. Its attributes are shown in Table 4.

Table 4. Attributes of the track element

For example, consider a WebVTT file named english-subtitles.vtt that you want to attach to the video example used above. You could do this using the following code:

This ties the WebVTT file with English subtitles to your video. You can, of course, have multiple track elements within the video element. With the srclang attribute you can specify multiple WebVTT files that are in different languages to add subtitle support in multiple languages. (The default attribute can then be used to identify the track to use if the user's preferences to not indicate a more appropriate track.)

Browser support

Unfortunately, no browsers currently support WebVTT directly, but there are a number of JavaScript libraries available that enable you to use the WebVTT file format and provide subtitles for your videos, including:

• Playr
• Captionator (CaptionCrunch version)
• LeanBack Player 
• MediaElement.js
  

All of these solutions support video subtitles, and some offer additional features. Browsers are beginning to add support with both Safari and Firefox making advancements towards support, and Microsoft have recently posted a demo on WebVTT which shows how serious vendors are about supporting WebVTT in the near future.

You have seen how easy it is to add HTML5 video to your web pages and provide a fallback method using Flash Player to serve video content to legacy browser users. As powerful as it is, HTML5 video is not currently advisable for those wishing to protect their video content, as it provides no DRM capability. You also saw, briefly, how you will be able to add subtitles to your videos in the future, and how you can do it now via JavaScript libraries.

In Part 2 of this series, I cover the HTML5 audio element, and in Part 3 you'll learn more about custom controls for HTML5 multimedia elements.

You can read more about HTML5 video and its capabilities in my upcoming book, HTML5 Multimedia: Develop and Design.