HTML5 - Part 3

Go back to HTML5 - Part 2

Fresh multimedia options

The methods by which to add multimedia files to web pages have changed a bit over the years since HTML was born. And because there hasn’t been a clear-cut method for including multimedia that was supported
uniformly by browsers, this has been a source of frustration for many web developers. 

But with HTML5, we have five elements specifically designated to handle all sorts of multimedia, and to allow the browser to display those files natively.

The audio and video elements

The new audio and video elements enable us to insert audio and video files as easy as we insert image files. Much like the img element, the audio and video elements use the src attribute to identify the actual source of the media being embedded.

<audio src=”audio-speech.mp3” controls preload></audio>
<video src=”video-speech.mp4” controls preload></video>

The other two attributes, controls and preload, indicate that the controls (play, stop, etc.) should be visible by default and that the file should be preloaded even before the user presses play.

You can use additional attributes to further customize the media files.

The source element

In addition to identifying the source of an audio or video file using the src attribute, HTML5 also gives us the ability to embed multiple related sources. For example, because the various browsers each support different types of audio and video files, it is often necessary to embed several different files at once. The new source element is used to accomplish this, with the help of the src and type attributes.

<audio controls preload>
  <source src=”audio-speech.aac” type=”audio/mp4”>
  <source src=”audio-speech.wav” type=”audio/wav”>
</audio>

The type attribute is particularly important because it tells the browser what type of file is referenced in the src attribute. This allows the browser to decide which file to play without having to actually load all of the source files. Why is that necessary? Because even though we finally have clear elements for embedding audio and video with HTML5, the actual encoding methods used to save those files are yet to be standardized. That lack of standardization leads to us sometimes needing to reference a few different media files to ensure the widest possible audience will be able to access the file.

Notes : We’re just touching the tip of the iceberg with these new media elements. Check out http://diveintohtml5.info/video.html to learn a whole lot more.

The track element

Now that HTML5 has streamlined the process of adding audio and video to web pages, we can focus more on making those media files as user-friendly as possible. The track element is a great step in that direction.

These tracks are text-based explanations of the media content, to make it accessible to users who aren’t able to see or hear the content in the traditional sense. Let’s take a look at how the HTML5 code looks:

<video src=”video-speech.mp4”>
  <track kind=”subtitles” src=”subtitles-english.vtt” srclang=”en” default label=”English subtitles”>
  </track>
</video>

In this example, we used the track element to specify English subtitles for our video-speech file. If we had subtitles available in other languages, we could simply add multiple instances of the track element to reference those additional subtitles. The attributes for the track element are outlined below.

Web Video Text Tracks

When using the new track element, you also need one other little bit of information... the actual text content. (Of course!) Web Video Text Tracks, also called WebVTT, are the new standard for just this purpose. A text track includes the text description of the content along with a series of cues to identify when each bit of text should be displayed.

WEBVTT
00:00:00.000 --> 00:00:05.000
Welcome to the fifth annual trade
convention.
00:00:05.000 --> 00:00:15.000

Please join me in welcoming Dr. William Barker to give our keynote presentation.
The actual format of the time cues are pretty important. In order for the cues to be properly interpreted by the browser, they must use this format: hours:minutes:seconds.milliseconds.

For more about writing web video text tracks, refer to the W3C’s guidelines here:
http://dev.w3.org/html5/webvtt.

Now that you understand the use of the track element, it’s important to discuss its browser support. As of
this writing, only Chrome 18 can properly handle this new element, and that’s only after the track element has been enabled by the user from the chrome://flags options page. What this means is that text tracks are
exciting up and coming options for web media, but they aren’t quite ready for prime-time yet.

Read Next - HTML5 - Part 4