Generate Player Embed Codes

When building Bits on the Run into your own website or CMS, one of the most important functionalities is the generation of player embed codes. These codes can either be directly printed on the page, or offered in a textbox, so your users can copy-paste them. In this tutorial, we'll build an embed code generator using our API and the PHP API Kit.

Introduction

Let's look at the typical player embed code:

<script type="text/javascript" src="http://content.bitsontherun.com/players/nPripu9l-ALJ3XQCI.js"></script>

The URL of the player itself is what's most interesting here; the wrapping JavaScript tag is always the same. The url consists of five parts:

• The contentserver root. This is usually content.bitsontherun.com, but it is another domain if you use DNS Masking.
• The path to players, /players/. Note the URL scheme serves other stuff you can access too, like videos, thumbs and feeds.
• The key of the video you want to embed, nPripu9l. This is an 8 character string that can be found in the videos overview and details pages in the CMS. It can also be retrieved through the API, which is what we'll do in this tutorial.
• The key of the player you want to embed the video with, _ ALJ3XQCI_. This is an 8 character string that can be found in the players overview and details pages in the CMS. It too can be retrieved through the API (see below).
• The extension of the player, which can be .js or .swf. With the latter, you can create embed embed codes. These do not contain fallbacks and JavaScript API hooks though. The .js embed code is preferred.

Only the key and id part of the embed code change depending on the videos/players you embed. The other parts always remain the same. In order to get this dynamic data, we use two API calls:

• /videos/list: retrieves a list of videos from your account (including their key).
• /players/list: retrieves all players from your account (including their id).

Demo

The script we're going to build in this tutorial mimicks the embed code form in the Bits on the Run CMS. You can see it in action here, utilizing the videos and players from our demo account:

You can download this embed-code script as part of the PHP API Examples ZIP.

Setup

First, as with any script, we include and initialize the PHP API Kit, which can be freely downloaded from our integrations page. 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');

Second, we'll do the API calls to retrieve both the videos and players. Note that the /videos/list API call has options for filtering. The /players/list call is very bare bone.

$response1 = $botr_api->call("/videos/list");
$response2 = $botr_api->call("/players/list");

Third, we construct the embed code. If any $_GET data is available (in other words: if the form has been submitted already), we use that player/video to build the code. If not, we use the first video and first player from the API call:

$video = (isset($_POST['video'])) ? $_POST['video']: $response1['videos'][0]['key'];
$player = (isset($_POST['player'])) ? $_POST['player']: $response2['players'][0]['id'];
$script = 'http://content.bitsontherun.com/players/'.$video.'-'.$player.'.js';

Last, we print the entire HTML form. This is all static HTML, except for the video / player dropdown boxes and the script tag. We fill those with the PHP variables:

<form method="post">
  <fieldset>
  <label>Video to embed</label>
  <select name="video" id="embedVideo">
    <? # Loop through all videos to put them in a dropdown.
    foreach ($response1['videos'] as $vid) {
      $sel = ($vid['key'] == $video) ? 'selected="selected"': '';
      echo '<option value="'.$vid['key'].'" '.$sel.'>'.$vid['title'].'</option>';
    } ?>
    </select>
    <label>Player to use</label>
    <select name="player" id="embedPlayer">
    <? # Loop through all players to put them in a dropdown.
      foreach ($response2['players'] as $ply) {
        $sel = ($ply['key'] == $player) ? 'selected="selected"': '';
        echo '<option value="'.$ply['key'].'" '.$sel.'>'.$ply['name'].'</option>';
      } ?>
    </select>
    </fieldset>
    <fieldset>
        <label>Embed code</label>
        <input type="text" name="code" id="embedCode" value='&lt;script type="text/javascript" src="<?=$script?>"&gt;&lt;/script&gt;' />
        <small>Copy-paste this code to your website to embed the video.</small>
        <button type="submit" id="embedButton">regenerate</button>
    </fieldset>
</form>

Once again note the full embed-code script can be downloaded as part of the PHP API Examples ZIP.

Next Steps

There is a variety of ways in which this script can be extended. Two suggestions have been implemented in the embed code demo:

• Next to the embed code, a preview link can be shown. Using the same variables, the link to a simple preview page can be constructed. To even further pimp this up, you could load the preview in a lightbox-style popup instead of in a new window.
• Instead of doing a real submit of the embed code form, the embed code can also be updated every time the video or player dropdown is changed. Some JavaScripting - built on top of jQuery - takes care of that in our demo. It hides the submit button, updates the embed code and subtly highlights the embed code field to notify users something has changed.

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