Play multiple videos

Looking for a way to play a list of videos with the same Nimbb Player? Then try this tutorial! As you can see when clicking the play all videos link in the example, we play a list of 2 videos consecutively. We also hide the playback menu on the Nimbb Player so that the user can only interact with the link to play, stop and resume playback. Once all videos have been played, the user gets a notification.

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

Example

play all videos

HTML code

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

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

// Global variable of video list to play.
var _List = new Array();

// Global variable to check if the video must be resumed in playback.
var _ResumePlay = false;

// Event: the player is being initialized and not yet ready.
function Nimbb_initStarted(idPlayer)
{
  // Prepare the list of videos to play.
  // Define your list of video GUID here!
  _List.push("XXXXXXXXXX");
  _List.push("XXXXXXXXXX");
}

// 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 stopped playing.
function Nimbb_playbackStopped(idPlayer)
{
  // Check if the Stop event was caused manually.
  if( !_ResumePlay )
  {
    // Video reached the end, so play next video in the list.
    PlayNextVideo();
  }
}

// Called when user clicks the link.
function action()
{
  // Check player's state and call appropriate action.
  if( _Nimbb.getState() == 'playing' )
  {
    // User stopped playback, so stop the player and remember to resume.
    _ResumePlay = true;
    _Nimbb.stopVideo();
    updateText("resume play");
  }
  else if( _ResumePlay )
  {
    // The video playback must be resumed.
    _ResumePlay = false;
    _Nimbb.playVideo();
    updateText("stop");
  }
  else if( _List.length==0)
  {
    // The video list is now empty, notify user.
    alert("All videos played, refresh page to restart.");
  }
  else
  {
    // Play next video in the list.
    PlayNextVideo();
  }	
}

// Play the next video from the list.
function PlayNextVideo()
{
  var guid;

  // Get the next video to play from the list.
  guid = _List.shift();

  // Check if there is a video to play.
  if( guid != null )
  {
    // Assign the video GUID to the Nimbb Player.
    _Nimbb.setGuid(guid);
			
    // Start playback of video.
    setTimeout("_Nimbb.playVideo()", 500);
    updateText("stop");
  }
  else
  {
    // The video list is empty.
    updateText("done!");
  }
}

// Update text on the link.
function updateText(text)
{
  var actionButton = document.getElementById("actionButton");
  actionButton.innerHTML = text;
}

// -->
</script>
<a id="actionButton" href="javascript:action();">play all videos</a>
<br><br>

<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="https://player.nimbb.com/nimbb.swf?mode=view&guid=XXXXXXXXXX&showmenu=0&playonclick=0&key=XXXXXXXXXX&lang=en" />
<param name="allowScriptAccess" value="always" />
<embed name="nimbb" src="https://player.nimbb.com/nimbb.swf?mode=view&guid=XXXXXXXXXX&showmenu=0&playonclick=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>


In the code, we are defining the list of videos to play in the Nimbb_initStarted event. For that, we simply add each video GUID to the list with the _List.push() method. You can add as many videos as you want there.

You will notice the use of the global variable _ResumePlay that allows us to keep track of the user's interaction with the playback link. Also, notice the use of the setTimeout() function in the code. This function allows us to delay the start of the video playback and gives enough time to the Nimbb Player to process the call.

View more tutorials.

SIGN UP NOW 7-day free trial

Check out our Developer guide to get started with Nimbb.