Prebid Video | Prebid Server Example with JW Player (Platform)

An example of a pre-roll ad using Prebid Server and JW Player (Platform).

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>
      var pbjs = pbjs || {};
      pbjs.que = pbjs.que || [];

      /* 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: 13232361  // Add your own placement id here.

              }
          }]
      };

      pbjs.que.push(function() {

          // configure prebid to use prebid cache and prebid server 
          // make sure to add your own accountId to your s2sConfig object

          pbjs.setConfig({
              cache: {
                  url: 'https://prebid.adnxs.com/pbc/v1/cache'
              },
              debug: true,
              s2sConfig: {
                  endpoint: 'https://prebid.adnxs.com/pbs/v1/openrtb2/auction',
                  enabled: true,
                  accountId: 'c9d412ee-3cc6-4b66-9326-9f49d528f13e',
                  bidders: ['appnexus']
              }
          });

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


          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.


<!-- This line loads a player without loading any video content -->
<!-- Replace this with the correct url for your player -->
<script src="YOUR_JW_URL"></script>
<script>
    // we initialize our player instance, specifying the div to load it into

    var playerInstance = jwplayer('myElement1');

    function invokeVideoPlayer(url) {
        // this calls setup on the player we initialized 
        // this will use the settings defined in the player we loaded above unless you override them here

        playerInstance.setup({
            "file": "https://vjs.zencdn.net/v/oceans.mp4",
            // or "file" could be replaced with "playlist" and a URL
            // from your JW Platform account in either json or rss format.
            "width": 640,
            "height": 480,
            "autostart": true,
            "mute": true,
            // we enable vast advertising for this player

            "advertising": {
                "client": "vast",
                // url is the vast tag url that we passed in when we called invokeVideoPlayer in the header

                "tag": url
            }
        });
    }

    if (tempTag) {
        invokeVideoPlayer(tempTag);
        tempTag = false;
    }

</script>