Sunday, May 27, 2007

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.

Categories: ,

Labels:

15 Comments:

Anonymous Anonymous said...

Hi, that's great progress. Sadly you only joined #theora on freenode for a few minutes to drop the link to this blog entry so I missed the opportunity to talk to you.

I'd be intersted to know if your work somehow takes advantage of http://svn.annodex.net/liboggplay/trunk/ (a lightweight library to decode Ogg media files and to get crossplatform A/V sync for playback (this is nontrivial) - liboggplay also implements a NPAPI plugin)


maikmerten

2:29 AM  
Blogger Chris Double said...

Sorry about that, it was 2am and I didn't see any activity so went to sleep :). I'm in #theora quite often though so hopefully our timezones cross at some point.

I'm not currently using liboggplay (it wasn't in a working state when I started) but I have been following its progress. Now that I'm at the stage that I'm and liboggplay is much further along I'll be looking at how I can make use of it.

10:50 AM  
Blogger Kroc Camen said...

Whilst nice, if Microsoft don't implement this too, then it's not much use for the Internet other than controlled Intranets and select sites.

8:19 PM  
Anonymous Anonymous said...

Kroc, I believe one of the core strategies of HTML5 is to emulate things in javascript for IE so that microsoft (and other browser vendors) have the option of supporting it natively, or having it done slightly slower by a 3rd party.

Javascript isn't really up to decoding video, but there are already Java applets that can decode Theora so you could use javascript to rewrite video tags for browsers that don't support it. I'd guess that would get you as close to 100% support to as anything else available at the moment.

10:19 PM  
Blogger Chris Double said...

Following up on Anonymous' comment, Wikimedia has ogg videos for viewing and they support the video tag, falling back to other options if it is not available, including a java applet I believe.

http://commons.wikimedia.org/wiki/Category:Video

10:59 PM  
Blogger Asrail said...

Well...

should I make a proposal to the non-existent spec?

Add a "type" to the video tag.

The same way as "<style type='text/css'>" or "<script type='application/x-javascript'>".

So it could be used to video types other than ogg in the future.

6:32 AM  
Blogger Chris Double said...

There is actually a spec. It's in the HTML 5 working draft.

You can comment on this and make suggestions in the WHATWG mailing list. Please, if you really want to see a worthwhile video and audio implementation in the browser, join the list and make suggestions.

The subject of a 'type' has come up in the list before. If you follow the mail trail starting about here you can read the pros and cons.

You'll be pleased to see that the spec actually has a type and codec attribute to do what you want.

10:04 AM  
Blogger Roberto said...

where and when can I get a video- enabled Firefox ? Will it be part of Firefox 3 ? What about an encoder ? Does there exist such a thing similar to liboggplay so it could be used by extension developers without digging too deep into OS-specific stuff written in C ?

5:34 AM  
Blogger jto said...

A type= attribute just seems like common sense... until you realize the IMG tag doesn't have one, and we seem to have survived without it. (CSS properties that point to images don't provide a way to specify the MIME type either, AFAIK.)

I bet browsers can do fine with magic number checking. The HTTP Accept header is just gravy.

6:48 AM  
Blogger Chris Double said...

Roberto, keep an eye on bug 382267, that's where the patch will appear. I'll also mention it here on my blog. I'm not sure when the first version will be. I'll address your other questions in a blog post when I'm a bit further along.

10:00 AM  
Blogger antistress said...

great but you should add support for displaying a screenshot before playing the video like flash does (see YouTube...)

12:24 AM  
Anonymous Stefan said...

Hi, Thanks for a exciting development. I'm interested in several things regarding this. One of them being your current support for events, properties and functions specified in the HTML5 working-draft. I'm also interested to know if your code is available somewhere (appart from svn). Despite liking Ogg Theora a lot and the OS way I'm in the position now where I also need to embed a propriatery video format in Firefox for a special project. Doing that via the video element seems like a good way and I wonder if you would be willing to collaborate on such a project.

8:20 PM  
Blogger Chris Double said...

Stefan, there is nothing currently in the Mozilla CVS tree but a patch will be added to the bugzilla bug in the next day or two.

At this stage I've only implemented some of the javascript api functions but now that playback is stable I'll be working on the others.

Once the patch is in bugzilla I'll also put a git repository up with my changes. This might be useful for you to track updates to it and make your changes.

I'm happy to help with what you are doing if I can and it'll be useful to give me an idea of the changes I'll need to make to support multiple codecs easier.

9:58 AM  
Blogger Chris Double said...

Patch and git repository now available.

4:16 PM  
Anonymous Anonymous said...

Hi, Chris -
I work IDG News Service, part of the company that produces Computerworld and PC World magazines and have some questions about the Theora/HTML video work. Can you e-mail me your contact details to jeremy_kirk@idg.com? Thanks...

Best,
Jeremy Kirk
London Correspondent
IDG News Service
Telephone: +44 (0)20 7071 3697
Mobile: +44 (0)77 8424 9696
99 Gray's Inn Road, London WC1X 8TY, U.K.
AOL Instant Messenger: jrkirk100

IDG News Service is the internal newswire for IDG, serving magazines such as PC Advisor, PC World, ComputerWorld, MacWorld UK, InfoWorld and NetworkWorld. IDG publishes more than 300 publications in 85 countries

4:22 AM  

Post a Comment

<< Home