Making Sense of HTML5

Multimedia elements

HTML5 offers two new markup elements that developers can use to play audio and video files from within webpages without resorting to external plug-ins such as Flash and Silverlight. The entire infrastructure to play audio and video (including graphical feedback to users) now is provided natively by the browser.

The audio element

To embed audio content into HTML documents, you use the <audio> element. The syntax is trivial, as the example below shows:

<audio src="/hello.mp3">
   <p>Your browser does not support the audio element.</p>
</audio>

Optionally, you can incorporate some markup in the body of the <audio> element to be used in case the browser can’t deal successfully with the <audio> element. Next, you’ll explore a bit more about how to embed audio in HTML5 pages.

Using the <audio> element

The <audio> element supports a variety of attributes, as listed in Table 2-2. Of these, the most important is src, which you use to point to the location of the actual audio stream.

Table 2-2 Attributes of the <audio> element

Attribute	Description
autoplay	Indicates that the audio will start playing as soon as the content is available to the browser.
controls	Instructs the browser to display audio controls, such as the play and pause buttons.
loop	Indicates that the audio will automatically restart after it is finished.
preload Note that the preload attribute is ignored if the autoplay attribute is also present.	Instructs the browser on how to load the audio content when the page loads. Allowed values are none, meaning that no content should be preloaded; auto, meaning that the entire content should be downloaded when the page loads; and metadata, meaning that only content metadata should be preloaded on page display.
src	Indicates the URL of the audio file, whether local or remote.

So far, I have referred to audio content in a rather generic way, without mentioning specific audio formats such as MP3 or WAV. This is a major problem with HTML5-compliant browsers: Not all browsers support the same set of audio formats by default (without resorting to external components).

The problem of codecs

An audio file is a sequence of bytes that codec software decodes for playing. An audio file, therefore, can be encoded in a variety of formats, each requiring an ad hoc codec—MP3, WAV, OGG, and more. More often than not, a codec is a piece of software that implements patented algorithms, so embedding a codec directly in the browser may pose copyright issues.

The current HTML5 standard doesn’t make an official ruling about codecs, so deciding on the format to support will remain up to the browser vendors for now.

From a developer’s perspective, this is not great news. Different browsers support different audio formats, leaving developers with the problem of working out the most effective way to play audio from the same page on different browsers.

Supported codecs

The simplest way of approaching the problem of multiple codecs is to provide multiple files so the browser can choose the most appropriate for its capabilities. In other words, instead of linking the <audio> element to just one audio file and codec, you link it to multiple sources. You no longer use the src attribute; instead, you resort to a set of <source> elements inside the <audio> element. Here’s an example of playing an audio file using <source> elements:

<audio controls autoplay>
      <source src="hello.ogg" type="audio/ogg" />
      <source src="hello.mp3" type="audio/mp3" />
      <p>Your browser does not support the audio element.</p>
</audio>

The <source> elements link to different audio files. The browser will use the first format it knows how to support. While simple to implement, this approach is not free of issues—in the sense that it requires you to have each audio file available converted into multiple formats and stored on the server in multiple copies.

A basic guideline is that the OGG format is not subject to software patents. OGG will work in Firefox, Opera, and Chrome. To target Safari and Internet Explorer, you need to use MP3 encoding instead.

The video element

To embed video content into HTML documents, you use the <video> element. The syntax is just as trivial as what you have seen for the <audio> element:

<video src="/hello.mp4">
   <p>Your browser does not support the video element.</p>
</video>

Similarly, you can optionally incorporate some markup in the body of the <video> element to be used in case the browser can’t deal with video successfully.

Using the <video> element

Table 2-3 presents the list of attributes you can use to customize the aspect and behavior of the <video> element in HTML5-compliant browsers.

Table 2-3 Attributes of the <video> element

Attribute	Description
autoplay	Indicates that the video will start playing as soon as the content is available to the browser.
controls	Instructs the browser to display video controls such as the play and pause buttons.
height	Indicates the desired height of the video player in the HTML document.
loop	Indicates that the video will automatically restart after it is finished.
muted	Indicates that the video sound should be muted off.
poster	Instructs the browser to display a specified image while the video content is downloading, or until the user chooses to play the video.
preload Note that the preload attribute is ignored if the autoplay attribute is also present.	Instructs the browser on how to load the video content when the page loads. Allowed values are none, meaning that no content should be preloaded; auto, meaning that the entire content should be downloaded when the page loads; and metadata, meaning that only content metadata should be preloaded on page display.
src	Indicates the URL of the video file to play, whether local or remote.
width	Indicates the desired width of the video player in the HTML document.

It is highly recommended that you always set both width and height in a <video> element. This helps the browser to reserve enough space while rendering the page. In addition, you should always set width and height to the real size of the video clip you plan to incorporate. If you downsize the video player, you force the browser to do even more work. Keep in mind that downsizing a video won’t save the user any download time. If you have a video that is too large for the page, you should resize it with an ad hoc program first, and then link it using its new size.

Figure 2-11 shows how Internet Explorer 10 renders a video element.

Supported codecs

When it comes to codecs, video suffers from the same issues that audio does. Therefore, it requires the same workaround.

You should not use the src attribute unless you are well aware of the concrete risk that the video may not be playable on some browsers. To gain the widest support from HTML5-compliant browsers, you should use the <source> element. Here’s the rewritten content of the sample video.html file:

<video controls width="320" height="240">
      <source src="/sample.ogg" type="video/ogg" />
      <source src="/sample.mp4" type="video/mp4" />
      <p>Your browser does not support the video element.</p>
</video>

Just as for audio, the <source> elements link to different video clips and the browser will use the first format it knows how to support. As a guideline, you should plan to have an MP4-encoded video for Internet Explorer and Safari, and OGG for all other browsers.