Advertising monetization

You can monetize your video content by showing inline video ads like prerolls. The Bambuser player SDKs for Android, iOS and the web all allow integration with various ad network SDKs. This guide shows how to integrate the web player with a video ad network.

The BambuserPlayer mimics an HTML5 video element, so you should be able to connect it to the video ad network solution of choice, where you use a video element for ads and a Bambuser player for broadcasts. Below we show how to hook up the Google IMA SDK as an example.

Interactive Media Ads (IMA)

The below example is taken from Google IMA SDK and based on the advanced sample. The example shows you how to display prerolls, midrolls, postrolls and companion ads. Please do get familiar with the SDK before starting any implementation. Note that the below is an example and should be considered as such. It may not cover all details concerning mobile browsers. Hence you need to test it thoroughly and make necessary changes before making anything publicly available.

Steps to build your HTML

To hook up the IMA SDK you need to make sure you embed a BambuserPlayer using the JavaScript API to your web page. Import the IMA SDK and finally import javascript handling ad requests and bridging the ad player and the video player. The extent of the latter javascript depends on which ad types you want to support and how advanced you need the integration to be.

The code you need to alter in the advanced example page for ads to show is the following:

  1. Import our JavaScript API https://dist.bambuser.net/player/lib/bambuser-video-iframeapi/latest/bambuser-video-iframeapi.min.js
  2. Replace the video element with a player container
  3. Create a BambuserPlayer using BambuserPlayer.create()

The actions are numbered as comments in the example code snippet below.

Modifications to the Javascript bridge

There is only one modification you need to do to the JavaScript ad player bridge. Make sure the contentPlayer refers to the BambuserPlayer, created as step 3 above, instead of the video element, which was replaced as step 2. In IMA's advanced example the change should be made to video_player.js

var VideoPlayer = function() {
  // this.contentPlayer = document.getElementById('content'); Refer contentPlayer to the BambuserPlayer
  this.contentPlayer = player;
  ...
};

Example

The below example page is based on Googles advanced demo. To test and alter it, do the following:

  1. Copy ads.js, application.js and video_player.js and alter them to suite your needs
  2. Copy style.css and alter it to your liking
  3. Copy the page snippet below and save it to index.html
  4. Host the files on your own server, or if you have python you can run python -m SimpleHTTPServer in the directory containing your index.html and point your browser to localhost:8000
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css"/>

    <!-- 1. Import the Bambuser JavaScript API -->
    <script src="https://dist.bambuser.net/player/lib/bambuser-video-iframeapi/latest/bambuser-video-iframeapi.min.js"></script>
    <script type="text/javascript" src="https://imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
    <script type="text/javascript" src="ads.js"></script>
    <script type="text/javascript" src="application.js"></script>
    <script type="text/javascript" src="video_player.js"></script>

    <!-- GPT Companion Code -->
    <!-- Initialize the tagging library -->
     <script type='text/javascript'>
       var googletag = googletag || {};
       googletag.cmd = googletag.cmd || [];
       (function() {
         var gads = document.createElement('script');
         gads.async = true;
         gads.type = 'text/javascript';
         gads.src = 'https://www.googletagservices.com/tag/js/gpt.js';
         var node = document.getElementsByTagName('script')[0];
         node.parentNode.insertBefore(gads, node);
       })();
     </script>

     <!-- Register your companion slots -->
     <script type='text/javascript'>
       googletag.cmd.push(function() {
         // Supply YOUR_NETWORK/YOUR_UNIT_PATH in place of 6062/iab_vast_samples.
         googletag.defineSlot('/6062/iab_vast_samples', [728, 90], 'companionDiv')
             .addService(googletag.companionAds())
             .addService(googletag.pubads());
         googletag.companionAds().setRefreshUnfilledSlots(true);
         googletag.pubads().enableVideoAds();
         googletag.enableServices();
       });
     </script>

    <title>IMA HTML5 SDK Advanced Demo</title>
  </head>
  <body>
  <div id="container">
    <div id="videoplayer">
      <!-- 2. Replace video tag with a container which should be populated by a BambuserPlayer. -->
      <div id="player"></div>
      <div id="adcontainer">
      </div>
      <button id="playpause" title="Play/Pause">&#9654;</button>
      <button id="fullscreen" title="Full screen">[&nbsp;&nbsp;&nbsp;]</button>
    </div>

    <!-- Declare a div where you want the companion to appear. Use
          googletag.display() to make sure the ad is displayed. -->
    <div id="companionDiv">
      <script type="text/javascript">
        // Using the command queue to enable asynchronous loading.
        // The unit will not actually display now - it will display when
        // the video player is displaying the ads.
        googletag.cmd.push(function() { googletag.display('companionDiv'); });
      </script>
    </div>
  </div>
  <script type="text/javascript">
  // 3. Create a Bambuser player using desired settings and populate the container element.
  var resourceUri = 'https://cdn.bambuser.net/broadcasts/ec968ec1-2fd9-f8f3-4f0a-d8e19dccd739';
  resourceUri += '?da_signature_method=HMAC-SHA256&da_id=432cebc3-4fde-5cbb-e82f-88b013140ebe&da_timestamp=1456740399';
  resourceUri += '&da_static=1&da_ttl=0&da_signature=8e0f9b98397c53e58f9d06d362e1de3cb6b69494e5d0e441307dfc9f854a2479';
  var player = BambuserPlayer.create(document.getElementById('player'), resourceUri);
  player.controls = false;

  var application = null;

  window.onload = function() {
    application = new Application();
  };
  </script>
  </body>
</html>

If nothing else is noted the code samples for ad integration are licensed under the Apache 2.0 License.