Geek alert: The guest blogger today is Karthik Shyamsunder, a Principal here in VeriSign’s Naming Engineering group. When he’s not designing systems to make sure the Internet addressing system stays up and running safely and reliably, he also teaches graduate courses on Distributed and Enterprise Computing at Johns Hopkins University. We recently got into a discussion on HTML5 and it’s potential impact on video on the web and I asked him to write something on that for this blog. Wide spread adoption of new standards can sometimes take a while, be it a chicken and egg thing, and often cause controversy. Within 24 hours of our discussion YouTube and Vimeo both announced HTLM5 support for their sites (along with said controversy detailed here on www.Beet.tv). So, for those of you that don’t get a kick out of reading code, skip to the last paragraph for the so what (and for those of you that do…no peaking).
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&hl=en_US&fs=1&” /><param name=”allowfullscreen” value=”true” /><embed type=”application/x-shockwave-flash” width=”525″ height=”426″ src=”http://www.youtube.com/v/F2XbFnBiChQ&hl=en_US&fs=1&” 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/]
I find this piece quite informative and have a better appreciation of the use of new HTML 5 tags for embedding videos in web pages. Many of the mobile platforms embedding a different array of browsers
within them reflects a major change from the way video has been supported in the past.
The fact that they couldn’t standardize a codec is a problem in my opinion. Mozilla went with Ogg since it’s open, but Apple goes H.264 since they already pay for the licensing fees with your devices. I don’t know how many companies are going to want to convert their content to Ogg just yet, esp when H.264 beats it in most comparisons. It’s a step in the right direction though. Canvas tag and video are going to be key in getting rid of the Flash abomination.
As I said in my intro to Karthik, standards can be both controversial and take a while. But, the growth of the mobile web really may change the dynamic. Here in the US, we think of ourselves as much more desktop oriented when it comes to the web (with the mobile web relegated to email and quick web hits). But in much of the world that’s not the case…and is changing in the US too. IDC predicts that mobile web users will be over a billion (yes, that’s a “b”) by the end of 2013 worldwide. Gartner has browser equipped enhanced phones at 1.82B in 2013, and PCs at 1.7B.
It promises to be an interesting future.
What are your thoughts?
Thanks for the insight, Professor Karthik Shyamsunder. With the new HTML5, we can reach out to the mobil device users for vedio messages.