Audio and Video with HTML5

HTML5 has entered our lives for good and it is changing the way we are embedding media on our web pages. Two of the new greatest features are the <audio> and <video> elements. No more do we have to resort to Flash to serve videos and audio to our visitors. The new solutions HTML5 has to offer are really tempting but enough with the introductory words. Let’s see what <audio> and <video> do.

<audio>

The tag’s name by itself says it all. With the new <audio> element we can quickly and easily add audio to our webpages. In its simplest form, it works pretty much the same as the <img> element so we just need to use the src attribute to link to our audio file.

<audio src="audio-file.mp3">
</audio>

It is really that simple. We can even add a fallback message or another fallback solution (Flash player) in case the visitor’s browser doesn’t support the new audio element.

<audio src="audio-file.mp3">
	<p>Fallback message - Your browser does not support the audio element.</p>
</audio>

The audio element comes bundled with some nice options. Below, we will see some of them.

autoplay

With difference the most annoying option. Who amongst us hasn’t stumbled upon a web page that started playing music and you were looking for that one tab that had to close? If we want to be that annoying we can use the autoplay option on our audio element. Please use with caution.

<audio src="audio-file.mp3" autoplay>
</audio>

Notice that autoplay is a boolean attribute, so no need to type autoplay=”true”.

loop

Another pretty self-explanatory boolean attribute. The audio file loops for ever.

<audio src="audio-file.mp3" loop>
</audio>

preload

Preload allows the browser to start buffering our audio file without having the visitor hit the play button first. That way, when the visitor hits tha play button, he can enjoy a smooth playback without loading times. Again, we have to be cautious when we use preload because might not want to buffer data that the visitor might not use.

So preload can take three values, “auto”, “none” and “metadata”. We are extremely interested only about the first too though.

<audio src="audio-file.mp3" preload="auto">
</audio>

Keep in mind that Safari by default has the preload to “auto” so if we want to disable it, we have to use preload=”none”.

controls

With the use of controls, we enable the visitor to use the native controls each browser provides for the playback of the audio file. Of course we are able to use our own control buttons with a bit of Javascript but that is a subject for another article.

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

filetypes

Unfortunately, not everything is as easy as it looks. The problem with audio (and video) filetypes is that the HTML5 specs do not restrict the browsers to support certain filetypes so each browser supports his own filetypes and encodings for his own reasons. What we have to do is, look ahead and provide the same audio file in different filetypes and encodings for it to be compatible with each browser that supports the audio element. More on audio filetypes and encodings on the W3Schools HTML5 Audio page.

To add multiple sources we will use the <source> tag.

<audio controls>
 	<source src="audio-file.ogg" type="audio/ogg" />
  	<source src="audio-file.mp3" type="audio/mpeg" />
</audio>

With those two filetypes we have covered all the compatible browsers. Let’s move on to <video> now.

<video>

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

<video controls>
	<source src="video-file.mp4" type="video/mp4"/>
	<source src="video-file.ogv" type="video/ogg"/>
<p>Fallback message - Your browser does not support the video element.</p>
</video>

Again, we have to use multiple sources and different filetypes and encodings of the same video file to support all the compatible browsers. You can read more about filetypes and browser support on the W3Schools HTML5 Video page.

height/width

The autoplay, loop and preload attributes of the audio element work the same way in the video element too. Apart from those, we have some other video specific attributes such as the height and width. They work the same way they do for the img element.

<video controls height="480" width="640">
	<source src="video-file.mp4" type="video/mp4"/>
	<source src="video-file.ogv" type="video/ogg"/>
<p>Fallback message - Your browser does not support the video element.</p>
</video>

poster

When our video is not playing, we can use the poster attribute to link to a thumbnail image to display instead of just displaying the first frame of the video.

<video controls poster="video-thumbnail.jpg">
	<source src="video-file.mp4" type="video/mp4"/>
	<source src="video-file.ogv" type="video/ogg"/>
<p>Fallback message - Your browser does not support the video element.</p>
</video>

fallback

Browser support is good considering this is a new feature but of course there are older browsers that we need to take care of. To do so there is only one good and efficient solution, to use a Flash as a fallback. A great plugin to help with browser support for both the audio and video elements is html5media. Read more about html5media on its GitHub page.

That’s pretty much it. Enjoy using the new audio and video elements with HTML5.