Store data in videos using the custom parameter

Are you looking for an easy way to store some simple data with a video recorded by a user? For example, do you want to store the user's email address or your own special ID that identify this user? If so, you can use the custom parameter. This allows you to store a string of 100 characters with the video and retrieve it later using the Video/Get function. In the following example, the user must enter his email address before recording a video.

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

Example

Your email: Next

HTML code

<script src="http://www.google.com/jsapi"></script>
<script>google.load("swfobject", "2.1");</script>
<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];
  
  // Store the text data in the video.
  _Nimbb.setCustom(document.getElementById("data").value);
}

// Add the Nimbb Player in the page using SWFObject.
function addPlayer()
{
  var idPlayer = "nimbb";
  var width = 320;
  var height = 240;
  var params = {allowScriptAccess: "always"};
  var attributes = {id:idPlayer, name:idPlayer};
  var flashvars = {
    mode: "record",
    key: "YYYYYYYYYY",
    lang: "en",
    simplepage: "1"
    };

  // Add Nimbb Player.
  swfobject.embedSWF("http://player.nimbb.com/nimbb.swf", idPlayer, width, height, "9", null, 
    flashvars, params, attributes);

  // Hide button and set data as read-only.
  document.getElementById("addBtn").style.display = "none";
  document.getElementById("data").readOnly = true;
}

// Verify that the data is specified and add the Nimbb Player.
function next()
{
  // Make sure the data is specified.
  if( document.getElementById("data").value == "" )
  {
    alert("Please enter your email to proceed.");
    return;
  }
  
  // Add the Nimbb Player.
  addPlayer();
}

// -->
</script>
Your email: <input id="data" type="text" name="data" style="width:200px;" maxlength="100">
<a id="nextBtn" href="javascript:next();">Next</a>
<br><br>
<div id="nimbb"></div>

When you enter your email address and then click Next, we dynamically add the Nimbb Player in the page. If you need help to understand the code, see the tutorial Using SWFObject to embed Nimbb dynamically.

Notice in the code that we use the setCustom() method. This allows us to set the email address of the user as the data stored in the video. Take note that it is important to call the function before the user starts recording the video, which is why we use it in the Nimbb_initCompleted event.

In the code, make sure to replace YYYYYYYYYY by your developer key.

You can modify this example to store something else than an email. For example a name or any other information. Remember that the maximum length is 100 characters.

View more tutorials.

SIGN UP NOW 7-day free trial

Check out our Developer guide to get started with Nimbb.