Prebid Video | Instream Example with Kaltura

An example of an instream pre-roll ad using Prebid.js and Kaltura.

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: {
                        playerSize: [640, 480],
                        context: 'instream'
                    }
                },
                bids: [{
                    bidder: 'appnexus',
                    params: {
                        placementId: 13232361, // Add your own placement ID here
video: { skippable: true, playback_method: ['auto_play_sound_off'] } } }] }; 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>

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>
	    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.");
	            }
	        });
	    }
	
	    /* 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>