Integrate Nimbb into a form

In this example, we show how to embed a Nimbb Player in a web form. The form includes different fields that are submitted with the recorded video GUID. Before submitting the data, we do some validation to make sure that the form has been completed.

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

Example

Your name:

Your email:

Video title:



Submit form

HTML code

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

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

// Global variable to hold the guid of the recorded video.
var _Guid = "";

// 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 video was saved.
function Nimbb_videoSaved(idPlayer)
{
  _Guid = _Nimbb.getGuid();
}

// Get the data from the form.  Check that everything is completed.
function submit()
{
  var name = document.getElementById("name");
  var email = document.getElementById("email");
  var title = document.getElementById("title");
  var form = document.myForm;
	
  // Make sure the name is specified.
  if( name.value == "" )
  {
    alert("Please enter your name to proceed.");
    return;
  }
  
  // Make sure the email is specified.
  if( email.value == "" )
  {
    alert("Please enter your email to proceed.");
    return;
  }

  // Make sure the video title is specified.
  if( title.value == "" )
  {
    alert("Please enter a video title to proceed.");
    return;
  }
	
  // Verify that the video is not currently recording.
  if( _Nimbb.getState() == "recording" )
  {
    alert("The video is being recorded. Please wait.");
    return;
  }
	
  // Check that video has been recorded.
  if( _Guid == "" )
  {
    alert("You did not save the video.  Click save.");
    return;
  }
	
  // Set the guid as hidden parameter.
  form.guid.value = _Guid;

  // Submit form.
  form.submit();
}

// -->
</script>
<form name="myForm" method="POST" action="URL">

<input name="guid" type="hidden" value="">

Your name: <input id="name" type="text" name="name" style="width:200px;">
<br><br>

Your email: <input id="email" type="text" name="email" style="width:200px;">
<br><br>

Video title: <input id="title" type="text" name="title" style="width:200px;">
<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=record&simplepage=1&key=XXXXXXXXXX&lang=en" />
<param name="allowScriptAccess" value="always" />
<embed name="nimbb" src="https://player.nimbb.com/nimbb.swf?mode=record&simplepage=1&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>
<a href="javascript:submit();">Submit form</a>

</form>

In the code, you must modify the URL defined in the action parameter of the form. This is the destination page where the form's data is posted to. From that page, you will be able to retrieve the values.

Once you click on Submit form, the submit() function is called. This function verifies that all fields have been completed and that a video has been recorded. Before submitting the form, we assign the GUID to the hidden input so that we can retreive the value.

View more tutorials.

SIGN UP NOW 7-day free trial

Check out our Developer guide to get started with Nimbb.