This chapter is from the book
This chapter is from the book
This chapter is from the book
Media Elements
When HTML was originally designed, it was concerned with mostly textual links. Native display of images would come much later. It is not hard to understand why you would need a plugin or browser extension to play audio or video. In most cases, this meant Flash. HTML5 has tried to address that issue with the inclusion of the audio and video tags.
The audio and video tags allow us to play media in the browser natively. Also, a group of properties can be set to control playback. Here is the most basic HTML form for embedded media (in this case, an audio file):
<audio src="song.mp3" autoplay />
This creates an audio HTML element, assigns the source to song.mp3, and instructs the page to "autoplay" the content. It is equivalent to the following JavaScript code:
var song = new Audio(); song.src = "song.mp3"; song.autoplay = true; song.load();
Controlling Media
In addition to the autoplay attribute listed in the previous example, several other attributes can be used to control our media. For example,
<video src="vid.avi" controls />
or
var vid = new Video(); vid.src = "vid.avi"; vid.controls = true;
tells the browser to provide a default set of controls for starting and pausing playback, setting the volume level, and seeking in the stream. In the absence of such a property, the developer can provide a custom set of controls using the JavaScript functions and properties listed in Tables 1-5 and 1-6.
Table 1-5. Media Tag Functions
|
Function Name |
Description |
|
play() |
Starts playing the media from the current position and sets the paused property to false |
|
pause() |
Halts playing the media and sets the paused property to true |
|
load() |
Resets the element and applies any settings, such as pre-fetching |
Table 1-6. Media Element Properties
|
Property Name |
Accepted Values |
Description |
|
currentTime |
integer |
Sets the position in the media stream for playback |
|
duration |
N/A (read-only) |
Indicates the length of the source media in seconds |
|
loop |
true or false |
Specifies whether or not to play the media from the beginning when the end of the stream is reached |
|
autoplay |
true or false |
Specifies whether or not to play the media as soon as possible |
|
muted |
true or false |
Specifies whether or not to set the volume at 0.0 |
The list of properties has been truncated for brevity and usefulness. To see a full list of available properties, check out the HTML5 draft spec at http://dev.w3.org/html5/spec.
Handling Unsupported Formats
At the time of this writing, the audio and video elements in different browsers don't necessarily all support the same types of audio and video. The reason a particular browser doesn't support a particular format might be due to the age of the format, competition with an endorsed format, or patent restrictions that the browser's parent company doesn't want to deal with. Media tags have several methods to deal with this.
Listing Multiple Sources
Instead of specifying a single source, the developer can choose to list multiple sources to let the browser choose the appropriate one to use. The following snippet lists two sources for a video tag and the fallback message if neither format is supported or the browser doesn't support the video tag.
<video>
<source src="video.ogv" />
<source src="video.avi" />
<!—Neither is supported, can show message or fallback to Flash—>
<div><span>Use a modern browser</span></div>
</video>
Although listing multiple sources is an option for a static page, it's not great for applications with dynamic content. For those instances, using the tool Modernizr is recommended. We'll discuss Modernizr in more detail in Chapter 2, but consider this a primer.
Using Modernizr
Modernizr (www.modernizr.com) inspects browser capabilities at runtime and injects the properties into a JavaScript object. To see whether the browser can play audio or video, we would check the value of Modernizr.audio or Modernizr.video to see if it evaluates to true.
Checking support for a particular format is slightly different. Verifying support for MP3 files is done by checking the value of Modernizr.audio.mp3, but the value returned isn't true or false. The HTML5 spec states that the browser should return its confidence level that it can play the format. The return value will be "probably," "maybe," or an empty string. When we use Modernizr.audio.mp3 in a conditional clause, any non-empty value is treated as true and the empty string is treated as false.