An example of an instream pre-roll ad using Prebid.js 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!
<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() { pbjs.addAdUnits(videoAdUnit); // add your ad units to the bid request
pbjs.setConfig({ debug: 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); } }); }); </script>
<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="https://cdnapi.kaltura.com/p/2222001/sp/222200100/embedIframeJs/uiconf_id/37440401/partner_id/2222001"></script> <script> 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: https://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."); } }); } /* ACCOUNT FOR PAGE SPEED If Prebid returned bids before the browser reached the end of the page, the first version of `invokeVideoPlayer` will have been called from `bidsBackHandler` so the winning VAST tag will be stored in the `tempTag` variable. If that's the case, we want to call the 'real' version of `invokeVideoPlayer` with the stored URL to create the player and play the ad. If `tempTag` is not defined, that means the browser reached the end of the page before the bids came back from Prebid, meaning the 'real' version of `invokeVideoPlayer` was already called. */ if (tempTag) { invokeVideoPlayer(tempTag); tempTag = false; } </script>