How To Integrate Shadowbox and Video JS

by Justin Barkhuff, justin@justinbarkhuff.com

About

Here are steps to integrate Shadowbox (http://www.shadowbox-js.com/) and Video JS (http://videojs.com/). Shadowbox is a web-based media viewer application that supports all of the web’s most popular media publishing formats. Video JS is a javascript-based video player that uses the HTML5 video functionality built into advanced browsers. For browsers and devices that don’t support HTML5 video, there is a flash fallback.

Support

If this code just saved your life and you want to thank me with some of the money you just saved, I’m not above accepting donations:

Demo

Check out this demo. If you’ve got an iPhone/iPod/iPad, be sure to check it out on that device too.

Instructions

  1. Upload the Shadowbox and Video JS assets to your site, and make sure you’re including all the necessary JavaScript and CSS in your HTML page.

  2. Convert your videos to an MP4 format compatible with iPods/iPhones/iPads. Not any MP4 will do! I recommend using Handbrake for this (http://handbrake.fr/).

  3. Be sure you’re specifying the width and height settings in your shadowbox links. For example:

    <a title="My Video" rel="shadowbox;height=360;width=640" href="/video.mp4">Watch My Video</a>

  4. Make sure you’ve included the qt Shadowbox player:

    Shadowbox.loadPlayer(['qt'],'/shadowbox/player');

  5. In your Shadowbox.init(), set showMovieControls to false and specify the onFinish and onClose handlers. You have to set showMovieControls to false, otherwise the qt player will add 16 pixels to the height of the video player. After making those changes, your Shadowbox.init might look like this (note: you’ll probably need to modify the two places that specify where to find the Video JS flowplayer swf):

    Shadowbox.init({ showMovieControls:false, onFinish:function(el){ if(el.player == 'qt'){ var wrapper = Shadowbox.lib.get('shadowbox_body_inner'); wrapper.innerHTML = '<video id="shadowbox_content" class="video-js" width="'+el.width+'" height="'+el.height+'" controls autoplay>' +'<source src="'+el.content+'" type=\'video/mp4; codecs="avc1.42E01E, mp4a.40.2"\'>' +'<object class="vjs-flash-fallback" width="'+el.width+'" height="'+el.height+'" type="application/x-shockwave-flash" data="/videojs/flowplayer-3.2.2.swf">' +'<param name="movie" value="/videojs/flowplayer-3.2.2.swf" />' +'<param name="allowfullscreen" value="false" />' +'<param name="flashvars" value=\'config={"clip":{"url":"'+el.content+'","autoPlay":true,"autoBuffering":true},"plugins":{"controls":{"fullscreen":false}}}\' />' +'</object>' +'</video>'; VideoJS.setup(); } }, onClose:function(el){ var wrapper = Shadowbox.lib.get('shadowbox_body_inner'); wrapper.innerHTML = ''; } });

  6. Add one line of code to shadowbox.js. This line of code needs to be added just below Shadowbox’s plugin detection (for me, I added this to line 590):

    plugins.qt = plugins.fla;

    Here is what the full plugin detection code now looks like, I just added the very last line:

    var plugins; // detect plugin support if(navigator.plugins && navigator.plugins.length){ var detectPlugin = function(plugin_name){ var detected = false; for (var i = 0, len = navigator.plugins.length; i < len; ++i){ if(navigator.plugins[i].name.indexOf(plugin_name) > -1){ detected = true; break; } } return detected; }; var f4m = detectPlugin('Flip4Mac'); plugins = { fla: detectPlugin('Shockwave Flash'), qt: detectPlugin('QuickTime'), wmp: !f4m && detectPlugin('Windows Media'), // if it's Flip4Mac, it's not really WMP f4m: f4m }; }else{ var detectPlugin = function(plugin_name){ var detected = false; try{ var axo = new ActiveXObject(plugin_name); if(axo) detected = true; }catch(e){} return detected; }; plugins = { fla: detectPlugin('ShockwaveFlash.ShockwaveFlash'), qt: detectPlugin('QuickTime.QuickTime'), wmp: detectPlugin('wmplayer.ocx'), f4m: false }; } plugins.qt = plugins.fla;

Change Log

July 8, 2010

  • Added an additional step to change Shadowbox’s qt plugin value.

July 8, 2010

  • Solution released!