Anyone who has visited YouTube knows that you can embed video in a web page. But prior to HTML5, there was no standard based way to embed video in your web page. Almost all the videos you have watched on the web have been enabled through a third party plugin – say RealPlayer, QuickTime, or Flash. This current way of embedding video in the HTML page is complicated. Moreover, if you go to a platform that does not support the plug-in, you are out of luck.

In 2010, close to 20 years since the invention of the web, I say that video should be part of the browser. Multimedia is obviously on the rise and is here to stay and should be an integral part of the web platform. That’s exactly what is happening with the new HTML5 recommendation.

A primer on how we embed video now
In order to get an appreciation of the new HTML 5 <video> tag, it is probably worthwhile to understand how people embed video now (prior to HTML5). Netscape in its glory days created the <embed> tag for embedding any kind of plugin including Java applets, Flash, video and audio player plugins in web pages. Initially this tag was used to embed audio and video besides others. But this tag was not accepted as part of HTML specification. The W3C instead standardized on using the <object> tag to embed any kind of plugins. The <object> tag has since been a powerful way to embed any plugin including Flash. So most of the video including advertisements on the web and of course YouTube use the <object> tag to embed video in web pages. Here is an example of using the object tag to embed video in a web page:

<object classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″ width=”525″ height=”426″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0″><param value=”always” /><param name=”src” value=”http://www.youtube.com/v/F2XbFnBiChQ&amp;hl=en_US&amp;fs=1&amp;” /><param name=”allowfullscreen” value=”true” /><embed type=”application/x-shockwave-flash” width=”525″ height=”426″ src=”http://www.youtube.com/v/F2XbFnBiChQ&amp;hl=en_US&amp;fs=1&amp;” allowfullscreen=”true”></embed></object>

The above is the most popular Flash embed method and is the default choice when publishing your Flash movie. You may also note that the object tag encloses an <embed> tag with almost the same attributes as a fallback mechanism.

What is the new HTML 5 way?
HTML5 is the latest revision to the previous HTML 4.01 recommendation which was released in 2009. The editors of HTML5 are Ian Hickson of Google and David Hyatt of Apple, both of whom are leading the way on a whole range of new features. But what’s cool in HTML 5 is the new <video> tag that really works similar to the <image> tag. You don’t have to have the complicated <object> and <embed> tags, instead use the <video> tag. So let’s look at an example of what it would take to embed video in HTML5. It’s as simple as using the <video> tag with src attribute and it looks like this:

<video src=”http://example.com/MyMovie.ogg”>

What’s really interesting is that the different browsers that support <video> tag support different codecs. So at this time, you can drop in the ogg version or the H.264 version and so you just drop in the two different source files and the browser picks the best one. Here is an example:

<video controls>
<source src=”http://example.com/myMovie.ogg”>
<source src=”http://example.com/myMovie.mp4″>
Your browser does not support the video element.
</video>

What is the big deal?
You may be wondering…so what…we used to embed video before using <object> tag and now we can use the <video> tag. Well, don’t forget the difference is the exponentially growing mobile platform. If you recall in an earlier paragraph I mentioned that if you go to a platform that does not not support the plug-in, you are out of luck. The reality is many mobile platforms can’t support video because the plug-in is not available. But, this is changing. With many of the mobile platforms embedding Firefox, Safari, Opera or Chrome browsers within them and with HTML5 video support on the rise, these mobile platforms will be able to support video natively just like the desktop. And this is game changing.

[Photo via http://www.flickr.com/photos/justinsomnia/]