Last time i provided you with some information regarding the canvas element of HTML5 and also provided some nice ways of using it. HTML5 is changing the way we handle and experience websites in a number of other ways as well, which also includes the way we are embedding media on our web pages. If you ask me, the two of the most fascinating new features of HTML5 are its <audio> and <video> elements. These two elements will revolutionize the user experience on the web as more and more websites will be using audio and video content to get the attention of their users. Here is a brief description of both the elements.

<audio>

The new <audio> element provides the webmasters with a easy way to add audio to their webpages. If i become its marketing representative the biggest selling point of <audio> element for me will be its simplicity and just how quickly one can add the audio content through it. It can be as simple as adding a <img> element as all you will be required is to use the src attribute to link to your file.

<audio src=”abc.mp3″>

</audio>

Simple is’nt it? For the browsers that still do not support <audio> element  you can add a fall back solution like a Flash Player or a fall back message.

<audio src”abc.mp3″>

<p> Fallback message – Your browser does not support the audio element. </p>

</audio>

Here are a few of the options that the audio element comes with.

preload

This nice little option allows the browser to start buffering the audio file without the visitor hitting the play button. What it does is that the visitor can enjoy the smooth playback without loading times. But you have to be a little cautious about using this option as you might not want to buffer data that the vistor might never use.

Three values can be associated with the preload option, these are “auto”, “none” and “metadata”.

<audio src=”abc.mp3″ preload=”auto”>

</audio>

If you are not in a mood to preload your audio file then you might want to set it to none as browsers like safari sets the default value of preload to auto.

autoplay

Have you ever went on a web page that started playing music as soon as you are on it and then you have to find the tab that will close it? Well if you want to include this annoying into your web page then autoplay can achieve that for you.

<audio src=”abc.mp3″ autoplay>

</audio>

controls

You can use your own control buttons with the help of some Javascript but with the use of controls you can enable the visitor to use the native controls that their browser provides for the playback of an audio file.

<audio src=”abc.mp3″ controls>

</audio>

Notice that both controls and autoplay are Boolean attributes so need for controls=”true” or autoplay=”true”.

loop

This Boolean attribute makes the audio file loop forever.

<audio src=”abc.mp3″ loop>

</audio>

filetypes

The only real issue that one can face while using both the <audio> and <video> elements is that each of the browsers support its own filetypes and encoding for the reasons that are beyond me. So what a developer has to do is plan ahead and provide the same audio file in different filetypes and encodings so that it stays compatiable with all the browsers.

For adding multiple sources you will have to use the <source> tag.

<audio controls>

           <source src=”abc.ogg” type=”audio/ogg” />

           <source src=”abc.mp3″ type=”audio/mp3″ />

</audio>

<video>

<video> element has the same syntax as the <audio> element.

As with the <audio> element, the syntax is the same with the <video> element.

<video controls>

           <source src=”abc.ogv” type=”video/ogv” />

           <source src=”abc.mp4″ type=”video/mp4″ />

</video>

Again, as is the case with <audio> element you will have to use multiple sources and filetypes of the same video file to support all the compatible browser.

height/width

The attributes like autoplay, loop and preload work the same way for both audio and video elements. There are a few attributes that are specific to the video elements, height and width being one of them. They work as the same way as they do for the img element.

     <video controls height=”360″ width=”580″>             <source src=”abc.ogv” type=”video/ogv” />

           <source src=”abc.mp4″ type=”video/mp4″ />

</video>

poster

You can use poster attribute to link to a thumbnail to display it when the video is not plying instead of just displaying the first frame of the video.

<video controls poster=”abc-thumbnail.jpg>

           <source src=”abc.ogv” type=”video/ogv” />

           <source src=”abc.mp4″ type=”video/mp4″ />

</video>

I hope you will enjoy your using these two elements as they have made embedding multimedia into the web pages a far more easier task than ever before.