Advanced Search

Return to Snippet

Revision: 19410
at October 22, 2009 21:13 by Kit
Initial Code 
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
	}
}
Initial URL 
http://camendesign.com/code/video_for_everybody
Initial Description 
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.
Initial Title 
Getting Video For Everybody working without encoding an OGG
Initial Tags 
javascript, video, html5
Initial Language 
JavaScript