Update 12-19-2011: Noting that this example uses the Flash/JS API. It would be trivial to convert it to BrightCove’s “SmartAPI,” just replace the loadVideo method with loadVideoById, include the includeAPI parameter in the embed code, and copy whatever tiny tweaks to the variables from the SmartAPI code.

In this post I’ll detail how to create a standard video gallery (you know, one giant video with some thumbnails under it that can switch the video out) using BrightCove and some good coding practices. There’s no BrightCove widget or plugin that does this in a user friendly manner AFAIK.

Unfortunately BrightCove is a paid-only service so I don’t have an account to provide examples with.

The HTML

First we need the HTML for the video gallery. This includes an empty <div> where the embed tag will be injected and a list of thumbnails.

The list of thumbnails has HTML5 data attributes containing the BrightCove video IDs (this is found in the @videoplayer parameter in the default embed code). Make sure you are using the video IDs and not the player IDs.

<div id="video-gallery">
  <div id="video-full"></div>
  <ul id="video-thumbs">
    <li><a data-videoid="1052878348001"><img src="img/videos-thumb-1.jpg" alt="thumbnail" />
      Video 1</a></li>
    <li><a data-videoid="1052868543001"><img src="img/videos-thumb-2.jpg" alt="thumbnail" />
      Video 2<br />Cruises</a></li>
    <li><a data-videoid="1052868559001"><img src="img/videos-thumb-3.jpg" alt="thumbnail" />
      Video 3</a></li>
    <li><a data-videoid="1094040833001"><img src="img/videos-thumb-4.jpg" alt="thumbnail" />
      Video 4<br /> America Line</a></li>
    <li><a data-videoid="1052733197001"><img src="img/videos-thumb-5.jpg" alt="thumbnail" />
      Video 5<br />Cruises</a></li>
    <li><a data-videoid="1094054647001"><img src="img/videos-thumb-6.jpg" alt="thumbnail" />
      Video 6</a></li>
  </ul>
</div><!-- /#video-gallery -->

Next, add some script tags to your page:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script>
<script type="text/javascript" src="http://admin.brightcove.com/js/BrightcoveExperiences_all.js"></script>
<script src="js/script.js"></script>

You can modify this to fit your page’s needs. In essence, we need jQuery version 1.4.3 or higher (the jQuery.data() function attribute getter is only available starting in 1.4.3). We’re using the latest, 1.7.1, from google CDN with a fallback to a local version (this is from HTML5boilerplate).

We also need the BrightCove JavaScript. This is a different version than what is typically given by the BrightCove embed code when you copy and paste. Note the “_all” in the filename — this means all of the API methods are available in this one file. There are other files you can use (you can dig through the BrightCove docs for that), but this is the most thorough one. The BrightCove JavaScript is also responsible for turning our src-less <object> elements into working embeds.

Finally we include our script file. We will write that next. You can name it whatever you want.

The JavaScript

Aside from including the full version of BrightCove’s JavaScript file on our page, BrightCove looks for some variables and functions in the global scope (yea, that’s not a best practice, but YouTube does it, too). This code can be found in the BrightCove API documentation, but here it is for this article. I’ve modified it slightly, you can check the documentation for updates.

/**
 * BRIGHTCOVE STUFF
 */
var bcExp;
var modVP;
var modExp;
var modCon;

/**
 * Called when template loads, this function stores a reference to the player and modules.
 * Then event listeners will be added for when the template is ready and when a user clicks on a video.
 */
function onTemplateLoaded(experienceID) {
  bcExp = brightcove.getExperience(experienceID);
  modVP = bcExp.getModule(APIModules.VIDEO_PLAYER);
  modExp = bcExp.getModule(APIModules.EXPERIENCE);
  modCon = bcExp.getModule(APIModules.CONTENT);
}
function initPlayer() {
  runMobileCompatibilityScript('myExperience');
  brightcove.createExperiences();
}

You’ll never need to call these functions yourself, but modVP is set to an object with methods that interact with the video player. We’ll use those methods to load a new video.

Next up is our code. As a best practice, we’ll keep as much of it out of the window scope as possible by wrapping it in an immediately invoked function expression.

var brightcoveGallery = (function($) { // IIFE

  /**
   * Use JS to append brightcove object embed code, cheats us past HTML validators.
   * An array of strings is joined together to build the HTML, which is pretty quick.
   * You could also just put the embed code directly into the HTML.
   * @param videoId string contains id of initial video to load.
   * @return jquery object for the <object>, useful for debugging
   */
  this.embedVideo = function(videoId) {
    var html = [
      '<object id="myExperience', videoId, '" class="BrightcoveExperience">'
      , '<param name="bgcolor"          value="#164476" />'
      , '<param name="width"            value="608" />'
      , '<param name="height"           value="343" />'
      , '<param name="playerKey"        value="-SOME-CRAZY-LONG-STRING-" />' // replace this with the playerKey from your video's embed code
      , '<param name="playerID"         value="9999999999999" />' // replace this with the playerID (not video ID) from your video's embed code
      , '<param name="isVid"            value="true" />'
      , '<param name="isUI"             value="true" />'
      , '<param name="videoSmoothing"   value="true" />'
      , '<param name="@videoPlayer"     value="' + videoId + '" />' // replace this with the videoID (not the player ID) from your video's embed code
      , '<param name="dynamicStreaming" value="true" />'
      , '<param name="wmode"            value="transparent" />'
    , '</object>'
    ];
    return $(html.join('""')).appendTo('body'); // change body to the selector you'd like the video to appear in
  };

  /**
   * depends on the modVP variable in the global scope
   * bind the thumbnails and embed the first video
   */
  this.init = function() {
    var videoThumbs = $('#video-thumbs').find('a');

    videoThumbs.click(function(e) {
      e.preventDefault();
      modVP.loadVideo($(this).data('videoid'));
    });

    var initialVideoId = videoThumbs.first().data('videoid');
    this.embedVideo(initialVideoId);
  }

  return this;

}).call({}, jQuery);

I modified this code for this article so haven’t really tested it (sorry). The code creates a variable, brightcoveGallery, that is assigned the return value of an IIFE. The return value is just this, which includes the two functions this.embedVideo and this.init.

The IIFE is invoked with the call method, which takes as its first parameter the value of this and then some standard arguments (we’re passing the jQuery object, which gets bound to the parameter $ for compatibility. You could also pass things like window or other variables you need).

So now you can call brightcoveGallery.embedVideo(), which we won’t do,
and brightcoveGallery.init(), which we will. So after the brightcoveGallery variable, put the following:

brightcoveGallery.init();

That should do it. If you find any mistakes, leave a comment.