Create an interactive advertisement

In this example, Nimbb is used to create an interactive video advertisement. To do this, we use several Nimbb videos in playback mode and offer the user choices. According to the responses, the user sees different videos and is redirected to pages on the site.

This example requires you to specify your developer key (see tutorial).

Example

HTML code

<script language="JavaScript" type="text/javascript">
<!--

// Global variable to hold player's reference.
var _Nimbb;

// Global variables of the playing videos.
var _PlayGuid = "7f2f8d84cd";
var _GuidYes;
var _GuidNo;

// Global variable to check if the player is ready to play.
var _Waiting = false;

// Global variable holding data.  Modify by editing/adding/deleting lines.
var _Data = [
["7f2f8d84cd", "YES:9d864499d6", "NO:5582945657"],
["9d864499d6", "YES:eb9881f717", "NO:6b32e81f94"],
["5582945657", "YES:f9344b5d35", "NO:7c2dd0e1db"],
["eb9881f717", "YES:dbeb048262", "NO:7c2dd0e1db"],
["6b32e81f94", "YES:7b5330e26d", "NO:7c2dd0e1db"],
["f9344b5d35", "=/Video/Record.aspx"],
["7c2dd0e1db", "=/"],
["dbeb048262", "=/Doc/Tutorials/"],
["7b5330e26d", "=/Doc/Videos/Wizard.aspx"],
];

// Event: Nimbb Player has been initialized and is ready.
function Nimbb_initCompleted(idPlayer)
{
  // Get a reference to the player since it was successfully created.
  _Nimbb = document[idPlayer];
}

// Event: the player has started playing.
function Nimbb_playbackStarted(idPlayer)
{
  // Hide interface.
  HideButtons();
}

// Event: the player has stopped playing.
function Nimbb_playbackStopped(idPlayer)
{
  // Load information to play video.
  LoadData();
}

// Event: the state of the player changed.
function Nimbb_stateChanged(idPlayer, state)
{
  if( state == "ready" && _Waiting )
  {
    // Start playing the video.
    _Waiting = false;
    _Nimbb.playVideo();
  }
}

// Hide the interface.
function HideButtons()
{
  document.getElementById("buttons").style.visibility = 'hidden'; 
}

// Show the interface.
function ShowButtons()
{
  document.getElementById("buttons").style.visibility = 'visible';
}

// Set the video to be played next.
function PlayVideo(guid)
{
  _PlayGuid = guid;
  _Waiting = true;
  _Nimbb.setGuid(_PlayGuid);
}

// Load information a line of data based on the current video playing.
// Loop in data and store information in global variables. If the data line
// includes a URL, redirect the browser.
function LoadData()
{
  _GuidYes = "";
  _GuidNo = "";
  for (var i = 0; i < _Data.length; i++)
  {
    if (_Data[i][0] == _PlayGuid)
    {
      for (var j = 1; j < _Data[i].length; j++)
      {
        if(_Data[i][j].indexOf("YES:") == 0 )
        {
          _GuidYes = _Data[i][j].substring(4);
          ShowButtons();
        }
        if(_Data[i][j].indexOf("NO:") == 0 )
        {
          _GuidNo = _Data[i][j].substring(3);
          ShowButtons();
        }
        if(_Data[i][j].indexOf("=") == 0 )
        {
          window.location.href=_Data[i][j].substring(1);
        }
      }
      break;
    }
  }
}

// -->
</script>
<object id="nimbb" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="320" height="240" codebase= "http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
<param name="movie" value="http://player.nimbb.com/nimbb.swf?guid=7f2f8d84cd&playonclick=0&autoplay=1&showmenu=0&key=XXXXXXXXXX&lang=en" /><param name="allowScriptAccess" value="always" />
<embed name="nimbb" src="http://player.nimbb.com/nimbb.swf?guid=7f2f8d84cd&playonclick=0&autoplay=1&showmenu=0&key=XXXXXXXXXX&lang=en" width="320" height="240" allowScriptAccess="always" pluginspage="http://www.adobe.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
</object>

<br><br>

<div id="buttons" style="visibility:hidden;">
<a href="javascript:PlayVideo(_GuidYes);">YES</a>   
<a href="javascript:PlayVideo(_GuidNo);">NO</a>
</div>

To create the ad, we first recorded all videos using Nimbb. For each video, we kept the GUID. Then, in the _data section, we specify the GUID information. Each line refers to a video and an action. Some lines redirect to other videos ("YES:", "NO:"), others to pages in the site ("="). When playing a video, we hide the interface's buttons and only show them once the playback is completed.

To change this example to fit your needs, simply create lines containing your videos. You could add more choices by modifying the function code LoadData().

Note that to play all videos of this advertisement, we use a single Nimbb object. This allows instant playback of each video by specifying the function setGuid().

View more tutorials.

SIGN UP NOW 7-day free trial

Check out our Developer guide to get started with Nimbb.