Prebid Video | Instream Example with JW Player (Platform)

An example of an instream pre-roll ad using Cross-Player Prebid Communication Component 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!

To allow the Cross-Player plugin to load your custom build of Prebid.js ensure that the option key `prebidPath` is set to the custom build's location. If `prebidPath` is not set, the plugin will point to `//cdn.jsdelivr.net/npm/prebid.js@latest/dist/not-for-prod/prebid.js`.

Place this code in the page header.


<script type="text/javascript">
var options = {
  biddersSpec: {
    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: 'appnexus',
        params: {
          placementId: '13232361'  // Add your own placement id here

        }
      }
    ]
  },
  prebidConfigOptions: {
    cache: {
      url: 'https://prebid.adnxs.com/pbc/v1/cache'
    }
  },
  dfpParameters: {
    params: {
      iu: '/19968336/prebid_cache_video_adunit',
      cust_params: {
        section: "blog",
        anotherKey: "anotherValue"
      },
      output: "vast"
    }
  },
};
function doHeaderBidding() {
  window.prebidPluginCP.doPrebid(options);
}

</script>
<script src="//acdn.adnxs.com/video/plugins/cp/PrebidPluginCP.min.js" onload="doHeaderBidding()"></script>

Place this code in the page body.

  
  <div id="myElement1"></div>

  <!-- 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,
              // 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
              },
          });
      }

      var messageId = 100;
      var getVastUrl = function() {
        var message = {
          command: 'PPCP:prebidRequest',
          messageId: ++messageId
        };
        return new Promise(function(resolve) {
          var listener = function(event) {
            if (event && event.data) {
              var data = JSON.parse(event.data);
              if (data.command === 'PPCP:prebidResponse' && data.messageId === messageId) {
                window.removeEventListener('message', listener);
                if (data.url && data.url != 'failed') {
                  resolve(data.url);
                }
                else {
                  resolve(null);
                }
              }
            }
          };
          window.addEventListener('message', listener);
          top.postMessage(JSON.stringify(message), '*');
          setTimeout(function() {
            window.removeEventListener('message', listener);
            resolve(null);
          }, 2000);
        })
      };

      getVastUrl().then(function(url) {
        invokeVideoPlayer(url);
      })
      .catch(function() {
        invokeVideoPlayer(null);
      });
  </script>