Prebid Video | Instream Example with Kaltura

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

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 `//acdn.adnxs.com/prebid/not-for-prod/1/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"
      }
    },
    bids: [
      {
        bidder: 'appnexus',
        params: {
          placementId: '13232361', // Add your own placement id here
video: { skipppable: true, playback_method: ['auto_play_sound_off'] } } } ] }, 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="myPlayer" style="width:640px; height:480px;"></div>
<!-- INCLUDE KALTURA PLAYER SCRIPT

Add the script for your Kaltura player. This will be part of
the code you will copy-paste from Kaltura. -->

<script src="http://cdnapi.kaltura.com/p/2222001/sp/222200100/embedIframeJs/uiconf_id/37440401/partner_id/2222001"></script>

    <script type="text/javascript">
     invokeVideoPlayer = function(url) {

       /* EMBED KALTURA PLAYER

         Call `kWidget.embed()` and pass in a JSON object of your
         player settings. Most of this JSON object will be part of
         the code you will copy paste from Kaltura.

         Documentation for kWidget available here:
         http://player.kaltura.com/docs/kwidget */

         kWidget.embed({
             "targetId": "myPlayer",
             "wid": "_2222001",
             "uiconf_id": 37440401,

             /* ADD VAST SETTINGS TO THE PLAYER SETTINGS

                 Inside `flashVars`, add another key called `"vast"` and
                 pass in a JSON object with:

                 - the position where you want your ad to play

                 - the URL of the ad (which in this case will be the `url`
                 we got back from Prebid) */

             "flashvars": {
                 "streamerType": "auto",
                 "vast": {
                     "plugin": true,
                     "prerollUrl": url,
                 }
             },
             "entry_id": "1_k4eka7er",

             /* ADD A READY CALLBACK AND GET A REFERENCE TO THE PLAYER

                 Add a ready callback to the player settings. This allows
                 us to get a reference to the player (stored in the
                 variable `kdp`) in order to interact with it later. */

             readyCallback: function(playerId) {
                 console.log("Kaltura player " + playerId + " is ready.");
             }
           });
       }
       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>