Video Ads with Bits on the Run

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)
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.

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)
3. Change the Player to the new 336x280 Banner Player that you created (see below).
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 336x280 for the size.
4. Paste the video embed code into the Local HTML Content box
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.

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.