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 20 to 36: Include VideoJS assets
Add the VideoJS script and css file to your page, along with the script and css files for any plugins you want, which should include an advertising plugin. For this demo we’ll be using the vast-vpaid plugin.
Line 11 to 14: 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 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 70: 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 124 to 129: Create video element
Create an html5 video element and give it an ID. We’ll use this id to reference the player later.
Line 136 to 148: Initialize video element
Access the player instance by calling
videojs() and passing in the player’s id. Add a
ready listener to make sure the player is ready before interacting with it.
Line 136 to 148: Pass settings to vast plugin
Pass in a json object to the player’s vastClient (defined by the vast / vpaid plugin we’re using). The requires an
adTagUrl, which will be the url returned by prebid. You can view all the options available for the vastClient here.
Line 131 to 134: 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.