Right before Firefox 3 shipped, I recorded a screencast to help people make the switch. Now it's available in Ogg Theora video.
More Firefox screencast videos available here in both Flash and Ogg.
update:
Since I'm using a couple of new Firefox features here, I thought I'd tell you all what's going. There are three components to video in this post.
The first is the new HTML 5 <video> element. This is a new feature that's currently available in the Firefox 3.1 pre-releases and, I believe, Webkit nightlies. The idea here is that video is a lot like an image, only moving, and so it should be a part of HTML just like the HTML <img> element. If it's part of HTML, then it's easier for people to add to their Web pages, easier to manipulate with CSS, JavaScript, and other Open Web standards.
The second part is the actual video file which was encoded using Theora, or more specifically, was encoded using Theora for the video, Vorbis for the audio, and packaged in an Ogg container. The great thing about Theora video is that Firefox 3.1 supports it natively across platforms. There are also some pretty good tools (getting better) for encoding into Theora. HandBrake is one of my favorites because I already use it for ripping DVDs and it's available for Mac, Windows, and Linux.
Finally, I've added a nice little border around the video element using the CSS3 border-image property. I'm actually using -moz-border-image because the spec hasn't been finalized so browser vendors are using their -vendor prefix with current implementations. This border-image property is super-cool. You can take an image, like one I'm using here and scale and stretch it to wrap pretty much any element. Right now we've got a bug with the <video> player controls and large borders so I've crunched down the image border quite a bit to work around the problem but I'm still excited have yet another CSS feature in my toolbelt.
update: Bug 470596 just got a fix. Yay!
Posted by: clouserw | December 19, 2008 3:35 PM
Will, yeah. That's why they're available in Flash first at the Mozilla website. But once you've got Firefox, and you're showing your friend on your computer how great it is, having a Theora version is cool. Also, some of the niche browsers also support <video> and they'll be able to see it :-)
- A
Posted by: Asa Dotzler | December 19, 2008 3:55 PM
Those are really great Asa! You sound good too, very crisp and now the World will be absolutely sure of how to pronounce your name. :)
The videos are loud though with no apparent volume control.
I only saw an option to mute the sound and so I had to scramble to open up my volume control.
My PC is hooked up to a home stereo system and when the video started my neighbors called wondering what the heck was going on over here (jk of course).
I certainly hope that you (or others) will be making an introductory add-ons video as well.
Posted by: Ken Saunders | December 19, 2008 4:35 PM
By the way, I like the new colors here.
Also, the next time that you're in an editing mood, it would be really nice if you'd add an option to follow posts and be notified on new posts and replies.
That's all that I want for Christmas.
Well, at least from you.
Posted by: Ken Saunders | December 19, 2008 4:44 PM
I think it is great people are already starting to use video tags, even before Firefox 3.1 is out. I am glad there are people just as excited about this new feature as I am!
Posted by: Matthew | December 19, 2008 10:18 PM
Wouldn't it be desirable to have a context menu option to rewind a video to the beginning?
Posted by: Stifu | December 20, 2008 2:26 AM
Stifu, as I understand it (and I could be wrong) these controls are 'fall-back' controls for when the page doesn't provide its own controls for the video. See the media events and media dom interfaces information at MDC. Presumably, JS toolkits and others will implement better controls just like sites implement great controls for image galleries and manipulation. Think of jogging controls, frame by frame, visualizations outside of the video triggered by the video progress, etc. It's gonna be really cool when this gets going.
That being said, I think the default controls will get some more love before Firefox 3.1, like a progress bar / scrubber control and maybe a full-screen button.
Posted by: Asa Dotzler | December 20, 2008 3:21 AM
Asa: I know developers can implement their own controls, but for example, you didn't add a way to rewind the video, and being able to do so from the context menu could have been good. The way it is now, I either have to wait for the video to finish, or I have to reload the page.
I can't really think of examples when rewinding the video could be bad and not wanted by the developer...
That said, I know the whole thing is still in development, and I've seen them add more options as time passed... so it might still happen. Not a big problem for me, anyway, just thought it could be nice.
Posted by: Stifu | December 20, 2008 5:24 AM
Oops... I started playing the video and left this site for another one (on the same tab), and the sound of the video was still playing. I read about similar bugs before, but I thought that was fixed.
Posted by: Stifu | December 20, 2008 5:51 AM
"This is a new feature that's currently available in the Firefox 3.1 pre-releases and, I believe, Webkit nightlies."
Actually, it's in Safari 3.1 and above. Not Google Chrome, though.
Posted by: Stifu | December 20, 2008 6:01 PM
Hmmm... The audio and video are both really jerky, even if I watch it the whole way through (to make sure it's loaded) and then play again. This is on WinXP with Gecko/20081220 Shiretoko/3.1b3pre.
Dear Lazyweb: what's the good bug to follow these performance issues?
Posted by: Greg | December 20, 2008 7:53 PM
Just found this project, and thought it will be good idea to demonstrate Firefox 3.5 streaming with this application.
Posted by: Tomer | May 10, 2009 6:06 AM
Using <video> to get people to switch to FF3 might be missing the target market. ;)