Posted By

Kit on 10/22/09

Tagged

Versions (?)

Last Edited at 10/22/09 09:13pm

Statistics

Viewed 795 times

Favorited by 0 user(s)

Related snippets

Getting Video For Everybody working without encoding an OGG

/ Published in: JavaScript

Video For Everybody is a great way to use the `` 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 `` element on the page. Due to my requirements, this code only addresses the first `` element on the page.

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

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

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
	}
}