checkVideo: function() {
	var videoElement = document.getElement('video');
	var supportsVideo = !!(videoElement.canPlayType);

	if(!supportsVideo && (Browser.Plugins.Flash.version < 9 || (Browser.Plugins.Flash.version == 9 && Browser.Plugins.Flash.build < 60))) {
		var warning = new Element('div', {
			'class': 'warning',
			'html': '<p>Please <a href="http://www.adobe.com/go/getflash">update Flash</a> or <a href="http://www.apple.com/quicktime/download/">QuickTime</a> if you can&rsquo;t see the video on the right</p>'
		});

		warning.inject(videoElement.getParent().getParent(), 'bottom');
	} else if(supportsVideo && !videoElement.canPlayType('video/mp4')) {
		// Browser can't play MP4 in the video tag
		var fallback = videoElement.get('html'); // Get fallback content (QuickTime and Flash object tags)
		videoElement.getParent().set('html', fallback); // Replace the video tag with the fallback content
	}
}

http://camendesign.com/code/video_for_everybody

Video For Everybody is a great way to use the `<video>` tag with fallbacks for QuickTime or Flash for users with old browsers, but it requires that every video be encoded twice (once for the MP4 and once for the OGG).

This code (which requires Mootools but could be easily rewritten to avoid that requirement) allows you to provide a better experience for users of very old Flash Players (which don't support H.264 playback) and working video for Firefox users (without encoding any OGG files).

The code should be run onDomReady, and only if there's a `<video>` element on the page. Due to my requirements, this code only addresses the first `<video>` element on the page.

The video element should be enclosed in a `<div>` or other suitable container.

Getting Video For Everybody working without encoding an OGG

javascript, video, html5

JavaScript