How to Pando-enable your Video
We recommend getting started with Pando using the following two steps: activate Pando, and playing your video. We will start with an example of playing a Flash Video (FLV)
1. Activate Pando
In the <head> of your page you need to include Pando.js and activate it. This is done by copying and pasting the following into your web page:
<script type="text/javascript" charset="utf-8" src="http://services.pando.com/js/pando.js"></script>
<script type="text/javascript" charset="utf-8" src="http://services.pando.com/js/pando.media.js"></script>
<script type="text/javascript" charset="utf-8">Pando.activate();</script>This handles all of the details of making sure that Pando Media Booster is properly activated.
2. Play your Flash video
The JW Flash Player is extremely popular, so we have made it very easy to play your video with it.
For example, if your video is at http://www.archive.org/download/gtv106_umphreysmcgee/gtv106_umphreysmcgee.flv, the following HTML would do the trick:
<a class="pandoAsset"
href="http://www.archive.org/download/gtv106_umphreysmcgee/gtv106_umphreysmcgee.flv" style="display:none">
<span class="pandoAccountId">12345</span>
<span class="pandoStreamRate">50000</span>
<span class="pandoWidth">320</span>
<span class="pandoHeight">240</span>
</a> This simple markup in your page takes care of packaging your video and delivering it via Pando, and playing it using the JW Flash Player.
Note that the width and height of the video must be provided so that we know how large to make the video player. The pandoStreamRate tells us how fast (in bytes per second) we need to deliver the video in order for it to play smoothly. And the account ID must be provided so that we know who you are.
Extra Credit: Pando-enable your custom video player via markup
If you have a custom media player, you can specify that as well, by setting the Pando.config.install.callback.markup parameter to specify the HTML markup that you use to display your video player. Note that this technique allows you to easily use any video player. This technique relies on the common naming convention of using an <embed src="".../> tag, and passing the actual video file URL using <param name="src" value="">. Pando.js will take the file at the source (src) location, package it, and deliver it as a stream into your media player.
DivX example
For example, a DivX player embed might look like this:
<script src="http://services.pando.com/js/pando.js" ></script>
<script>
Pando.config.install.callback.markup = ' <object classid="clsid:67DABFBF-D0AB-41fa-9C46-CC0F21721616" codebase="http://go.divx.com/plugin/DivXBrowserPlugin.cab" width="512" height="288">
<param name="custommode" value="none" />
<param name="autoPlay" value="false" />
<param name="src" value="" />
<param name="previewImage" value="http://labs.divx.com/sites/developers.pando.com/files/applesoranges.jpg" />
<param name="disableDimmer" value="true">
<embed src="" width="512" height="288" align="middle" type="video/divx" custommode="none" autoplay="false" pluginspage="http://go.divx.com/plugin/download/" disabledimmer="true" previewimage="http://labs.divx.com/sites/developers.pando.com/files/applesoranges.jpg"> </embed>
</object>';
Pando.config.install.callback.id = 'myMarkupContainer';
Pando.activate();
</script>and where you want the video to play:
<a class="pandoAsset"
href="http://download.divx.com/divxlabs/Apples_and_Oranges_Trailer_720-12Mbps.div" style="display:none">
<span class="pandoAccountId">12345</span>
<span class="pandoStreamRate">128000</span>
</a>As above, this will play the video, but it will do so using your custom media player.
Note that you can use the same HTML embed to play multiple movies, by including multiple anchor tags, linking to individual movies.
QuickTime example
If you want to play MyMovie.mov, a QuickTime movie, you can use the standard QuickTime player like this:
<script src="http://services.pando.com/js/pando.js" ></script>
<script>
Pando.config.install.callback.markup = '<OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab" HEIGHT=yy WIDTH=xx>
<PARAM NAME="src" VALUE="MyMovie.mov" >
<EMBED SRC="" HEIGHT=240 WIDTH=320 TYPE="video/quicktime"
PLUGINSPAGE="http://www.apple.com/quicktime/download/"/>
</OBJECT>';
Pando.config.install.callback.id = 'myMarkupContainer';
Pando.activate();
</script>And where you want to play the movie on the page you provide the link to the movie:
<a class="pandoAsset"
href="http://www.mysite.com/MyMovie.mov" style="display:none">
<span class="pandoAccountId">12345</span>
<span class="pandoStreamRate">128000</span>
</a>Windows Media Player example
If you want to play MyMovie.wmv using Windows Media Player, you can use the standard Windows Media Player like this:
<script src="http://services.pando.com/js/pando.js" ></script>
<script>
Pando.config.install.callback.markup = '<object id="PlayerEx2" classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6"
height="200" width="200">
<param name="uiMode" value="full" />
<param name="autoStart" value="true" />
<param name="URL" value="" />
Your browser does not support the ActiveX Windows Media Player
</object>';
Pando.config.install.callback.id = 'myMarkupContainer';
Pando.activate();
</script>And where you want to play the movie on the page you provide the link to the movie:
<a class="pandoAsset" href="http://www.mysite.com/MyMovie.wmv" style="display:none">
<span class="pandoAccountId">12345</span>
<span class="pandoStreamRate">128000</span>
</a>Extra Credit: Pando-enable your media player using a JavaScript callback
If you prefer to use JavaScript to embed your media player, here is a simple example using the JW Player's SFWObject:
<script src="http://services.pando.com/js/pando.js" ></script>
<script type='text/javascript' src='swfobject.js'></script>
<script>
Pando.config.install.callback.javascript = 'myMediaPlayerFunction';
Pando.activate();
myMediaPlayerFunction= function() {
var pandoData = (arguments[0]) ? arguments[0] : null ;
var so = new SWFObject('player.swf','myPlayer','640','420','8');
so.addVariable("file",pandoData.url); // We use pandoData.url
so.write('targetDiv'); // SWObject writes into this div (see below)
};
</script> And our old friend:
<div id="targetDiv">
<a class="pandoAsset" href="http://www.archive.org/download/gtv106_umphreysmcgee/gtv106_umphreysmcgee.flv"
style="display:none">
<span class="pandoAccountId">12345</span>
<span class="pandoStreamRate">50000</span>
</a>
</div>Note that the anchor tag is wrapped in the div with ID targetDiv, which allows your media player function to insert the media player into the correct location in the page.
Most media players provide JavaScript functions that can be used in this way. For example, QuickTime provides QTWriteObject('MyMovie.mov', 'xx', 'yy', ''). We recommend using those embed scripts because they automate functions such as detecting and generating the correct embed codes for various web browsers.