Integrating UGC Video Submissions into Brightcove

Posted by Joel Varty on October 12, 2011
0 people like this tutorial
Rate:

Agility provides tightly linked integration with Brightcove through UGC. If you need to host videos on your site, Brightcove is a video platform that allows for multi-format encoding and output via HTML5 or Flash based players.

 

This tutorial will cover:

  1. Setting up Brightcove
  2. Setting up Tags in Brightcove
  3. Uploading Brightcove Videos to Amazon S3 using SWF Upload
  4. Saving a Brightcove Video record to UGC
  5. Displaying a Brightcove Video on the Website

Brightcove Setup

For a brief overview of this, check out the documentation posted here.

The first thing to do, if you haven't already, is to get a Brightcove account. You can do that here. Once you have your account, you need to get your Read and Write Tokens from the API Management section of the Account Settings section here.

Next, go to the Settings section of Agility, and open the User Generated Content & Website Users Settings under configuration. Copy and paste the Read and Write Token into the fields provided.  Use the "Test Brightcove Settings" button to make sure your tokens are working. 

Once you have setup your credentials for Brightcove, you need to add a Brightcove video field to a UGC Content Definition.  Remember, if you want your video records to be approved before being published to the website, you should check the "Requires Moderation" checkbox on the UGC Content Definition that contains the Brightcove video field.

 

 

 

Notice that you can specify whether multiple renditions of each file will be created.  If this is checked, it means that, according to the defaults you setup in Brightcove, multiple versions of the video will be encoded using different settings for format, size and bitrate.  This lets you target different devices and bandwidth capabilities.

You can also set the default tags for a video, allowing you to have it automatically appear in a specific playlist based on the tags.  More on this below.

Now you are ready to start coding the form on your website.

If you have already been uploading other file types to UGC then this should be easy, because you'll be sending the files to the same spot - Amazon S3.  From there, you only have to set a few more Brightcove specific properties on the field property, and you are good to go.

Setting tags in Brightcove and UGC

Since all videos in Brightcove are submitted to a single list, an effective way to separate them into different playlists is to use tags.  For instance, all videos to be displayed on a "products" page could be tagged with the "product" tag, and all contest submission videos could be tagged with a "contestsubmission" tag.  Then, in Brightcove, you can associate those tags with a given "Smart Playlist". 

 

After the playlist is setup, you can associate that playlist with a specific player that supports a playlist.   Each player template in Brightcove is capable of playing either a single video (based on the video ID) or a playlist.

Once you have a player created (on the Publishing tab), use the Media tab to associate the player with one or more playlists.  In the screenshot below, I have a player called "Playlist Player Test", and I selected it and clicked "Add Playlists". 

 

The easiest way to embed this player on your site, is to use the "Get Code" action from the publishing tab in Brightcove, and we'll show you later how to embed a single video into your site based on a video ID.

Uploading Videos to Amazon S3 Using the SWF Upload Flash control

The next step is to upload a file from the website to your Amazon S3 account.  We will use the popular SWF Upload Control http://swfupload.org along with the Agility UGC API JavaScript library.  The following code allows for 100% client side upload of the video data to Amazon S3.  This bypasses the need to upload data to your web server and also provides a faster experience for end users.

Steps:

  1. Create a page which is authenticated for UGC data calls.
  2. Create a HTML input or TextBox where you can save the uploaded Amazon S3 url to when the SWF upload control completes the upload.
  3. When the upload is complete we will then be able to save a normal UGC record to our Video table using the “SaveRecord” JavaScript method

Below is a code snippet for an Amazon S3 upload form using the “Agility.UGC.API.GetAmazonS3Form” API Method. This method accepts the SWF upload control Flash file to provide a streamlined experience for the user. If the user does not have Flash installed, this form will default to a standard HTML upload control.

function setupVideoInputFile() { 
    var txtVideoFile = $("#txtVideoFile"); 
    txtVideoFile.val(""); 
    var inputID = txtVideoFile.attr("id"); 
    var attachmentPanel = $("div.AttachmentPanel", txtVideoFile.parent().parent()); 
    var fieldType = { MaxLength: (10 * 1024) }; 
    Agility.UGC.API.GetAmazonS3Form({ 
        fieldName: "Video", //Agility UGC Field Name 
        fieldType: fieldType, //extended properties of the field 
        inputID: inputID, //The textbox input control to save the uploaded AmazonS3 URL to when upload completed 
        fieldPanel: pnlMediaUpload, //the panel the swf uploader should be added to 
        swfUploadUrl: Agility.ResolveUrl("~/Scripts/SwfUpload/swfupload.swf"), //URL to the SWF Upload .swf file 
        uploadButtonImageUrl: Agility.ResolveUrl("~/Images/Upload.jpg"), //URL to Upload button image 
        uploadButtonImageWidth: 85, //Upload Button Image width 
        uploadButtonImageHeight: 22, //Upload Button Image Height 
        beforeUpload: function(fileName, mime, filesize, uploader) { 
            //before upload event is called before uploading the video 
            //Can verify for file extensions and file size here 
        }, 
        uploadComplete: function(key, filesize) { 
            //Upload Complete event is called when the upload is finished 
            //Can verify a successful upload before allowing user advancement 
        }, 
        uploadError: function(file, errorCode, message) { 
            //clear out our Video File URL Textbox 
            txtVideoFile.val(""); 
            alert("An Error has occured with the upload: ErrorCode-" + errorCode + ": " + message); 
        }, 
        uploadProgress: function(file, bytesLoaded) { 
            //progress event to determine how much data has been uploaded 
            var percent = Math.ceil((bytesLoaded / file.size) * 100); //add html percent complete text to a div on the current html page 
            $("#ProgressPercentage").html(percent + "%"); 
        } 
    }); 
}; 

