By
The Mozilla Support Project and support.mozilla.com (SUMO for short) is an open and volunteer powered community that helps over 3 million Firefox users a week get support and help with their favorite browser. The Firefox support community maintains a knowledge base with articles in over 30 languages and works directly with users through our support forums or live chat service. They’ve put together the following demonstration of how to use open video and Flash-based video at the same time to provide embedded videos to users regardless of their browser. This demo article was written by Laura Thomson, Cheng Wang and Eric Cooper
Note: This article shows how to add video objects to a page using JavaScript. For most pages we suggest that you read the article that contains information on how to use the video tag to provide simple markup fallbacks. Markup-based fallbacks are much more elegant than JavaScript solutions and are generally recommended for use on the web.
One of the challenges to open video adoption on the web is making sure that online video still performs well on browsers that don’t currently support open video. Rather than asking users with these browsers to download the video file and use a separate viewer, the new <video> tag degrades gracefully to allow web developers to provide a good experience for everyone. As Firefox 3.5 upgrades the web, users in this transitional period can be shown open video or video using an existing plugin in an entirely seamless way depending on what their browser supports.
At SUMO, we use this system to provide screencasts of problem-solving steps such as in the article on how to make Firefox the default browser.
If you visit the page using Firefox 3.5, or another browser with open video support, and click on the “Watch a video of these instructions” link, you get a screencast using an Ogg-formatted file. If you visit with a browser that does not support <video> you get the exact same user experience using an open source .flv player and the same video encoded in the .flv format, or in some cases using the SWF Flash format. These alternate viewing methods use the virtually ubiquitous Adobe Flash plugin which is one of the most common ways to show video on the web.
The code works as follows.
In the page which contains the screencasts, we include some JavaScript. Excerpts from this code follow, but you can see or check out the complete listing from Mozilla SVN.
The code begins by setting up an object to represent the player:
Screencasts.Player = {
width: 640,
height: 480,
thumbnails: [],
priority: { 'ogg': 1, 'swf': 2, 'flv': 3 },
handlers: { 'swf': 'Swf', 'flv': 'Flash', 'ogg': 'Ogg' },
properNouns: { 'swf': 'Flash', 'flv': 'Flash', 'ogg': 'Ogg Theora' },
canUseVideo: false,
isThumb: false,
thumbWidth: 160,
thumbHeight: 120
};
We allocate a priority to each of the possible video formats. You’ll notice we also have the 'canUseVideo' attribute, which defaults to false.
Later on in the code, we test the user’s browser to see if it is video-capable:
var detect = document.createElement('video');
if (typeof detect.canPlayType === 'function' &&
detect.canPlayType('video/ogg;codecs="theora,vorbis"') == 'probably' ) {
Screencasts.Player.canUseVideo = true;
Screencasts.Player.priority.ogg =
Screencasts.Player.priority.flv + 2
}
If we can create a video element and it indicates that it can play the Ogg Theora format we set canUseVideo to true and increase the priority of the Ogg file to be greater than the priority of the .flv file. (Note that you could also detect if the browser could play .mp4 files to support Safari out of the box.)
Finally, we use the priority to select which file is actually played, by iterating through the list of files to find the one that has the highest priority:
for (var x=0; x < file.length; x++) {
if (!best ) {
best = file[x];
} else {
if (this.priority[best] < this.priority[file[x]])
best = file[x];
}
}
With these parts in place, the browser displays only the highest priority video and in a format that it can handle.
If you want to learn more about the Mozilla Support Project or get involved in helping Firefox users, check out their guide to getting started.
Resources
- Using fallback options with audio and video in the Mozilla Developer Center
- Using the video tag with fallbacks without using JavaScript.
* Note: To view this demo using Safari 4 on Mac OSX, you will need to add Ogg support to Quicktime using the Xiph Quicktime plugin available from http://www.xiph.org/quicktime/download.html
37 comments