When people talk about video files, they’re usually talking about files with an .avi, .mp4, .ogg, .flv, or .mkv extension. These extensions are simply indicators of the container format for the video file itself; they don’t indicate the format in which the video was encoded. When the video includes an audio track, the container file includes both the video and audio components.

Common container formats include Ogg (.ogv), Flash Video (.flv or .f4v), the aforementioned Audio Video Interleave (.avi), MPEG-4 Part 14 (.mp4), Matroska (.mkv), and many others. There is also a new format called WebM, which is an open-source video container format that will likely grow in popularity due in part to its support by Google. WebM is meant to be used exclusively with the VP8 video codec and the Vorbis audio codec (more on codecs in the next section).

When a producer (the person or organization making the audio or video available) encodes multimedia, they choose the format in which to encode the file. The person who views that video or listens to the audio must have the appropriate decoding software installed on their computer to play the file. This decoding software is called a codec.

The word codec is shorthand for compressor/decompressor (or coder/decoder, depending on whom you ask). The codec refers to the style in which the video or audio file was encoded or formatted. To decode a video or audio file means that the computer uses an algorithm to decipher the encoded video or audio into a human-consumable form.

Now throw in the web browser. The browser, such as Internet Explorer, either needs to have built-in support for a format or needs to have a plug-in available to recognize that it can play the audio or video file. Luckily, all of the common formats and codecs today are either supported natively or are readily available in some form of plug-in installer for the popular web browsers. As newer browsers that support HTML5 appear, the use of specific third-party plug-ins—at least for video and audio—will (hopefully) become a thing of the past.

Just as there are numerous container formats, there are also several common video encoding formats. Some of the most popular ones include H.264, VP8, DivX, Theora, and several others. If you plan to do much video work on the web, you’ll likely need to account for several different formats and containers to reach the widest possible audience.

As with video, playing audio through a computer or hand-held mobile devices (such as smartphones) requires a codec to read the file and play it back. Two popular formats are MPEG-4 Audio Layer 3, which you might recognize as MP3, and AAC, which is frequently used by Apple. Vorbis is another audio format, frequently used in an Ogg container.

If all of this sounds complex, it is. Not only is it tough to choose among the multiple formats, but whatever your choice, there’s no guarantee that your visitors will be able to play that format anyway.

So how do you choose which format to use? The answer is that you don’t choose one format; you make the clip available in multiple formats. The tag in your webpage page’s code lists all the alternate versions you are providing and in the order you want the browser to attempt to use them. When the browser renders your page, it selects the first one in that list that it is able to use and ignores the others.

Table 15-1 shows the three most common container file formats, not including Flash. The text in the Container column refers not only to the container type but to the file extension used for the containers.

An easy way of converting your video to these three formats is to use a utility such as the open source VLC Media Player (www.videolan.org/vlc/index.html). You can also use your own favorite video format conversion utility, if you have one. Later in this chapter I’ll show you how to use VLC Media Player to convert a clip.

Now that you have a high-level view of video and audio playback on the web, you might be wondering how you encode your favorite vacation videos into three formats (four if you count Flash). The clips provided for the exercises in this chapter are ready-to-go, but you will need to prepare your own video clips on your own.

Just as playback is complex, so too is encoding. People frequently employ a combination of software to encode and convert videos between formats. Fortunately, there is good free and open-source software for doing so.

In the following exercise, you will use VLC Media Player to encode a video clip in two different container formats, in preparation for making them available on a webpage. If you don’t want to go to the trouble of doing this, it’s okay to skip it; I will provide you with the already-converted files in a later exercise.

In this exercise, you will encode a video clip in .ogv and .webm formats.

At a basic level, the <video> tag looks like this:

<video src="myvideo.mp4"></video>

There are several attributes and different ways to use the <video> tag that make it more configurable for your needs and the needs of your audience. Several attributes are helpful, including:

Not surprisingly, you use the width and height attributes to set the width and the height of the video display area on the page:

<video src="myvideo.mp4" width="320" height="240"></video>

The controls attribute determines whether a default set of playback controls should be visible within the browser. This can be helpful and I recommend using it. In fact, if you don’t use the controls attribute, the visitor has no way to replay the video without reloading the entire page. How annoying! Here’s an example of the controls attribute:

<video src="myvideo.mp4" controls></video>

The preload attribute tells the browser to begin downloading the video immediately when the element is encountered. If the video is the central theme of the page, and it’s likely that all (or most) visitors will want to watch the video, then it’s a good idea to use the preload option. However, if the video element is a small part of the page and visitors aren’t likely to watch it, then preloading the video is just a waste of bandwidth. Here’s the preload attribute in action:

<video src="myvideo.mp4" preload></video>

The loop attribute tells the browser to restart the video immediately when it’s finished playing:

<video src="myvideo.mp4" loop></video>

