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