Adding plugin free audio and video is what is causing a lot of excitement around HTML5.

We basically have two new tags <audio> and <video> that do all the magic (magical caveats to follow).

Make some noise with <audio>

The <audio> tag allows plugin free audio. The source of the audio can be set using the 'src' atttribute of the <audio> tag or can be set using the child <source> tag.

Basic example:

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

Alternatively, use the <source> as follows:

<audio controls>
 <source src="jquerysong.mp3" type="audio/mpeg" />
</audio>

The <audio> tag has the following attributes:

autoplay
Specifies that the audio will start playing as soon as it is ready.
controls
Specifies that controls will be displayed, such as a play button.
loop
Specifies that the audio will start playing again (looping) when it reaches the end
preload
Specifies that the audio will be loaded at page load, and ready to run. Ignored if autoplay is present.
src
Specifies the URL of the audio to play

Magical Caveats

You may or may not have seen the above example work. Two main reasons for that (leaving aside the all important speakers been switched on).

Firstly you need a HTML5 compliant browser.

Secondly, even if you do have a HTML5 compliant browser you need different audio files types for different browsers.

It basically boils down to likes of Opera and Firefox wanting to use open source audio formats whereas Apple and Microsoft are more inclined to use the MP3 format for which they hold licensing powers. Google with Chrome has come down on the open source side of the video fence but at the time of writing (July 2011) stills supports audio with MP3. As such to cover all HTML5 browsers you would need something as follows:

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

Flashless <video>

The syntax of the HTML5's <video> tag is very similar to the <audio> tag.

There is the basic syntax

<video width="320" height="240" controls src="myvid.mp4">
</video>

Warning: In my experiments with <video> Safari did not seem to like using the 'self closing' style of <video width="320" height="240" controls src="myvid.mp4" />. The mark up would fail at that point and not display any more content of the page. Therefore make sure you close your <video> properly with a </video>.

Attributes for the <video> tag are as follows:

autoplay
If present, then the video will start playing as soon as it is ready
controls
If present, controls will be displayed, such as a play button.
height
Sets the height of the video player
loop
If present, the video will start over again, every time it is finished.
poster
The URL of a static starting image for the video
preload
If present, the video will be loaded at page load, and ready to run. Ignored if "autoplay" is present.
src
The URL of the video to play
width
Sets the width of the video player

Then there is the syntax using the child <source> tag.

<video width="320" height="240" controls > 
<source src="myvid.mp4" type="video/mp4">
<source src="myvid.ogv" type="video/ogg">
<source src="myvid.webm" type="video/webm">
</video>

This is again useful because of the different video formats that are supported by different browsers.

Another Apple Warning: iPads with their lack of Flash are one reason to use HTML5. Watch out for some quirks though. On the iPad iOS 3.x, for both <audio> and <video>, only the first <source> listed is recognised. This bug means that you must put your iOS compatible <source> first ie MP3, H.264. This bug is fixed in iOS 4.

The fun to be had here is obviously sorting out which video format are supported by which browsers. Currently (March 2012) the state of play is:

Browser Audio Video
Chrome MPEG3 (mp3)

Ogg Vorbis (ogg)

Wave (wav)

h.264 * Supposed to Be Removing

Ogg Theora (ogg)

WebM (VP8)

Safari(requires Quicktime) MPEG3 (mp3)

Wave (wav)

h.264 (mp4)
Firefox Ogg Vorbis (ogg) Ogg Theora (ogg)

WebM (VP8)

IE9 MPEG3 h.264 (mp4)
Opera

Ogg Vorbis (ogg)

Wave (wav)

Ogg Theora (ogg)

WebM (VP8)

To produce video in different formats a number of tools are available. I would recommend having a look at Firefogg for Firefox.

* For more information on Googles decision to remove H.264 support see http://googlesystem.blogspot.com/2011/01/google-chrome-to-drop-support-for-h264.html

** Update on Google / Firefox and H.264

Flash Fall Back or Indeed HTML5 Fall Back

If the user has a non-HTML5 browser then the inside of the <video> can be used for fallbacks.

<video width="320" height="240" controls > 
<source src="myvid.mp4" type="video/mp4">
<source src="myvid.ogv" type="video/ogg">
<source src="myvid.webm" type="video/webm">
<!-- if none of the above supported then do this -->
<p>Sorry no support for video</p>
</video>

In the above example the message in the <p> could be replaced with the necessary code to embed Flash content. In the example below I have simply just linked through to youtube.

<video width="320" height="240" controls > 
<source src="myvid.mp4" type="video/mp4">
<source src="myvid.ogg" type="video/ogg">
<source src="myvid.webm" type="video/webm">
<!-- if none of the above supported then do this -->
<iframe width="320" height="212" src="http://www.youtube.com/embed/fFJKWpr_2e8" frameborder="0" allowfullscreen></iframe>
</video>

Adobe Flash evangelist Lee Brimelow suggests doing it the other way. ie Use Flash if it is there, and if not offer HTML5.

http://www.gotoandlearn.com/play.php?id=128

Video Test Zone

To keep a track of video support, here are examples of the major players.

H.264 - in this case a mp4

Ogg

WebM

Leave a Comment