Upload Videos within Your CMS

We recently updated our API to support video uploads with a regular HTML form. Using this method, it now is extremely easy to upload content to your Bits on the Run account. This method also ensures the video goes directly from the client to our server, not passing through yours. On top of that, we added progress polling to our upload server. This allows you to display a progress bar in your application by polling our server with a little bit of AJAX.

Introduction

A video upload to Bits on the Run consists of a few steps. These are described in detail in the API documentation. Here's a high-level overview:

• First, the client does a /videos/create API call. This call sets up our server to receive the video. The server returns an object with upload data.
• Second, the client uses the returned object to construct an upload URL. The video upload form should be posted to this URL.
• Third, the client posts the video to the upload URL. Using JavaScript, the upload progress can be displayed.
• Fourth, after the upload has completed the server redirects to a page on the client's site again. The client can display an Upload completed message on this redirected page and show more info on the uploaded video.

Demo

Since actual code always work better than words, here's a demo of the upload process. It uses PHP for the serverside and jQuery for the clientside scripting. The full code of this demo is included in the PHP API Examples download.

In the following section, we'll re-build this upload demo.

Upload Page Setup

Let's start with an upload page (e.g. "index.php"). As always, we first include and initialize the PHP API Kit. The kit takes care of serializing and sending all API calls. Replace the xxxx and yyyy part with your account key and secret, which can be copy/pasted from the account page of the CMS.

require_once('botr/api.php');
$botr_api = new BotrAPI('xxxx','yyyyyyyy');

Next, we'll do a /videos/create API call. This call returns a link object we can use to construct the actual upload URL. Note that the token is attached as last parameter to the upload URL. This is needed to do any JavaScript progress polls. Also note that the redirect-address is the page the server will redirect to after the upload has finished. In this case, it's a show.php file in the same directory.

$response = $botr_api->call('/videos/create');
if ($response['status'] == 'error') { die(print_r($response)); }
$url  = 'http://'.$response['link']['address'].$response['link']['path'];
$url .= '?key='.$response['link']['query']['key'];
$url .= '&api_format=xml';
$url .= '&redirect_address=http://'.$_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"].'show.php';
$url .=  '&token='.$response['link']['query']['token'];

With the upload URL set up, we can construct the actual HTML upload form. The upload URL is printed in the action attribute of the form. Note the file input element must be named file.

<form id="uploadForm" action="<?=$url?>" method="POST" enctype="multipart/form-data">
  <fieldset>
    <label>Select video</label>
    <input id="uploadFile" type="file" name="file" />
    <button type="submit" id="uploadButton">Upload</button>
  </fieldset>
</form>

Redirect page setup

With the upload page done, we can take a look at the redirect page. Again, this page should start by initializing the BOTR API.

require_once('botr/api.php');
$botr_api = new BotrAPI('xxxx','yyyy');

Next, this page can grab the video_key from the HTTP GET array and use it to call for info on the uploaded file. Our upload server always sends the video_key to a redirect page. Subsequently, the PHP simply pushes all properties of the video in a fieldset.

$video_key = $_GET['video_key'];
$response = $botr_api->call('/videos/show', array('video_key'=>$video_key));
if ($response['status'] == 'error') { die(print_r($response)); }
$properties = '';
foreach($response['video'] as $key =>$val) {
    $properties .= "<label>".$key."</label><p>".$val."</p>";
}

The only thing left is to print all data in HTML.

<form>
  <div id="preview">
    <a href="http://content.bitsontherun.com/previews/<?=$video_key?>-ALJ3XQCI" target="_blank">
      <img src="img/processing.gif" alt="<?=$video_key?>" id="pollThumb" />
    </a>
  </div>
  <fieldset id="pollProps">
    <?=$properties?>
  </fieldset>
</form>

Adding JavaScript

With all the PHP code in place, we have a working video upload application. This is fine by itself, but some additional JavaScripting will greatly improve the user experience. These JavaScripts are included in the PHP API Examples download and will take care of:

• Displaying upload progress on the upload page. JavaScript will inject a progress DIV into the upload form and start an AJAX polling process. The progress div is resized from 0% to 100% during the upload, giving the user visual feedback. This script is built on top of jQuery.
• Updating the video status on the redirect page. JavaScript will poll for the video status and display a thumbnail of the video when available. If the first conversion is done, JavaScript will also display a preview page link. This script is built on top of jQuery and a separate PHP file that does the actual API call.

We'll not walk through the JavasSripting in this tutorial, but note you can simply include the script references in the head of your page to get things working. Both the upload and redirect page continue to work fine without any JavaScripting.

As always, if you have questions or additional code you want to share, please post to our support forum.