Media API: VideoManager Example Application

Applies to Roles
Developer
Version
Brightcove 4
Modules
Media API
Edition
Pro, Enterprise

This document presents the VideoManager, a sample application that uses the Brightcove Media API and JavaScript. The VideoManager is a client that manages basic tasks in a Media Library. In many respects, it follows the same design patterns as the Brightcove Media module, but instead of being implemented as a Flash application, it uses HTML, JavaScript, and the Media API. To understand how the VideoManager works, you need to be familiar with the JavaScript programming language and understand the cross-domain security restrictions that browsers impose on HTTP requests being made in JavaScript. Be sure to read Getting Started using JavaScript before continuing.

Click here to see the VideoManager application. Note that we have deployed the VideoManager as a read-only application.

The VideoManager application consists of the following files:

  • vm.html - The main user interface page, which calls JavaScript functions from vm_ui.js and vm_wire.js.
  • vm_wire.js - JavaScript functions that handle the Media API read and write calls. Note that since we've set up the VideoManager to be read-only, only the read methods actually do anything.
  • vm_ui.js - JavaScript functions that handle the UI presentation in vm.html.
  • proxy.jsp - This page proxies the request to the API interface and its response. In a production deployment, you would make sure this page was not accessible to the outside.

You can examine these files and their comments to get an idea of some approaches you can take to building your own Media API applications. In this example, we use the jQuery library for presentation, including visual effects and rendering, as well as ironing out DOM inconsistencies between browsers, and we use the Ajile library to retrieve the JSON data from the Brightcove Media API server. This document examines some of the VideoManager features:

Feature: Display all playlists

Let's look at how a few of the features in the VideoManager work. In the left panel of the VideoManager, there are links for "All Videos" and "All Playlists." When you click the "All Playlists" link, the data grid in the center of the page displays all of the playlists in this account. Here's how this link looks in vm.html:

<div id="allPlaylists" onclick='Load(getAllPlaylistsURL())'>All Playlists</div>

When the link is clicked, the getAllPlaylistsURL() function is invoked; the Ajile Load() extracts the JSON data from that URL. Here is the getAllPlaylistsURL() function from vm_wire.js:

function getAllPlaylistsURL(){
    loadStart();
    paging.allPlaylists = (paging.currentFunction == getAllPlaylistsURL)?paging.generic:paging.allPlaylists;
    paging.currentFunction = getAllPlaylistsURL;
    return apiLocation +
          '?command=find_all_playlists&callback=showAllPlaylistsCallBack'
          + '&get_item_count=true&page_size=' + paging.size + '&page_number='+paging.allPlaylists
          +'&token='+readToken;
}

Note how the return value is composed from:

  • the apiLocation, which in this example is set in vm_wire.js to "http://api.brightcove.com/services/library", but which in a production application you would set to point to proxy.jsp on your server;
  • the Media API command we want to invoke, find_all_playlists;
  • the callback function we want to use with what's returned by the Media API command, showAllPlaylistsCallBack;
  • the paging parameters that we want to pass along with find_all_playlists; and
  • the Media API read token, which in this example is also set in vm_wire.js, but which in a production application you would set in proxy.jsp.

The callback function we use with the getAllPlaylistsURL() function looks like this:

function showAllPlaylistsCallBack(o){
	if(null == o.error){
        oCurrentPlaylistList = o.items;
        buildPlaylistList();
        doPageList(o.total_count, "Playlists");
    }else{
        var message = (null!=o.error.message)?o.error.message:o.error;
        alert("Server Error: "+	message);
    }
    loadEnd();
}

It calls the function buildPlaylistList() from vm_ui.js to create a table with the playlists returned by the getAllPlaylistsURL() function.

Feature: Upload a Video

In the All Videos view of the VideoManager, there is an Upload Video button. When you click the button, the VideoManager displays a dialog in which you can enter a file location and metadata for a video and submit it to be uploaded to the Media Library. Here's the Upload Video button in vm.html:

<button id="uplButton" onClick="openBox('uploadDiv')">Upload Video</button>

The startUpload() function is invoked by the Start Upload button in the upload dialog. Write functions are disabled in this example. However, a working startUpload function would look like this:

function startUpload(){
    loadStart();
    var form = document.getElementById('uploadForm');
    var jsonVideo = '{';
    //Name and shortDescription are required, other parameters are optional.
    if("" == form.name.value || "" == form.shortDescription.value || "" == form.filePath.value){
        alert("Require Name, Short Description and File");
        return;
    }else{
        var l = form.elements.length;
        for(var i = 0; i < l; i++){
            if("" != form.elements[i].value && "text" == form.elements[i].type){
             // Only want a ',' on objects trailing another, doesn't come after the 
             // last object since it's written before it.
             if(i > 0){jsonVideo += ', ';}
             //Tags should be a list of strings
             if("tags" == form.elements[i].name){
                     jsonVideo += '"tags": [';
                     var tags = form.elements[i].value.split(',');
                     for(var k = 0; k < tags.length; k++){
                           if(k>0){jsonVideo += ',';}
                           jsonVideo += '"' + tags[k] + '"';
                     } 
                           jsonVideo +=']';
                     }else{
                           jsonVideo += '"'+form.elements[i].name + '": "'
                            + form.elements[i].value + '"'; 
                     }
               }
            }
            jsonVideo += '}';
    }
    form.video.value = jsonVideo;
    form.action = apiLocation;
    postFrameCBType = "create_video";
    closeBox('uploadDiv');
    progressPos = 0;
    openBox("uploadStatus");
    tUploadBar = setInterval("uploadProgressBar()" ,250 );
    form.submit(); 
}

Note how this function assembles from the form fields a jsonVideo string that is submitted with the create_video method when the user clicks the Start Upload button.

More examples

Here are some more examples to help you get started:

Tags
sample