Introducing built-in media elements

HTML5 introduced new media elements such as <audio> and <video>, which can be considered as a new revolution in media types after images in the earlier versions of HTML. These two elements make it very easy to embed media in your HTML page/document and provide built-in media support via the HTML5 Media element API. According to the latest specs by W3C, we can define <video> and <audio> as follows:

• The <video> tag is a media element used for playing videos or movies and audio files with captions

• The <audio> tag is a media element whose media data is audio, that is, a sound or an audio stream

The <audio> and <video> elements play audio and video files respectively. The only difference between them is that the <audio> element does not have a playback area for visual content, contrary to the <video> element.

Prior to HTML5, we needed a plugin in order to play an audio or a video file, and that required writing a large chunk of markup. Without HTML5, embedding media elements was never so easy; just by putting an <audio> tag resulting in two lines of code you can get a media player with playback controls. It is almost the same as the <img /> tag before. Refer to the following code:

<audio src="audio.mp3" controls>
</audio>

The previous example results in a media player that will look like the following screenshot on Internet Explorer 9 (IE9), and might differ from one browser to another:

The previous code shows the <audio> tag in its simplest form, but the <audio> tag has more attributes and options. Refer to the following code:

<audio controls autoplay loop>
  <p>Your browser does not support the audio element. Click <a href="content/Elsie.mp3"> here </a> to download the file instead.
  </p>
  <source src="audio.mp3" type="audio/mp3" />
  <source src="audio.ogg" type="audio/ogg" />
</audio>

First, notice the content wrapped in a <p> tag inside the <audio> element. This content is a fallback text and will only be used if the browser doesn't support the <audio> tag. It provides a graceful fallback for older web browsers by informing the user about this issue, and we can add a link to allow the download of this audio file instead. This way, the user will not just stand there wondering what has happened. This is the simplest way to fallback; you can use JavaScript for the same purpose too.

The preceding code snippet also shows some of the attributes for the <audio> element. According to the W3C specification, src, controls, autoplay, loop, preload, mediagroup, and muted are common attributes to both the media elements, namely <audio> and <video>.

• The controls attribute displays the standard HTML5 controls for the audio on the webpage, and the design of the controls varies between browser agents.

• The autoplay attribute plays the audio file automatically as soon as the DOM finishes loading.

• The loop attribute enables repetition automatically.

• The mediagroup attribute links multiple media elements together using a media controller.

• The muted attribute sets a default state of the audio file to mute.

• The preload attribute provides a hint to the user agent about what the author thinks will lead to the best user experience. Its values can be none, metadata, or auto.

  • none: This value hints to the browser that the web page doesn't expect users to need the media resource.

  • metadata: This value hints to the browser to fetch the resource metadata (dimensions, track list, duration, and so on).

  • auto: This value hints to the browser to put the user's needs first without any risk to the server. An empty value, as in just adding the attribute preload, maps to the auto value.

You can specify a value for the attributes as in controls="controls", which would have the same behavior. But for simplicity and less code, you can simply leave out the value for this attribute; the same can be applied for loop, autoplay, and muted. You can specify the media resource by either using the src attribute or the <source> elements.

Note

The attribute overrides the elements.

The media resource (audio or video) has a MIME type and additionally a codec as in the following code:

<source src="video.ogv" type="video/ogg; codecs="theora, vorbis" />

Setting the value for the type attribute has to be done within the <source> element. The browser/user agent will avoid downloading the resource if it does not support its type. You can add multiple formats of your audio/video in order to ensure playback support across different browsers. The browser agent will go over the <source> elements; if it cannot render the first type, it will skip to the next <source> to validate its type, and so on. For this purpose, you will have to check the list of MIME types supported by the <audio> and <video> elements in different browsers. The browser not only checks for the MIME types but also for the specified codec. So, even if the browser agent can render the resource type, the video/audio will not load if the codec is not supported.

The following table lists the support for the 3 main video formats across the major browsers:

Format	IE9+	Chrome	Firefox	Opera	Safari
WebM (VP8 CODEC)	Yes	Yes	Yes	Yes	No
MP4 (H.264 CODEC)	Yes	Yes	No	No	Yes
OGV (OGG THEORA CODEC)	No	Yes	Yes	Yes	No

