Integrating Panda with your PHP application

The following is a guide to integrating Panda into your PHP application. Before continuing you must have a Panda account. If you haven't got one yet, you can [sign up here](http://www.pandastream.com/signup). Free accounts are available, great for playing around.

The easiest way to integrate Panda into your application is by using the open source libraries that we provide. On this example, our PHP API library, panda_client_php.

The example application

This documentation will talk you through the process integrating Panda with a basic PHP application. It will use the libraries linked above.

You can view the code of the complete PHP example At the time of writing, there are three examples. This article covers the one labelled as simple.

Configuration

First you must log in to your account, where you can find your credentials as follows:

• Under Account: Access key, Secret key, API URL
• Under Clouds: Cloud ID

If you haven’t yet created an encoding cloud you should do so before continuing.

PRO TIP: you may want to create two different clouds, one for development and one for production. Note that each cloud will have a different Cloud ID, but the other credentials will be shared across all clouds.

Once equipped with this information, you can create a Panda client using the PHP library:

$panda = new Panda(array(
    'api_host'   => 'api.pandastream.com', // Use api-eu.pandastream.com if your account is in the EU
    'cloud_id'   => 'my-cloud-id',
    'access_key' => 'my-access-key',
    'secret_key' => 'my-secret-key',
));

This will give you a $panda object that you can use to interact with Panda. For more info, see the documentation of the library on GitHub.

Checking that everything is working

Let’s write a simple script that uses the above configuration. Copy the following after the initialisation code:

$video = $panda->post('/videos.json', array(
    'source_url' => 'http://panda-test-harness-videos.s3.amazonaws.com/panda.mp4'
));
echo "<p>Video details as received from Panda:</p>\n";
echo "<pre>\n" . print_r($video, true) . "\n</pre>\n";

The code above should print out an array containing info about the video. This means that Panda is working on it right now!. All is working correctly so far.

Implementing video uploads into your application

The simplest way to begin uploading videos directly to Panda is using the panda_uploader jQuery plugin. The plugin will automatically detect the user’s browser and provide the user with the best upload method supported. On modern browsers (Safari, Firefox or Chrome), the upload will be done using several advanced features of HTML5. If the browser doesn’t support these, the uploader will automatically fallback to a Flash-based solution using SWFUpload.

Both methods provide the same UI for upload progress, however the upload button will be slightly different. HTML5 uses a native file select form element, and SWFUpload uses an image. To see how to customise those, have a look at the panda_uploader documentation.

In summary, the plugin renders a widget next to a hidden form element. Once an upload is complete, the ID of the new video will be inserted into this hidden field. This ID can then be saved in your application, and will be used to reference the video in Panda later.

Create an upload page

Somewhere in your application you can create the form where the upload will take place. Copy the following code into your PHP page:

<form action="/player.php">
    <!-- file selector -->
    <span id="upload_button"></span>

    <!-- filename of the selected file (optional) -->
    <input type="text" id="upload_filename" class="panda_upload_filename" disabled="true" />

    <!-- upload progress bar (optional) -->
    <div id="upload_progress" class="panda_upload_progress"></div>

    <!-- field where the video ID will be stored after the upload -->
    <input type="hidden" name="panda_video_id" id="returned_video_id" />

    <!-- a submit button -->
    <p><input type="submit" value="Upload video" /></p>

    <script>
    var panda_access_details = <?php echo json_encode(@$panda->signed_params("POST", "/videos.json", array())); ?>;
    jQuery("#returned_video_id").pandaUploader(panda_access_details, {
      upload_progress_id: 'upload_progress',
      api_url: '<?php echo $panda->api_url() ?>',
      uploader_dir: '/panda_uploader', // This is the default value
    });
    </script>
</form>

Additionally, you need to reference jQuery and the uploader script:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://cdn.pandastream.com/u/1.4/jquery.panda-uploader.min.js"></script>

Change VERSION to the version number you have downloaded. Please note that jQuery must be version 1.3 or later.

The code above assumes after posting the form, you’ll go to the page /player.php

