Prebid Video | Instream Example with Brid Player

An example of an instream pre-roll ad using Prebid.js and Brid 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>

<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',
                playerSize: [640, 480],
                mimes: ['video/mp4'],
                protocols: [1, 2, 3, 4, 5, 6, 7, 8],
                playbackmethod: [2],
                skip: 1
        }
      },
      bids: [
        {
          bidder: 'appnexusAst',
          params: {
            placementId: '13232361' // Add your own placement id here

          }
        }
      ]
    };

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

      pbjs.addAdUnits(videoAdUnit);

      pbjs.setConfig({
        usePrebidCache: 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);
          }
      });
    });

    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>

Place this code in the page body.


<div id="myDiv" class="brid" style="width:640px; height:360;"></div>

<script type="text/javascript">
  invokeVideoPlayer = function(url) {
  $bp("myDiv", {"id":"17041","width":"640","height":"360","video":"400684",
  "Ad": [
          {
              "mobile": url, // Array of url's will get called in succession
              "desktop": null, // Array of url's will get called in succession
              "adType": "0", // Type 0 for pre roll
              "adTimeType": "s",
              "overlayStartAt": null,
              "overlayDuration": null,
              "cuepoints": null
          }
      ]
  });
  }
  </script>