Finally, the autoplay attribute makes the video automatically play when the page is loaded. For most purposes this is generally a bad idea from a usability and accessibility standpoint. Most users will want control over the video; they’ll play it when their attention is focused and they’re ready to consume the video element. And even with the autoplay attribute enabled, your visitors might have that option disabled in their browsers. For that reason, along with the usability problem, I recommend not using the autoplay attribute with one notable exception: if you don’t include the controls attribute, then you need to include autoplay; otherwise, the video won’t play and visitors will have no way to start it. Here’s an example of the autoplay attribute:

<video src="myvideo.mp4" autoplay></video>

Putting it together, a real-world video element looks like this:

<video src="myvideo.mp4" width="320" height="240" controls></video>

The <video> tag enables more than one source (via the source element) which you can capitalize on by including links to multiple versions of a video. You can also add a type attribute to tell the browser a bit more about the video file to which you’re linking. For example, a <video> tag that includes an .ogg container, an .mp4 container, and a .webm container would look like this:

<video width="320" height="240" controls>
    <source src="myvideo.mp4" type="video/mp4">
    <source src="myvideo.ogg" type="video/ogg">
    <source src="myvideo.webm" type="video/webm">
</video>

With those options you now have Internet Explorer and Safari covered (thanks to the mp4 container); Firefox and Chrome covered (thanks to the Ogg container); and other browsers covered, too (thanks to the WebM container).

But what happens when someone visits your site with an older browser that doesn’t support HTML5, so it can’t use your <video> tag? Older browsers will simply ignore the <video> tag, so its mere presence won’t cause errors. However, you still need to find a way for those visitors to view the video.

You’ll find that most Internet Explorer users also have Flash installed. With that in mind, you can also include a Flash version of the video on your page. You can include an extra element with the help of the <embed> tag. Flash can play H.264 encoded video with AAC audio; therefore, you don’t need to convert your video to yet another format. You can simply refer it to the existing .mp4 container version of your video. Here’s an example:

<video width="320" height="240" controls>
    <source src="myvideo.mp4" type="video/mp4">
    <source src="myvideo.ogg" type="video/ogg">
    <source src="myvideo.webm" type="video/webm">
<embed src="myvideo.mp4" type="application/x-shockwave-flash" width="320"
height="240" allowscriptaccess="always" allowfullscreen="true">
</video>

Note that you place the <embed> tag within the <video> tag. You do that because if any of the sources that appear before it are able to execute, the browser will ignore the <embed> tag. Only if the <video> tag itself is unrecognized will the <embed> tag take effect.

Now that you’ve got a handle on the theory, it’s time to put it into practice with an exercise.

In the following exercise, you will add a video to an HTML page as an embedded clip with the <video> tag and provide an alternative copy as a downloadable link with the <a> tag. You will also practice embedding the clip with the <embed> tag.

You might be thinking that playing audio on a webpage would be easier than video, but for the most part, it’s not. You still need to provide for different browsers and encode your audio into different formats. In addition, for the most part, your visitors will still need special plug-ins to play audio. With that said, the <audio> tag is new to HTML5 and, assuming that the browser manufacturers can come to some type of agreement, playing audio on the web should become easier a few years in the future.

Like the <video> tag, the <audio> tag supports multiple sources. With no common format, you’ll need to encode the audio multiple times to try to get the audio out to the widest possible audience. Also like the <video> tag, the <audio> tag supports attributes such as controls, autoplay, loop, and preload. Therefore, the syntax for the <audio> tag is essentially the same as the syntax for the <video> tag.

If you provide MP3 support and Ogg Vorbis support for audio files on a page, you’ll hit most of the browsers that people viewing your page are likely to be using. You’ll find support for at least one of these two formats in Firefox, Chrome, Safari, Opera, and Internet Explorer. Again, as with video, you should also embed your audio stream into a Flash object so older versions of Internet Explorer can use it, and you might also choose to provide a downloadable copy as a last resort, like we did with the .avi file in the previous exercise.

Here’s an example that shows the <audio> tag with two files, which are called with the help of the <source> element that you saw earlier in the video section of this chapter:

<audio controls>
    <source src="myaudio.mp3"></source>
    <source src="myaudio.ogg"></source>
</audio>

As with video, playing audio in older browsers requires the <embed> tag. When used with audio, you’ll typically use two attributes, src and autostart; src configures the source of the audio and autostart controls whether the audio clip should play automatically upon page load. Adding the <embed> tag to the previous example results in this HTML:

<audio controls>
<source src="myaudio.mp3">
<source src="myaudio.ogg">
<embed src="myaudio.mp3">
</audio>

By default, content included with <embed> will be automatically played. If you don’t want this, then add the autostart=“false” attribute tag, like so:

<embed src="myaudio.mp3" autostart="false">

One other attribute commonly used with <embed> is the loop attribute. The loop attribute, when set to true or infinite, restarts the audio clip when it completes. It can also be set to false to indicate that the audio clip should play only once. However, the default is to play the audio clip only once; therefore, omitting the loop attribute is the same as setting it to false.

Now you get to practice placing an audio clip. In the following exercise, you’ll add an audio file to an HTML5 page.