Header bidding ad demo

Sample implementation


#player {
 max-width: 40em;
 width: 100%;
 float: left;
 }


var pbjs = pbjs || {};
 pbjs.que = pbjs.que || [];
 const BIDDER1_PROVIDER = "appnexus";
 const BIDDER1_PLACEMENT_ID = "13232361";
 var adtag = null
 var timeout = 2000
 window.prebid_fetcher = function() {
 if (adtag) return Promise.resolve(adtag)
 return new Promise(function (resolve) {
 setTimeout(function() {
 resolve(adtag)
 }, timeout)
 })
 }
 var videoAdUnit = {
 code: "video1",
 sizes: [640,480],
 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: BIDDER1_PROVIDER,
 params: {
 placementId: BIDDER1_PLACEMENT_ID
 }
 }
 ]
 };
 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"
 }
 });
 adtag = videoUrl;
 }
 });
 });
 var player = flowplayer('#player', {
 src: "//edge.flowplayer.org/drive.mp4",
 title: "Flowplayer demo",
 description: "Demo showing ads",
 ima: {
 ads: [{
 time: 0,
 adTag: "flowplayer://prebid_fetcher"
 }]
 }
 });

Requirements

You need a valid prebid provider and bidder id.

Libraries

<script async src="//cdn.jsdelivr.net/npm/prebid.js@latest/dist/not-for-prod/prebid.js"></script>
<link rel="stylesheet" href="//cdn.flowplayer.com/releases/native/3/stable/style/flowplayer.css">
<script src="//cdn.flowplayer.com/releases/native/3/stable/flowplayer.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/ads.min.js"></script>
<script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>

HTML code

 <div id="player"></div>

Javascript

Prebid init

The prebid intitialization, put this in the page header.

<script>
 var pbjs = pbjs || {};
 pbjs.que = pbjs.que || [];
 const BIDDER1_PROVIDER = 'appnexus';
 const BIDDER1_PLACEMENT_ID = '13232361';
 // The ad tag in Flowplayer can be actual ad tag or promise to an ad tag. 
 // We return the ad tag if it is available before the player is ready to play 
 // Otherwise the player waits for 2 secs for tag to be available.
 var adtag = null
 var timeout = 2000
 window.prebid_fetcher = function() {
 if (adtag) return Promise.resolve(adtag)
 return new Promise(function (resolve) {
 setTimeout(function() {
 resolve(adtag)
 }, timeout)
 })
 }
 /*
 Prebid Video adUnit
 */
 var videoAdUnit = {
 code: 'video1',
 sizes: [640,480],
 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: BIDDER1_PROVIDER,
 params: {
 placementId: BIDDER1_PLACEMENT_ID
 }
 }
 ]
 };
 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"
 }
 });
 adtag = videoUrl;
 }
 });
 });
</script>

Flowplayer configuration

<script type="text/javascript">
 var player = flowplayer('#player', {
 src: "//edge.flowplayer.org/drive.mp4",
 title: "Flowplayer demo",
 description: "Demo showing ads",
 ima: {
 ads: [{
 time: 0, // preroll
 adTag: 'flowplayer://prebid_fetcher' // this will try to call window.prebid_fetcher
 ]
 },
 token:"eyJraWQiOiJZSVI0VVJZODA2TGoiLCJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJjIjoie1wiYWNsXCI6NixcImlkXCI6XCJZSVI0VVJZODA2TGpcIn0iLCJpc3MiOiJGbG93cGxheWVyIn0.YUoY8b2vl1Z15PikwgYeWQ8Cp85C-TvtmwIJ_UFxpfAYYH8yiiUrhmd3SaY_qb3AvVDz45xVV6R9wizYl-NRGQ"
 });
</script>

Replace the Flowplayer token with your own, and the prebid parameters with the ones you received from your ad partner.

Standalone demo

prebid standalone demo

Cuepoints Outstream ad