When the form above is correctly created, a button labeled “Choose file” will appear. Click this to select a file from your filesystem. Then press “save” and the video will be uploaded with a nice progress bar.

Behind the scenes, the uploader will retrieve the ID of the uploaded video. This will be used to fill out the hidden panda_video_id. Finally, the form will be actually submitted to the player.php page.

But we don’t have a player.php page yet!!!

Create a player page

You can create a simple player using HTML5, which will be usable with the latest browsers. For other browsers, you can use your Flash player of choice instead. But now the example:

<?php
$video_id = $_GET['panda_video_id']; // Coming from the previous form
$all_encodings = json_decode(@$panda->get("/videos/$video_id/encodings.json"));
$vid = $all_encodings[0];
$vid->url = "http://YOUR-S3-BUCKET-NAME.s3.amazonaws.com/{$vid->path}{$vid->extname}";
?>
<div>
    <video id="movie" width="<?php echo $vid->width ?>" height="<?php echo $vid->height ?>" preload="none" controls>
      <source src="<?php echo $vid->url ?>" type="video/mp4">
    </video>
</div>

That simple. This code assumes that you come from the form described above, and the ID of the video will therefore be in the $_GET variable, set by the form.

Note that you’ll also have to put the name of your S3 bucket in place of the YOUR-S3-BUCKET-NAME text, so the URL to the encoded video can be correctly constructed.

Give it a whirl!

Go to the form page and use the form to select a video file. Click “save” and watch it upload.

After the upload process finishes, you’ll be taken to the player page. If everything worked correctly, you will notice the ?panda_video_id=LARGE-ID-STRING bit on the URL. This is how the form is letting the player know what the ID of the video is.

On this player page, the video may not necessarily appear automatically, as the result may take a bit to be encoded, depending on the size of the file and other factors. Just reload the page a few times until you see the video on the player.

If there is an error when uploading, it’s most likely because the authentication signature is incorrect. Double check you have entered the correct values for the access key, secret key and cloud id.

Using a Flash player

If you need to support older browsers, you can also offer a Flash player. There are several options including JW Player and Flowplayer. The instructions below are for using JW Player.

Download JW Player, unzip it, and copy player.swf and swfobject.js to the root of your application’s public folder.

Edit the header to include the following:

<script src="/swfobject.js"></script>

And add the following to the body of the page:

<div id='flash_player'>Flash player will appear here</div>
<?php
$video_id = $_GET['panda_video_id']; // Coming from the previous form
$all_encodings = json_decode(@$panda->get("/videos/$video_id/encodings.json"));
$vid = $all_encodings[0];
$vid->url = "http://YOUR-S3-BUCKET-NAME.s3.amazonaws.com/{$vid->path}{$vid->extname}";
?>

<script type='text/javascript'>
  var so = new SWFObject('/player.swf','mpl','<?php echo $vid->width; ?>','<?php echo $vid->height; ?>','9');
  so.addParam('allowfullscreen','true');
  so.addParam('allowscriptaccess','always');
  so.addParam('wmode','opaque');
  so.addVariable('file','<?php echo $vid->url ?>');
  so.write('flash_player');
</script>

If you refresh the show page you’ll see the encoded video inside JW Player. This will work on almost any browser with a recent installation of Flash.

Advanced topics

Encoding Profiles

You can change the formats that Panda encodes videos into by logging in to your Panda account. Each Cloud has its own set of Profiles. You can select from preconfigured presets, or create your own by customising the arguments to ffmpeg. To learn more, see the sections on Encoding Profiles and Advanced Profiles.

It’s possible to define several profiles and then decide on a per-video basis which ones to use. When creating your signed params for the panda_uploader, you can specify each profile id that you want to use, separated by a comma:

<?php $panda->signed_params('POST', "/videos.json", array(
    'profiles' => '756a30a27e1ce34c226a373601fcecf8,db867c70a8105cd4ff74ad3501a3022f', 
)); ?>

Learn more

The above only covers a portion of what Panda can do for you. Check the API documentation and the PHP client to see all the options available.