JUMP START HTML5 (2014)

Chapter 9 Multimedia: The source Element

Up until this chapter, we've discussed using the audio and video elements with a single src attribute. You may have noticed that this only works part of the time, in some browsers, depending on the format of your file. For true, cross-browser multimedia that works across browsers, you'll need to use multiple source elements, and multiple source files.

We'll use video elements for the examples in this chapter, but most of what we'll discuss also applies to the audio element. In order to serve multiple sources, you'll need to have your media available in multiple formats. Refer to Chapter 6 for a couple of ways to do this.

The source Element

The source element lets us specify multiple, alternative media files for a multimedia element. It's not an element that stands on its own; it must be used as the child of an audio or video element. Place your source tags between the start and end tags for the audio or video elements.

</video>

The source tag requires a src attribute whose value is the path and name of a multimedia file. Ideally, when you specify multiple sources, the browser should detect and select the file it is capable of playing. The current reality is slightly messier.

In Chrome, Firefox, and Internet Explorer, the browser will attempt to download the first source file specified. If it can't play that format, it will try the next file specified, and so on, until it finds a file in a format that it's capable of playing.

Both Safari 6 (and older) and Opera 15 do the same, except when the value of preload is none. When preload="none", these browsers will attempt to download the first file, and fail if it proves to be incompatible. To prevent this, either:

1. Set the preload attribute to metadata or auto; or

2. Specify the MIME type using the type attribute.

Safari 7 no longer suffers from this bug.

Format Hinting With the type Attribute

Specifying a MIME type using the type attribute will keep your browser from running a format compatibility check for each source element. It's especially important for browsers in which that process is broken. Rather than executing a download-check-repeat sequence, browsers will use thetype attribute to select the file that it's capable of playing. Let's add type attributes to our <source> elements from above.

</video>

The value of a type attribute must be a valid MIME type that matches the format of the file in question. For MPEG4/H.264 files, that will be video/mp4. For audio MPEG-4 files, use audio/mp4. The MIME type for MP3 files should be audio/mpeg. For Ogg files use video/ogg or audio/ogg. For WebM, the preferred MIME type is video/webm.

You may also want to specify the codec used to encode your media file. Most file formats are actually just containers for a variety of encoding formats. For example, an Ogg audio file may actually be encoded using the Vorbis, FLAC, or Speex codecs. An MPEG-4 file may be Xvid and H.264. Including a codec is optional, but offers more specific information to the browser. To include codecs, add a codec parameter to the value of the type attribute.

<source src="/path/to/video.ogv"

↵type="video/ogg; codecs='theora, vorbis'">

Note that the value of our codecs parameter is enclosed in single quotes. This is because it's part of a value that's wrapped in double quotes. We could also invert our quotes; that is, enclose the entire value of type in single quotes, while using double quotes for the value of our codecsparameter.

Using a codec isn't strictly necessary. It's just as easy to leave it out, particularly if you're not exactly sure what codec your file is using.

Troubleshooting Media Problems

Now perhaps you've done all of this—your paths are correct, your file formats are correct—and your video or audio still doesn't work. A couple of things could be wrong.

Check that your server is sending the correct Content-type response header for the file type. Many servers will send unknown file types with a Content-type: text/html or Content-type: application/octet-stream header. You'll need to add proper header support for each file format to your server or directory configuration file. These header values should be the same as the MIME types we discussed above. Consult the documentation for your server or contact your web hosting support team for more.

If that doesn't work, you may have to re-encode your file. When you do, make sure that you're using a codec that your target browser supports. (Consult the browser's documentation.)

Responsive Video With the media Attribute

The source element can be used to serve files of different formats. But it can also be used to serve different videos based on screen or device features. You can do this with the media attribute.

The media attribute accepts a media query for a value. A media query consists of a CSS media type (such as print, TV, or screen) and a media feature to test against. For a full explanation of media queries and how they work, consult the Media Queries specification from the World Wide Web Consortium. Here, we’ll just take a look at an example using aspect ratios.

Serving Videos With Different Aspect Ratios

One of the media or device features we can test against is the aspect ratio. Media queries allow us to test aspect-ratio and device-aspect-ratio. The former tests the aspect ratio of the document content—typically the document window. The latter tests the aspect ratio of the device screen. Sometimes these are the same. But they're often different. In either case, we can test the condition and serve a different video based on the results.

Here we are serving the same video content using two different files to serve a 1080p video for screens that can accommodate that resolution, and a 720p video for screens that can accommodate that lower resolution.

<source src="/path/to/video.1080p.m4v" type="video/mp4"

↵media="screen and (device-aspect-ratio: 1920/1080)">

<source src="/path/to/video.720p.m4v" type="video/mp4"

↵media="screen and (device-aspect-ratio: 1280/720)">

<source src="/path/to/video.1080p.webm" type="video/webm"

↵media="screen and (device-aspect-ratio: 1920/1080)">

<source src="/path/to/video.720p.webm" type="video/webm"

↵media="screen and (device-aspect-ratio: 1280/720)">

</video>

In this case, the browser will only download a supported video file only if the user has an HD-compatible device. It's also worth mentioning that the media attribute only applies to the source element. Adding it to your video or audio tag won't work.

There's far more to responsive web design and media queries, of course. Check out SitePoint's Jump Start Responsive Web Design for an introduction.

So Far We've Learned

So far we've covered the HTML5 audio and video elements and attributes. We've also talked about how to serve cross-browser video, and how to troubleshoot. Next, we'll take a look at captioning web video with the track element.