Saving a Brightcove Video Record using the UGC SaveRecord Method

In this step you will save a new Video record to the Video table we set up previously which will include the Amazon S3 URL we received in the previous step.

Below is an example of a “SaveRecord” action using the Agility UGC JavaScript API: 

function SubmitVideo() { 
    var videoFile = $("#txtVideoFile").val(); //The AmazonS3 URL Field 
    var Title = $("#txtVideoTitle").val(); //User entered Video Title 
    var record = { ID: -1, RecordTypeName: "Videos", 
        Title: Title, 
        PostedByUsername: "Website User", 
        Video: { 
            __type: Agility.UGC.API.FileServiceMetaDataTypeName, 
            FileService: Agility.UGC.API.FileService.Brightcove, //Brightcove Type 
            OriginalFilePath: videoFile, //Amazon S3 Path 
            name: name, //The Video Title to provide to Brightcove
            shortDescription: shortDesc, //Description to provide to Brightcove 
            tags:tags, //tags for including on a playlist
            linkURL:linkURL, //optional link
            linkText:linkText,  //option link text
            videoStillURL:videoStillURL, //optional, absolute url to the poster image for the video
            thumbnailURL:thumbnailURL //optional absolute url to the thumbnail image for the video
        } 
     }; 

     Agility.UGC.API.SaveRecord(record, function(data) { 
        if (data.ResponseType != Agility.UGC.API.ResponseType.OK) { 
            alert("There was an error: " + data.Message); 
         } else { 
            alert("Video Successfully Uploaded. A moderator will approve your video shortly."); 
        } 
    }); 
}

Note: After the video is uploaded to Brightcove the Brightcove ID is saved on the UGC Record for later use (to play in the embedded Brightcove Player for example).

Displaying a Brightcove Video on the Website

In this step we will use the Agility UGC API to grab a video using a query string Record ID and display the video using an embedded Brightcove Video player.

Remember, no items will display on the website until they have been published by the moderator (see below).

The following provides an example of how select a specific video and load a Brightcove Player with JavaScript. For a more comprehensive tutorial on the Brightcove player, click here.

 
function GetVideo() 
{ 
    var recordID = getQuerystring("RecordID"); 
    Agility.UGC.API.GetRecord(recordID, function(data) { 
        if (data.ResponseType != Agility.UGC.API.ResponseType.OK) { 
            alert(data.Message); 
        } else { 
            if (data.ResponseData != null) { 
                RenderVideo(data.ResponseData); } else { 
                alert("Video could not be found"); 
            } 
        } 
    }); 
} 

function RenderVideo(Video) { 
    var params = {
        playerID = "18731190001", //this comes from your brightcove account...
        videoId = video.id,
        autoStart = "true",
        bgcolor = "#993300",
        width = "316",
        height = "267",
        params.isVid = "true"
    };

    var player = brightcove.createElement("object");
    player.id = playerName;
    var parameter;

    for (var i in params) {
        parameter = brightcove.createElement("param");
        parameter.name = i;
        parameter.value = params[i];
        player.appendChild(parameter);
    }

    var playerContainer = document.getElementById("placeHolder");
    brightcove.createExperience(player, playerContainer, true);
 } 

Review and Approval of Videos after Brightcove Submission

This step describes the Moderation steps available within the Agility Content Manager after a video has been submitted.

If the "Requires Moderation" checkbox on the Videos UGC Content definition is selected, you can view the submitted videos prior to publishing. Videos uploaded to the Videos table will wait in the “Awaiting Review” Tab until published.

  1. Go to to the Agility Content Manager (http://contentmanager.agilitycms.com)
  2. Select “User Content”
  3. Select the Videos UGC table
  4. You should see newly uploaded videos in the Awaiting Review tab and Published videos in the Published tab, etc

 

After reviewing your video in the Awaiting Review tab, if you wish to publish to your Brightcove account you can do so from Agility. The following actions apply to all UGC content definitions that require Moderation.

  1. Go to the Videos UGC table
  2. Select the video you wish to publish
  3. Click the Publish or Publish & Comment button to publish the video.  The video will now be published to Brightcove

 

When you click Publish or Publish & Comment, the video record will move to the “In Process” tab while Brightcove is processing it. When the upload to Brightcove is complete the Record will automatically move to the “Published” state at which point the video will be available within “SearchRecord” UGC API method calls.

If you need to change the properties of the video in Brightcove, you can do so by using the Brightcove Properties dialog.

In this dialog, you can change the video Title, Short Description, Long Description, Tags, Thumbnail, Poster Image, and Link URL/Text. 

The "Publish To Brightcove" action allows you to push any changes you make from this dialog to Brightcove. 

Note that changes ONLY move from Agility to Brightcove.  Agility does not pull changes from Brightcove.

Add a Comment

   
  
 
 
   
Submit

LOGIN

Log in with your Agility username and password or
register for the site




Log In

REGISTER












Register

FORGOT PASSWORD