Attention!
The BitsOnTheRun video hosting service has been discontinued and replaced by JW Player.
Since this article was written we now support video ad serving through all VAST 2.0
compliant digital video players. Please see our series of articles covering
VAST for more up to date information.

What is Bits on the Run?

Bits on the Run manages the complete video workflow: upload, transcode, stream, and analyze. They handle the complexities so that you don’t have to. With just a
few clicks you can design your own video player, encode to multiple bitrates, deliver to multiple platforms/devices, and more. In this blog post we’re going to be
looking specifically at how to create a video player for displaying video banner ads.

Creating a Free Account

  1. Open your browser to http://www.bitsontherun.com/
  2. Click on the Free Account button
  3. Enter your E-mail Address and create a Password
  4. Wait a minute and then check your e-mail for a message from Bits on the Run. Click on the Activate Your Account button contained in that
    message to activate your account
  5. You will then be logged in to your new account

Uploading a Video

  1. Click on the green Upload a Video button on the home page
  2. Click Browse to locate the video file on your computer. It can be in any format. If you don’t have a video to test with you can
    download the QuickTime trailer for
    Big Buck Bunny, which we’ll be using in this example. After you’ve selected the file press the Upload button.
  3. Once the file finishes uploading you can enter some information about the video such as a title, description and the date it was produced

Creating a Custom Player

  1. Click on the Players tab at the top of the page
  2. Make a copy of the 4:3 example player by pressing the duplicate button to the right of the player’s name in the list of available player configurations (see below)
    Duplicating the example player
  3. Click on the 4:3 example player (copy) you just created in the list of available player configurations.
  4. Change all of the following settings and then press the Save button when you are done.
    Video Player General Properties
    Video Player Layout Properties
    Video Player Behavior Properties
    Video Player Custom Properties

Generating the Video Embed Code

  1. Click on the Videos tab at the top of the page
  2. Then press the embed button to the right of the video’s name in the list of available videos (see below)Video Listing
  3. Change the Player to the new 336×280 Banner Player that you created (see below).Video Embed Code
  4. Copy the HTML code from the Embed Code box, which should look like the following:
    <script src="http://content.bitsontherun.com/players/KFLTjIVN-g3oqV69i.js" type="text/javascript"></script>
  5. Next, you want to append the following code to it (this enables click tracking with the clickproxy plugin):
    <script type="text/javascript">
    function clickListener (obj) {
      window.location.replace('%%CLICKLINK%%http://www.example.com/');
    }
    </script>
  6. Change http://www.example.com/ to the URL you want the video to redirect to when clicked on. Leave the %%CLICKLINK%% variable in front of the URL to enable click tracking. Also, if the URL contains a query string it should be URL encoded before inserting it into the code!
  7. Now you should have a completed video embed code with click tracking support that looks like this:
    <script type="text/javascript" src="http://content.bitsontherun.com/players/KFLTjIVN-g3oqV69i.js"></script>
    
    <script type="text/javascript">
    function clickListener (obj) {
      window.location.replace('%%CLICKLINK%%http://www.bigbuckbunny.org/');
    }
    </script>

Creating the Media

  1. Log in to AdvertPro and click on Media in the toolbar
  2. Click on the Create New Media link
  3. Enter a Name for you media, select the Advertiser, choose HTML banner for the media type and 336×280 for the size. Creating the Media
  4. Paste the video embed code into the Local HTML Content box Creating the Media
  5. Press the Create Media button to complete the process

The Final Result

At this point you can preview the media to watch your new video ad! Click on the picture below to watch the one that I created.

Preview the Video

Remember to try clicking on it. If the click tracking is working properly you will be redirected to the Big Buck Bunny movie home page.