From the listing in the previous table, we can conclude that providing a media resource with both WebM and MP4 formats in your HTML5 video will guarantee it to load in the latest versions of all major browsers. This theory is reinforced in Visual Studio 2012, which offers full Intellisense support for HTML5 tags. When you insert the following snippet for an HTML5 <video> element, it lists 3 <source> elements within the <video> tag:

<video controls="controls">
  <source src="file.mp4" type="video/mp4" />
  <source src="file.webm" type="video/webm" />
  <source src="file.ogv" type="video/ogg" />
</video>

The <video> element also includes a poster attribute, which is used to specify a path for an image to be displayed in the visual content area when no video data is available or until the user clicks on the play button. For advertising purposes, you can use an image or a frame from the video that gives the user an idea of what the video is like. If you do not specify a poster image and if the autoplay attribute is not set, the browser may just display a black box filling the dimensions of the <video> element. For example, the following code shows the difference between code samples for two similar videos, with a poster specified for the second video:

<video id="video" controls width="400">
  <source src="http://ie.microsoft.com/testdrive/Videos/BehindIE9AllAroundFast/video.mp4" type="video/mp4" />
</video>
<video id="videoWithPoster" controls width="400" poster="http://msdn.microsoft.com/br211386.5_GetStarted_484x272px.jpg">
  <source src="http://ie.microsoft.com/testdrive/Videos/BehindIE9AllAroundFast/video.mp4" type="video/mp4" />
</video>

The output of this markup will produce the following on the screen:

You might have noticed that we specified a width value of 400 for the two videos in the previous example. The <video> element accepts standard HTML width and height attributes. If there is no value set for width and height, the visual content area stretches to the native size of video. It is recommended to set the width and height attributes on the <video> element, thus avoiding stretching to full size, and to encode the video at the desired viewing dimensions.

Note

The values for the width and height attributes do not accept units. The value indicates CSS pixels, for example, width=400 is the same as width=400px.

There are JavaScript methods, properties, and DOM events that are part of the HTML5 standard that is associated with these new elements. You can read and set properties programmatically, such as the src path and the dimensions (width and height) of the <video> tag. You can use JavaScript methods to load the audio and video, and then play and pause the media resource. You can also write code to handle different DOM events raised by media elements, such as onplaying, onprogress (load progress), onplay, and onpause. For example, you disable the default controls displayed by the element by removing the controls attribute and by calling the functions that play and pause the media resource from separate buttons.

The following code listing shows how we can play and pause the video using JavaScript. We first need to detect the current state of the video file by calling the Boolean property .paused, and if true, we then call the methods play() or pause() accordingly:

var testVideo = document.getElementById('myVideo');
if (testVideo.paused)
  testVideo.play();
else
  testVideo.pause();

In the preceding code, we declare a variable testVideo and assign it to the myVideo element from DOM. Assuming that the element was assigned an ID, you can use the name, tag name, or the element's place in the DOM hierarchy to retrieve the elements.

Advanced media with JavaScript

The media elements have a rich API to access with pure JavaScript. Using JavaScript, we can add a lot of functionality to the media elements. You can manipulate the media resource, style it, rotate a video, play two and more media elements in sync, display a progress bar while the media resource loads, resize a video dynamically, and so on.

The following is the code sample that adds functionality to the timeupdate event, which fetches the current play time of the video in seconds and displays it in a separate div.

The following is the HTML code:

<div id="tInfo"></div>
<video id="myVideo" autoplay controls>
  <source src="w8.mp4" type="video/mp4" />
</video>

The following is the JavaScript code:

var video = document.getElementsById('myVideo');
var tInfo = document.getElementById('tInfo');
video.addEventListener('timeupdate',function(event){
tInfo.innerHTML = parseInt(video.currentTime);
}, false);

The JavaScript addEventListener method is used to provide a handler for the timeupdate event. It takes three parameters and has the basic syntax, which is as follows:

WinJS.Application.addEventListener(type, listener, capture);

The type parameter specifies the type of event to register, while listener is the event handler function to associate with the event, and the third parameter capture is a Boolean value that specifies whether the event handler is registered for the capturing phase or not.

In addition, you can combine the capabilities of the <video> element with a canvas, allowing you to manipulate video data in real time and add a variety of visual effects.