Embed Video Audio on HTML5 Page

How to Embed Video/Audio on HTML5 Page

In HTML 4.x, the only way to reliably embed video on a web page so that all users can see it regardless of browser or operating system, is to use Flash. This requires the Adobe Flash plug-in and a combination of the <object>and <embed>tags.

In a long time to come, you may have to provide both HTML5 and Flash to be compatible with all web browsers. But you could learn how to embed video/audio in HTML5 now and when the HTML5 time comes, you can switch to it easily. As the proverb goes: Chance favors only the prepared mind.

This article will take a look at what might be the most-hyped part of the HTML 5 specification - the audio and video tags.

Using HTML5 Video Tag

Famous video sharing sites such as YouTube is chomping at the bit to use the HTML5 video tag. It will greatly seize a chunk of web size. Here's the code to embed a video in HTML 5:

<video src="path-to-html5-video.mp4"></video>

Really simple, right? But you will embed video something like below because not every browser can recognize the <video>tag.

<video src="path-to-html5-video.mp4" controls>

<object width="550" height="400">

<param name="movie" value="path-to-fallback-flash.swf">

<embed src="path-to-fallback-flash.swf" width="550" height="400">

</embed>

</object>

</video>

This method lets the browser choose the video or flash to play, with their default video player. So your video will be played in different style player, maybe the Safari style or Chrome style. Another free option is to use the third-party HTML5 video player like VideoJS, FlareVideo, JW Player, etc. Here VideoJS is recommended for it's free, fullscreen, and consistent style in all HTML5 browsers.

Using HTML5 Audio Tag

The code looks very similar to <video>. However, the Mozilla only supports Ogg Vorbis files, while Safari can handle pretty much anything QuickTime can.

<audio src="path-to-html5-audio.ogg" autoplay>

Sorry, your browser does not support the <audio>element.

</audio>

Similar to the <video>tag, the same Flash solutions would give you near universal support for today's crop of browsers.