Posted By

Kit on 10/22/09


Tagged

javascript video mootools html5


Versions (?)

Getting Video For Everybody working without encoding an OGG


 / Published in: JavaScript
 

URL: 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.

  1. checkVideo: function() {
  2. var videoElement = document.getElement('video');
  3. var supportsVideo = !!(videoElement.canPlayType);
  4.  
  5. if(!supportsVideo && (Browser.Plugins.Flash.version < 9 || (Browser.Plugins.Flash.version == 9 && Browser.Plugins.Flash.build < 60))) {
  6. var warning = new Element('div', {
  7. 'class': 'warning',
  8. '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>'
  9. });
  10.  
  11. warning.inject(videoElement.getParent().getParent(), 'bottom');
  12. } else if(supportsVideo && !videoElement.canPlayType('video/mp4')) {
  13. // Browser can't play MP4 in the video tag
  14. var fallback = videoElement.get('html'); // Get fallback content (QuickTime and Flash object tags)
  15. videoElement.getParent().set('html', fallback); // Replace the video tag with the fallback content
  16. }
  17. }

Report this snippet  

You need to login to post a comment.