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.
Line 15 to 18: Pre-define
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 a
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.
Line 20 to 34: Create a video ad unit
Create a video ad unit to request bids for. The
code is the name we’ll use to refer to this ad unit throughout the prebid code. Make sure you include the
mediaType: 'video' and replace the
placementId with your own valid placement ID.
Line 36 to 52: Log the bids for debugging
Log information about the bids to the console, including whether any bids were returned. This isn’t strictly necessary, but is useful for debugging.
Line 54 to 73: Add the ad units and request bids
Add the ad units you want to request bids for to prebid, and then call
requestBids(), passing in a json object. In the json object, define the
bidsBackHandler callback which will run once all the bids are returned.
Line 60 to 71: Build masterVideoTag and call invokeVideoPlayer
Once we have the bids back,
bidsBackHandler will be called. Inside this callback, we create the masterVideoTag and pass it to the video player by calling
Line 112: Include the player library
The script tag for your cloud-hosted video player can be found in your JW Platform account on the player’s page, under ‘Cloud Player Library URL’. The player will use the settings you define in JW Platform unless you override them on the page in the setup call.
Line 114: Get a reference to the player instance
Get a reference to the player by calling
jwplayer() and passing in the id of the div you want to load the player into.
Line 117 to 122: Call setup on the player instance
setup() on the player instance with the settings you want. We need to pass in a media file and an advertising block with a
Line 119 to 121: Pass in Advertising
We must pass in an
"advertising" block in our settings in order to enable advertising for this player. We can also specify the tag or an ad schedule here but for this demo we’ll insert the tag dynamically before the content plays.
Line 124 to 126: Play a prebid ad as a preroll
Before the player begins to play the content video, play an ad.
Line 129 to 132: 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 tempTag. 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.