Prebid Video | Instream Example with Brightcove Player

An example of an instream pre-roll ad using Prebid.js and Brightcove player.

Important: This example uses a test version of Prebid.js hosted on our CDN that is not recommended for production use. It includes all available adapters. Production implementations should build from source or customize the build using the Download page to make sure only the necessary bidder adapters are included.

Warning: Do not forget to exchange the placementId in the code examples with your own placementId!

Place this code in the page header.


<script async src="//cdn.jsdelivr.net/npm/prebid.js@latest/dist/not-for-prod/prebid.js"></script>

<!--brightcove & prebid js code-->
<script>
  var pbjs = pbjs || {};
  pbjs.que = pbjs.que || [];
  iosDevice = !!navigator.platform.match(/iPhone|iPod|iPad/);

  /* PRE-DEFINE `invokeVideoPlayer`

    Because we have no way of knowing when all the bids will be
    returned from Prebid we can't be sure that the browser will
    reach the point where `invokeVideoPlayer` is defined before
    `bidsBackHandler` fires and tries to call it.

    To prevent an "`invokeVideoPlayer` not defined" error, we
    pre-define it before we make the call to Prebid, and redefine
    it later on with the code to create the player and play the
    ad.

    In this first version, it simply stores the winning VAST to
    use later. */

  var tempTag = false;
  var invokeVideoPlayer = function(url) {
    tempTag = url;
  }

  var videoAdUnit = {
    code: 'video1',
    mediaTypes: {
      video: {
        context: 'instream',
        playerSize: [640, 480],
        mimes: ['video/mp4'],
        protocols: [1, 2, 3, 4, 5, 6, 7, 8],
        playbackmethod: [2],
        skip: 1
      }
    },
    bids: [{
      bidder: 'appnexus',
      params: {
        placementId: iosDevice ? 13239390 : 13232361 // Add your own placement id here.
      }
    }]
  };

  pbjs.que.push(function() {
    pbjs.addAdUnits(videoAdUnit);
    pbjs.setConfig({
      debug: true,
      cache: {
        url: 'https://prebid.adnxs.com/pbc/v1/cache'
      }
    });
    pbjs.requestBids({
      bidsBackHandler: function(bids) {
        var videoUrl = pbjs.adServers.dfp.buildVideoUrl({
          adUnit: videoAdUnit,
          params: {
            iu: '/19968336/prebid_cache_video_adunit',
            cust_params: {
              section: 'blog',
              anotherKey: 'anotherValue'
            },
            output: 'vast'
          }
        });
        invokeVideoPlayer(videoUrl);
      }
    });
  });

</script>

Place this code in the page body.


<!-- INCLUDE PLAYER AND IMA3 PLUGIN SCRIPTS

First, include the player script from Brightcove. This will
also be part of the embed code provided by Video Cloud. Then
include the ima3 plugin script.

Since we are not configuring the plugin in Video Cloud, we
need to include this script on the page.  -->

<script src="//players.brightcove.net/5530036758001/HJMTvh2YZ_default/index.min.js"></script>
<script src="//players.brightcove.net/videojs-ima3/2/videojs.ima3.min.js"></script>

<script type="text/JavaScript">

    // REDEFINE `invokeVideoPlayer`

  function invokeVideoPlayer(url) {

      // USE `bc()` TO REFERENCE VIDEO PLAYER, PASS OPTIONS INTO IMA3 PLUGIN

    bc("myVideo").ima3({
      serverUrl: url,
      debug: true,
      timeout: 5000,
      ima3SdkSettings: {
          "disableCustomPlaybackForIOS10Plus": true
        },
        adTechOrder: [
          "html5",
          "flash"
        ],
    });

    // ADD A `ready` LISTENER AND INTERACT WITH THE PLAYER  

    //   Call `videojs()` and pass in the ID of the video element to  
    //   get a reference to the player. Call `.ready` on the player  
    //   to set up the event listener, and place any code that will  
    //   interact with the player inside the callback (such as   
    //   loading media files, logging events for the player or ads). 


    videojs("myVideo").ready(function() {
      var myPlayer = this;

      // LOAD THE MEDIA FILE  

      //   Once we know the player is ready and we have our prebid ad  
      //   ready, load the content video from Brightcove Studio.  

      //   Replace this ID with the ID with one of your own media file IDs  
      //   which can be found in your Brightcove Studio account. 


      myPlayer.catalog.getVideo("5530880848001", function(error, video){
        myPlayer.catalog.load(video);
        if(error) {
            console.log("There was an error retrieving the media file: " + error);
        }
        });

        myPlayer.on("ima3error", function() {
        console.log("There was an ima3 error.");
        });
    });
   };

  // ACCOUNT FOR PAGE SPEED  

  //   If prebid returned bids before the browser reached the end of  
  //   the page, the first version of `invokeVideoPlayer` will have  
  //   been called from `bidsBackHandler` so the winning vast tag  
  //   will be stored in `tempTag`.  

  //   If that's the case, we want to call the 'real' version of  
  //   `invokeVideoPlayer` with the stored url to create the player  
  //   and play the ad.  

  //   If `tempTag` is not defined, that means the browser reached  
  //   the end of the page before the bids came back from prebid,  
  //   meaning the 'real' version of `invokeVideoPlayer` was already  
  //   called. 


  if (tempTag) {
    invokeVideoPlayer(tempTag);
    tempTag = false;
  }
  </script>