⚠️  Sunset Notice: This service will be discontinued as of September 30th, 2023.  Learn more »

Did you come here for Live Video Shopping?

This is documentation for Bambuser Live Streaming SDK.

If you're looking for documentation regarding Live Video Shopping (opens new window) , see these pages (opens new window)

How to monetize live video using ads

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 JavaScript player 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 (opens new window) as an example.

Interactive Media Ads (IMA)

The below example is taken from Google IMA SDK (opens new window) and based on the advanced (opens new window) 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 player using the JavaScript API on your web page. Import the IMA SDK (opens new window) 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 (opens new window) for ads to show is the following:

  1. Import our JavaScript API bambuser-video-iframeapi.min.js (opens new window)
  2. Replace the video element with a player container
  3. Create a BambuserPlayer instance using BambuserPlayer.create()

The actions above are shown as comments in the example code further down.

Modifications to the JavaScript bridge

The only modification needed in the ad player bridge is to ensure the contentPlayer refers to the BambuserPlayer, created 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 (opens new window)

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 (opens new window). 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 as index.html
  4. Host the files on your web server

TIP

For quickly starting a web server using Python, run python -m SimpleHTTPServer in the directory where you placed the files, then point your browser to http://localhost:8000 (opens new window)

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css"/>

    <!-- 1. Import the Bambuser JavaScript API -->
    <script src="https://cdn.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 (opens new window).