Bluish Coder

Programming Languages, Martials Arts and Computers. The Weblog of Chris Double.


Support for HTML Video element in Firefox

The WHATWG HTML 5 working draft has a specification for a 'video' element.

I briefly mentioned in a previous post that I was working on implementing this tag natively in Firefox. The intent is to display Ogg Theora encoded video without needing any plugins, similar to the recent demonstration of Theora playback using a video element by Opera. Opera have a post about it on their labs page.

I've made steady progress and can currently display Ogg Theora encoded videos using the video element. I've done a screencast of a simple page with a Theora video to give an idea of how it works. The video looks choppy in the screencast due to the way the screencasting software captures the screens. It didn't look like that when I played it, honest :-). The screencast is also quite large, at about 7MB. It's a pity we don't already have browsers with <video/> support so I don't have to embed large flash files for screencasts!

The example in the screencast shows a simple video element usage:

<video style="width:320; height: 240;" id="v" src="test.ogg"></video>

The DOM object created by this element has a Javascript API that can control playback. The button on the page uses this to start the video:

<button onclick="document.getElementById('v').play()">Play</button>

I'm not finished with the implementation, and have yet to implement the full WHATWG specification, but it's coming along nicely. I'll post more on my weblog as I get closer to finishing it.

The snippet of video in the screencast is of James Hill playing 'Allegro Con Brio' on the ukulele. You can see this and more in the original WMV format on the video page of his website. James is an amazing ukulele player. His musics CD's are great and he will apparently be in Auckland, New Zealand in November 2007 to attend the Ukulele Festival of 2007.


This site is accessable over tor as hidden service mh7mkfvezts5j6yu.onion, or Freenet using key: