Prebid.JS Example Implementation

This page is an example of using Prebid Video with a Brid player.

This page contains:

  • Setting up Brid player to dynamically play ads.
  • Using a cloud-hosted player.
  • Dynamically insert a preroll ad into the player.
Example

Add the following script tags in the head area of your web page:

  <!-- prebid.js -->
  <script src="https://acdn.adnxs.com/prebid/not-for-prod/prebid.js" async=true></script>

  <!-- Brid Player -->
  <script type="text/javascript" src="//services.brid.tv/player/build/brid.min.js"></script>

<script>
    var pbjs = pbjs || {};
    pbjs.que = pbjs.que || [];

    // define invokeVideoPlayer in advance in case we get the bids back from prebid before the entire page loads
    var tempTag = false;
    var invokeVideoPlayer = function(url){
      tempTag = url;
    }

    /*
    Prebid Video adUnit
    */

    var videoAdUnit = {
      code: 'video1',
      sizes: [640,480],
      mediaTypes: {
        video: {
          context: "instream"
        }
      },
      bids: [
        {
          bidder: 'appnexusAst',
          params: {
            placementId: '9333431', // Add your own placement id here
            video: {
              skipppable: true,
              playback_method: ['auto_play_sound_off']
            }
          }
        }
      ]
    };

    pbjs.que.push(function(){
      pbjs.addAdUnits(videoAdUnit); // add your ad units to the bid request

      pbjs.setConfig({ 
        usePrebidCache: true 
      });

      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);
          }
      });
    });

    pbjs.bidderSettings =
    {
        standard: {
            adserverTargeting: [
                {
                    key: "hb_bidder",
                    val: function (bidResponse) {
                        return bidResponse.bidderCode;
                    }
                }, {
                    key: "hb_adid",
                    val: function (bidResponse) {
                        return bidResponse.adId;
                    }
                }, {
                    key: "hb_pb",
                    val: function (bidResponse) {
                        return "10.00";
                    }
                }, {
                    key: "hb_size",
                    val: function (bidResponse) {
                        return bidResponse.size;

                    }
                }
            ]
        }
    };

  </script>

Add the following code on your web page where you wish the player to display.

    <div id="myDiv" class="brid" style="width:640px; height:480px;" itemprop="video" itemscope itemtype="http://schema.org/VideoObject"> </div>
    <script type="text/javascript">
      invokeVideoPlayer = function(url) {
        $bp("myDiv", {"id":"PLAYER_ID","width":"640","height":"360","video":"VIDEO_ID",
        "Ad": [
                {
                    "adTagUrl": url, //Will get called in succession on mobile and desktop if the flashAdTagURL is left empty. If the below param is populated, the ad tags here will get called on mobile only.
                    "flashAdTagUrl": null, // Will get called in succession on desktop only
                    "adType": "0", // Type 0 for pre roll
                    "adTimeType": "s",
                    "overlayStartAt": null,
                    "overlayDuration": null,
                    "cuepoints": null
                }
            ]
        }); 
      }
    </script>