This example uses a test version of Prebid.js hosted on our CDN that is not recommended for production use. It includes all available adaptors. Production implementations should build from source or customize the build using the Download
page to make sure only the necessary bidder adaptors are included.
Line 9 to 12: Include your self-hosted JW Player code and license key
Load the JW Player script. Open another script tag and define your license key. Replace
abcdefghijkl with your own license key for an account that has advertising enabled. You can find your license key in your dashboard by going to Tools (found under the Players section) and scrolling to Downloads to find JW Player 7 (Self-Hosted).
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 36: 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 38 to 54: 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 57 to 75: 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 62 to 69: 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 119: 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 122 to 131: 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 124 to 126: Pass in Advertising
We must pass in an
"advertising" block with a
client 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 129 to 131: Play the prebid ad as a preroll
Listen for the
beforePlay() event from the player and play the ad returned from prebid.
Line 134 to 137: 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.