HTML5 Audio/Video: The Gen-next of the web

It is well known that Flash player has been used widely to view video content over the web. The best example for this is YouTube.com. Other than Flash Player, there are some third party plugins like QuickTime and Real Player which are also good as video publishing solutions on the Internet. Unfortunately, there are no web-standards providing a solution to embed and view video content over the web.

HTML5 defines a standard way to embed video in a web page, using <video> and audio using <audio> element. Even though its still under development, YouTube and Vimeo announced that they have plan to support HTML5 video tag. This will break the barriers of relying on a proprietary plugin for video. In future, there will be no more browser plugins OR any flash dependencies needed.

Currently HTML5 <video> tag works only on the following browsers:

• Google Chrome (3.0 and later)
• Mozilla Firefox (3.5 and later)
• Opera (10.5 and later)
• Safari (3.0 and later)
• Internet Explorer (6, 7, 8 with Google Chrome frame installed)

There are no restrictions on the video codec (e.g. MPEG-4, H.264, Theora), audio codec (e.g. MP3, AAC, Vorbis), or container format (e.g. mp4, ogg, ogv) you use for your video. One <video> element can link to multiple video files, and the browser will select the first video file to play.

The only open source codec supported by major browsers is Theora. It is a free and open video compression format from the Xiph.org Foundation. Theora encoded videos mostly come in Ogg container format.

Firefox, Chrome and Opera support Theora while Safari doesn’t. Another major codec supported is H.264, which is a patented technology with licensors like Apple and Microsoft. This codec is only supported in Safari and Chrome. H.264 videos usually come in MP4 format which provides HD support with smooth playback performance in various devices from desktop to mobile devices, including Apple’s iPhone and mobiles running Google’s Android OS.

Here are some examples to show you how to embed a video using HTML5 <video> tag.

<video src="movie.ogg" controls="controls">
Your browser does not support the <video> element.
</video>

This above example plays an ogg file in browsers supporting ogg format.

<video controls>
<source src="sample_video.ogv" type=”video/ogg; codecs=theora, vorbis">
<source src="sample_video.mp4" type="video/mp4; codecs=avc1.42E01E, mp4a.40.2">
Your browser does not support the <video> element.
</video>

Using <source> element, multiple media files can be included with similar videos encoded in different video formats. These above examples are specified with the corresponding video and audio codecs needed for the media file to play. If the browser doesn’t support ogg format, it’ll try to play the mp4 file.

Publishing videos on Internet through free, open web-standards would be a great thing to happen, while giants like Adobe, Apple and Google are relying on H.264, a proprietary codec which is not supported by Firefox and Opera.

Similarly the <audio> element in HTML5, enables native audio playback within the browser. A simple example to play an audio file is given below. This example will work only in Firefox 3.5 (and later) and Chrome 3 (and later). Safari 4 supports only mp3 and wav files.

<audio src="sample_music.ogg" controls="controls">
Your browser does not support the <audio> element.
</audio>