Audio and Video with HTML5

By / Apr 17, 2012 / Tips
shares

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>

Firefox native audio player

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>

Safari and Chrome native audio player with controls

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.

Chrome video player

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>

Firefox native video player with controls and a poster

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.

About the Author

Ilias Iovis is a web and graphics designer & web developer from Thessaloniki, Greece. He is mostly interested in front-end and is constantly learning about HTML5, CSS3 and jQuery. You can find him at iliasiovis.comand follow him on @iliasiovis.

10 Comments

  1. Design Turnpike
    April 17, 2012

    Wow! I love Flash but this looks so easy and intuitive… I am looking forward to learning more about HTML5.

    Reply
  2. Rick
    April 18, 2012

    Loved the simplicity of the code.

    I tried it with the audio and was unable to see the controls. Autoplaying it worked, so it’s there… but no visual reference.

    With the video I experienced similar results. I can hear it if I put the autoplay tag, but cannot see anything.

    What am I missing?

    Thanks!

    Reply
    • Ilias Iovis
      April 19, 2012

      Hi Rick,

      unfortunately, I haven’t run into a similar problem. Even though controls is a boolean attribute and in HTML5 it doesn’t need extra declaration, have you tried typing it as controls=”controls” ???

      No other idea why such an issue came up. Sorry. Hope this helped.

      Reply
  3. Lance
    April 19, 2012

    Hi,

    Just in the middle of doing a mobile audio project – so some of this has come in useful – thanks.

    Like the auto pre-load function – wasn’t aware of that.

    The painful thing about the default setup for audio at the moment, is that on mobile, the default controls are, well to say the least, not as effective as they can be. Therefore you need to skin the controls using JS.

    There are a couple of good sites out there which do tutorials on this, but the unfortunate downside of these – despite getting a good looking mobile page – is file size, as most of them require one of the major frameworks – which whilst light for normal usage on mobile tends to double the download ;-)

    Keep up the good work.

    Reply
  4. SavorWeb
    April 20, 2012

    Very cool. Our custom website designs rarely use audio, but often call for lightweight video players. Will keep these solutions in mind.

    Reply
  5. Kay @ Klangwelt Design
    April 24, 2012

    WOW! This is SO useful to me. Thank you so much for this post!

    Reply
  6. akhil
    April 29, 2012

    Great article.Indeed.Now i got an idea about HTML5! Thanks:-)

    Reply
  7. Smashious
    May 3, 2012

    Great tutorial. Man it’s so easy now with HTML5.

    Reply
  8. assistenza computer
    September 5, 2012

    Trovo molto giusto quanto e stato scritto e approvo in tutti i punti.

    Reply
  9. David Smith
    April 17, 2013

    This all seems so straight forward! Great to see that advances are being made within HTML and that it is being adopted more and more across the web.

    All I have to do now is get myself up to scratch with HTML5 so that I can make use of this great little tip!

    Reply

Leave a Reply