HTML5 Series: 5 - Multimedia (Audio and Video)

A major advantage of HTML5 is the support for multimedia. With HTML5, we don't need to install any external plugin to play audio or video.

Audio:

- No plugin required (Even with plugin, not all browser support same plugin)

- Audio formats: Ogg, Mp3, Wav

Example:

<audio id='audio-clip' controls="controls">

<source src="music.ogv" type="audio/ogg" />

<source src="song.mp3" type="audio/mp3" />

Your browser does not support the audio element.

</audio>

More than one source can be provided so that if browser doesn't support first format then it can play the other audio format. If all are not supported then it will display the not supported message.

Attributes: autoplay (play start as soon as page loads), controls (play control tool bar), loop (repeat play), preload (load along with page load), src (source of audio)

Media Events (Audio+Video): abort, canplay, ended, error, loadeddata, loadstart, pause, play, progress, ratechange, seeked, seeking, suspend, volumechange, waiting

Audio elements can be access in java script:

<script type="text/javascript">

function MuteUnMuteAudio() {

var audioClip = document.getElementById('audio-clip');

audioClip.muted = audioClip.muted ? false : true; //To mute the audio

}

script>

Video:

- No plugin required

- Video Formats

Ogg : Ogg files with Theora video codec and Vorbis audio codec

MPEG4 : MPEG 4 files with H.264 video codec and AAC audio codec

WebM : WebM files with VP8 video codec and Vorbis audio codec

Example:

<video width="300" autoplay loop height="200" controls="controls">

<source src="afunnyCats.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />

<source src="chrome.ogv" type="video/ogg" />

Your browser does not support the <video> element.

</video>

Attributes: audio, autoplay, controls, loop, poster (Image for video), preload, src

Video Support: Firefox 3.5+, Opera 10.5+,Chrome 6.0+, IE 9+, Safari 3.0+, IPhone 1.0+, Android 2.0+

Video codec support in browsers:

In next post i will discuss some more interesting features of HTML5 such as canvas, svg, file api, web storage, geo-location, web worker. Thanks.