Displaying a preloader

The Nimbb Player is built on the Flash technology, meaning that it must be downloaded and initialized before a user can access it. This process is usually fast, but if a user has a slow connection, it might be useful to display a temporary message. The Nimbb Player has a preloader already built-in that shows a progress bar while loading.

However, you might want to display your own text or image while Nimbb is loading. The following example shows you how to do this using a DIV and some JavaScript programming. To test the example, refresh the page and notice the text displayed while Nimbb gets loaded.

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

Example

Loading Nimbb Player...

HTML code

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

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

// 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];

  // Hide the preloader.
  document.getElementById("div_loading").style.display = "none";
	
  // Show the Nimbb Player by resizing it.
  _Nimbb.width=320;
  _Nimbb.height=240;
}

// -->
</script>
<div id="div_loading" style="width:320px;height:240px;text-align:center;">
Loading Nimbb Player...
</div>

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

In the code, we are using a DIV div_loading to display text to the user (or you could put an image or any content in the DIV). We also set a size of 320x240 pixels, which is the same size as the Nimbb Player. Note that we give a size of 0x0 pixel to the Nimbb Player in order to hide it while it's being loaded.

Once the event Nimbb_initCompleted() is called, we hide div_loading and then set the Nimbb Player to the default size of 320x240 pixels to display it.

Note: if you don't see the Nimbb Player when testing this code in your page, make sure that you have correctly changed "XXXXXXXXXX" with your developer key.

View more tutorials.

SIGN UP NOW 7-day free trial

Check out our Developer guide to get started with Nimbb.