Prebid Video | Instream Example with VideoJS

An example of an instream pre-roll ad using Cross-Player Prebid Communication Component and VideoJS.

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.


<!-- use recent version of videojs to ensure proper functioning with the iOS devices -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.4.0/video-js.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.4.0/video.js"></script>
<!-- videojs-vast-vpaid -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/videojs-vast-vpaid/2.0.2/videojs.vast.vpaid.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-vast-vpaid/2.0.2/videojs_5.vast.vpaid.min.js"></script>

<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 class="example-video-container">
<video id="vid1" class="video-js vjs-default-skin vjs-big-play-centered" controls data-setup='{}' width='640' height='480'>
  <source src="https://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'/>
  <source src="https://vjs.zencdn.net/v/oceans.webm" type='video/webm'/>
  <source src="https://vjs.zencdn.net/v/oceans.ogv" type='video/ogg'/>
</video>
</div>
<script>
var page_load_time;

page_load_time = new Date().getTime() - performance.timing.navigationStart;
console.log(page_load_time + "ms -- Player loading!");

var vid1 = videojs('vid1');

page_load_time = new Date().getTime() - performance.timing.navigationStart;
console.log(page_load_time + "ms -- Player loaded!");

function invokeVideoPlayer(url) {

  page_load_time = new Date().getTime() - performance.timing.navigationStart;
  console.log(page_load_time + "ms -- Prebid VAST url = " + url);

  /* Access the player instance by calling `videojs()` and passing
    in the player's ID. Add a `ready` listener to make sure the
    player is ready before interacting with it. */

  videojs("vid1").ready(function() {

      page_load_time = new Date().getTime() - performance.timing.navigationStart;
      console.log(page_load_time + "ms -- Player is ready!");

      /* PASS SETTINGS TO VAST PLUGIN

        Pass in a JSON object to the player's `vastClient` (defined
        by the VAST/VPAID plugin we're using). The requires an
        `adTagUrl`, which will be the URL returned by Prebid. You
        can view all the options available for the `vastClient`
        here:

        https://github.com/MailOnline/videojs-vast-vpaid#options */

      var player = this;
      var vastAd = player.vastClient({
          adTagUrl: url,
          playAdAlways: true,
          verbosity: 4,
          vpaidFlashLoaderPath: "https://github.com/MailOnline/videojs-vast-vpaid/blob/RELEASE/bin/VPAIDFlash.swf?raw=true",
          autoplay: true
      });

      page_load_time = new Date().getTime() - performance.timing.navigationStart;
      console.log(page_load_time + "ms -- Prebid VAST tag inserted!");

      player.muted(true);
      player.play();

      page_load_time = new Date().getTime() - performance.timing.navigationStart;
      console.log(page_load_time + "ms -- invokeVideoPlayer complete!");

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