HTML5 , Videos and OGG

HTML 5 web pageWhy HTML5?  Haven't we had a stable version of HTML for the last decade?  Well, we did, but like all technologies, we need to supply and demand based on the changing landscape of the future in Web computing.  HTML5 is the next standard for Hyper Text Markup Language and it is supposed to be more robust than its predecessor, HTML 4.01.


This article focuses on HTML5's new method of embedding video and audio in your Web page.  As we know, there are so many video formats floating on the Web.  Many video servers have made it easy for bloggers and website writers to embed their videos on their own websites, through code snippets available for copying and pasting directly into their HTML documents.

Have you taken a look at the variety of ways of embedding these videos?  Well, I find the most complicated method comes from Adobe Flash and Flash videos.  It's not only a Web programmer's nigthmare, it is also a Web user's nightmare in keeping up with the various video plugins out there.  How many times in your Web surfing experience have you encountered the need to update your plugin from Flash, or Quicktime or Windows Media Player?   Probably more than a dozen times.

Well, HTML5's <video> tag is supposed to resolve this issue.  Why do we need a <video> tag when we also have an <embed> tag within HTML5?   HTML5 tries to be backwards compatible as much as it can, although many of the HTML4 tags have been deprecated and will no longer be supported.  HTML5 has required web programmers who use the <video> tag to supply the user with one easy and simple video container format called Ogg.

So, what is OGG?  Ogg has been around for a while, however, its acceptance into the multimedia community has not been very positive.  Today,  Ogg is widely used in Wikipedia and its sister websites as its standard video and audio format.   Ogg is a free, open standard container format maintained by the Foundation.

The Ogg media format is starting to get popular.  There is a free "any" format video converter available that you can download to convert your videos to Ogg.

At the time of writing, many popular browsers including Firefox  and Chrome  have embraced HTML5 and these media tags.  Safari provides minimal support for these tags, currently not displaying the video properly even though you can see the controls.  Note that Microsoft's Internet Explorer and Opera are behind in supporting these tags.

Let's take a look at the how Web programmers will use the <video> and <audio> tags.

The <video> and <audio> tags support these media attributes including:

  • src, url path to find the video
  • controls, allows user navigation of the video
  • autobuffer, allows buffering of the video prior to playing it
  • autoplay, allows video to play upon loading
  • loop, allows replay of video automatically

However, the <video> tag also supports these additional attributes:

  • width and height, dimensions of the video
  • poster, allows for an inserted thumbnail image, if avaialable

This will hopefully simplify multimedia Web programming for HTML5.  There are currently HTML5-based websites and webpages.  Take a look at what our budding HTML5 junior programmers have showcased.  If these elementary aged students can do it, so can you!


0 #1 muon 2010-01-17 10:12
Safari only supports H.264 in the tag, not OGG