SXSW 2010: Fun with HTML5 video

RealAudio and ultimately Real Video was the original, old school audio and video compression used on the Internet during the early Web 1.0 days.  No doubt that Web 2.0’s rise in popularity was caused in part by YouTube and the ability for its users to easily send video up to a server and have it transcoded and streamed on the fly - without the need for expensive programs like the RealMedia server set.

YouTube leveraged the Adobe Flash technology, which in its infancy, would show only cartoon like video, then incorporated codec, or software decoding support for television like motion video.  This has been the standard for video distribution on the Internet, but requires support for software, and only lately has incorporated decoding within hardware.  Notably the iPad and iPhone are two such media devices that do not have flash media decoding support due to a long feud between Apple CEO Steve Jobs and Adobe.  Jobs calls flash a CPU hog, and a claims it would cut battery life on his devices from 10’s of hours to just an hour if it was supported. Instead, he and many others hope to see HTML5 take a rise to prominence.

In this SXSW 2010 session, Christopher Blizzard, director of developer relations with Mozilla, and Michael Dale, lead developer of the MetaVid project and WikiMedia foundation, go in depth on what HTML5 has to offer as it pertains to video on the web.

With HTML5, the next generation of web coding in its “final call” of the proposed standard, I was excited to see what they had in line for video support, a first time for the format.  The presenting duo showed how simple it is to build a CSS formatted page (this is the only way to format HTML5 as older tags like < FONT > have been dropped.)  With this new support they are able to show a video partial or full screen, and also overlay text on top of it or around it.  As this < video > and < audio >

tag are core elements within HTML any or network or API calls can pull in additional web data and even RSS feeds.

Wikipedia is working on a collaborative video system so that different groups around the world can present and edit works to assist in explaining topics within the vast encyclopedia.  Kaltura is the engine behind the Wikipedia media project known as Wikimedia Commons.  One would assume that their use of the HTML5 standard and codecs like OGG are very important in order to not have to pay licensing fees to groups like Adobe, MPEG LA, as Ogg is license and patent free.

In fact, another web development called FireFogg is an extension that creates OGG formatted video files from a source MPEG4 file that cameras typically create.  This is done via the upload process or from the browser extension.  Take a look at www.firefogg.org/make for further details on this.  It should also be known that OGG video has a
lower CPU resource than Flash video so devices like netbooks or the iPhone and iPad should be able to easily play the format.

To create a HTML5 video page, you just add a

< video > tag, < source >

types like OGG or MP4 video, and pointers to their location.  If browsers do not support HTML5 video, traditional flash video can be layered in as a fallback through a failure script.

By default, no controls are displayed, so you can add a controls tag to give a play, pause and volume.  CSS elements can control the style, like centered video or text placed around it.  The video window can even be styled via rounded corners.  Additional elements like a run timer can be placed on the web page around the media, or overlayed on
top of the media.  You can even download special fonts into the CSS framework that can be overlayed on the video.

With the battle royal between Apple and Adobe, and my netbook regularly choking during Flash media playback, I am quite excited about the possibility of a license free standard for media playback within my future browsers.

Dave Mathews @ggdm is an inventor, broadcaster and consultant who has helped such companies as RadioShack, Sling Media and boxee. You can find more of his content at www.davemathews.com.