Last month I had the opportunity to visit the Mozilla office in Mountain View. While I was there I had an interesting discussion with a few people from the SUMO team (short for support.mozilla.com) about some of the challenges with adding screencasts to their support articles. Since the volunteer community creates most of the content, it’s not always feasible for screencasts to have narration. Also, if they did, they’d somehow have to be localized into more than 70 languages.

But I’d love to see a way to make screencasts with narration work in a situation like this because they’re so much easier to follow. Here’s an example: Silent vs. Narration

So over lunch we kept kicking ideas around and David had a thought about breaking the video up and pairing it with text instructions that I think could make a system that will degrade gracefully (or looking at it from the other direction – offer progressive enhancements).

How it could work is that you see a short video with narration and text explaining the first part of the instructions. Then you click to move on to the following steps. Example: Video-Narration-Text

If there is no narration available for the video we’ve still made it easier to follow along (and to localize) by breaking it up into short pieces and by including text instructions right below or beside the video. Example: Video-Text

And if there isn’t video available at all, screenshots can be substituted. Example: Screenshots-Text

Ryanne, Jay and I have been trying to come up with a good way to embed ogg video with the new video tag and have it still work in browsers that don’t support that yet. We want to show people how to set that up at the Open Video Conference. We came up with a method similar to this but hadn’t finalized it yet. Anyway, Kroc Camen’s Video for Everybody code is better.

There were a few things about the Video for Everybody code that I didn’t like so I edited it so that it validates as HTML5 and in the interest of simplification I took out the fallbacks for “QuickTime Installed but no Flash installed” and “No QuickTime and no Flash installed.” Also, the QuickTime object fallback is simplified because it assumes playback only on the iPhone.

So check it out the test page with a self hosted Flash player fallback
and
one with a YouTube fallback.

If you are using FireFox 3.5 beta you will get an ogg video, If you have Safari 3 or 4 you will get an mp4 and if you have FF 3, IE6, IE7 or IE8 you will get the Flash player (actually playing the same mp4 that Safari is playing).

Here’s the code snippet with a self-hosted flash player
and
Here’s the code snippet with the YouTube flash player.

The one big stumbling block to this whole thing at the moment is that poster image attribute is not supported yet and (because of that?) the video will load whether you play it or not. My understanding is that it’s supposed to be resolved in Firefox 3.5 before release (who knows what Apple’s plans are with Safari).

MP4 Download SD
OGG Download SD

Following up on the last post about HTML 5 and OGG video, here are some ideas that I’ve been thinking about in preparation for the Open Video Conference. If you have some ideas please leave a comment here or email me.

MP4 Download HD

Today I was playing with Ogg video (Theora) and the new HTML 5 video element which is supported in the Firefox 3.1 beta. This is a short screencast showing Ogg video playing in the new Firefox and the simplicity of using the video element. This video is 1280 x 800 so be sure to click the fullscreen button to see the details.

There is an Ogg version embeded after the jump. (Get the Firefox 3.1 beta)