diff --git a/README.md b/README.md index 0bd01d3..6d7c1d8 100644 --- a/README.md +++ b/README.md @@ -10,21 +10,24 @@ More information on the subject can be found [here](https://prebid.org/overview/ A list of bidders with video ads support [can be found here](https://prebid.org/dev-docs/bidders.html#bidders-with-video-and-native-demand). ## Prebid video -In this repository, we will show how to set up Prebid with Radiant Media Player to show instream video ads with our client side adapter, instream video ads using Prebid Server and outstream video ads. Prebid.js for video overview [can be found here](https://prebid.org/prebid-video/video-overview.html). +In this repository, we will show how to set up Prebid with Radiant Media Player to show instream video ads with our client side adapter, using Prebid Server, outstream video ads and our ad-scheduler. Prebid.js for video overview [can be found here](https://prebid.org/prebid-video/video-overview.html). -### Prebid.js with Radiant Media Player: client-side adapter +### client-side adapter See `instream-client-side.html`. [A working example can be found here](https://www.radiantmediaplayer.com/docs/latest/gist/rmp-pb/instream-client-side.html). -### Prebid.js with Radiant Media Player: Prebid Server +### Prebid Server See `instream-prebid-server.html`. [A working example can be found here](https://www.radiantmediaplayer.com/docs/latest/gist/rmp-pb/instream-prebid-server.html). -### Prebid.js with Radiant Media Player: Outstream video ads +### Outstream video ads See `outstream.html`. [A working example can be found here](https://www.radiantmediaplayer.com/docs/latest/gist/rmp-pb/outstream.html). +### Ad-scheduling +See `ad-scheduling-client-side.html`. [A working example can be found here](https://www.radiantmediaplayer.com/docs/latest/gist/rmp-pb/ad-scheduling-client-side.html). + ### Production notes The above examples are start points to best implement header bidding for Radiant Media Player through Prebid.js. For production usage you will need to: -- configure Radiant Media Player with your settings and use our production core library (rmp.min.js) -- configure your prebid according to your requirements and adserver +- configure Radiant Media Player with your settings +- configure prebid according to your requirements and ad-server - use a prebid.js custom build that only encompasses your target bidders ## License for rmp-prebid diff --git a/ad-scheduling-client-side.html b/ad-scheduling-client-side.html new file mode 100644 index 0000000..f449163 --- /dev/null +++ b/ad-scheduling-client-side.html @@ -0,0 +1,41 @@ + + + + + + + + Using Prebid.js with Radiant Media Player (client-side adapter) - Ad-scheduling + + + + + + + + + +
+
+
+

Using Prebid.js with Radiant Media Player (client-side adapter)

+

Instream Video (muted autoplay)

+

Go back to GitHub

+

Go back to Radiant + Media Player docs

+

You may need to reload this demo page to get a fill on the adTag request +

+ +
+
+
+
+ + + + + \ No newline at end of file diff --git a/instream-client-side.html b/instream-client-side.html index e13947a..332687d 100644 --- a/instream-client-side.html +++ b/instream-client-side.html @@ -10,8 +10,12 @@ crossorigin="anonymous"> Using Prebid.js with Radiant Media Player (client-side adapter) - Instream Video + + + + - + @@ -31,13 +35,8 @@

Instream Video (muted autoplay)

- - - - - \ No newline at end of file diff --git a/instream-prebid-server.html b/instream-prebid-server.html index c52777b..916c06e 100644 --- a/instream-prebid-server.html +++ b/instream-prebid-server.html @@ -10,8 +10,12 @@ crossorigin="anonymous"> Using Prebid.js with Radiant Media Player (Prebid Server) - Instream Video + + + + - + @@ -31,10 +35,6 @@

Instream Video (muted autoplay)

- - - - diff --git a/js/ad-scheduling-client-side.js b/js/ad-scheduling-client-side.js new file mode 100644 index 0000000..73650c2 --- /dev/null +++ b/js/ad-scheduling-client-side.js @@ -0,0 +1,167 @@ +/* fallback VAST tag in case prebid does not return a winning bid - this is optional */ +const fallbackVastTagUrl = 'https://www.radiantmediaplayer.com/vast/tags/inline-linear-1.xml'; +let playerHasBeenSetup = false; +/* timeout before we consider a bid invalid and resume player set up with fallbackVastTagUrl */ +const timeoutForBidToResolve = 50; +let bidTimeout = null; + +/* Prebid video ad unit - midroll and postroll in our ad-schedule + we use the adScheduleCallback player setting to pass an async function to get + a winning bid */ +const adScheduleCallback = function () { + return new Promise((resolve, reject) => { + const promiseTimeout = setTimeout(() => { + window.console.log('reject adScheduleCallback'); + reject(); + }, 5000); + const videoAdUnit = { + code: 'video', + mediaTypes: { + video: { + context: 'instream', + playerSize: [640, 480] + }, + }, + bids: [{ + bidder: 'appnexus', + params: { + placementId: 13232361, + video: { + skippable: true, + playback_methods: ['auto_play_sound_off'] + } + } + }] + }; + pbjs.que.push(() => { + pbjs.addAdUnits(videoAdUnit); + pbjs.setConfig({ + cache: { + url: 'https://prebid.adnxs.com/pbc/v1/cache' + } + }); + pbjs.requestBids({ + bidsBackHandler: (bids) => { + window.console.log('winning bid follows'); + window.console.log(bids); + const videoUrl = pbjs.adServers.dfp.buildVideoUrl({ + adUnit: videoAdUnit, + params: { + iu: '/19968336/prebid_cache_video_adunit' + } + }); + clearTimeout(promiseTimeout); + resolve(videoUrl); + } + }); + }); + }); +}; + +/* function to be called when player needs to be displayed */ +const invokeVideoPlayer = function (adTagUrl) { + clearTimeout(bidTimeout); + playerHasBeenSetup = true; + window.console.log('invokeVideoPlayer with Prebid VAST url = ' + adTagUrl); + const src = { + mp4: [ + 'https://www.rmp-streaming.com/media/big-buck-bunny-360p.mp4' + ] + }; + const settings = { + licenseKey: 'Kl8lZ292K3N6Mm9pZz9yb201ZGFzaXMzMGRiMEElXyo=', + src: src, + width: 640, + height: 360, + // we enabled ads for our player + // note that we requested a winning bid for skippable auto_play_sound_off so player starts muted autoplay + ads: true, + autoplay: true, + muted: true, + // we use Google IMA in this demo, but you can use rmp-vast as well depending on your requirements + adParser: 'ima', + // here is our winner VAST adTagUrl + adScheduleCallback: adScheduleCallback, + //adParser: 'rmp-vast', + // Pass ad schedule + adSchedule: { + // Preroll + preroll: adTagUrl, + // Midroll + midroll: [ + [30, 'callback'] + ], + // Postroll + postroll: 'callback' + }, + contentMetadata: { + poster: [ + 'https://www.radiantmediaplayer.com/images/poster-rmp-showcase.jpg' + ] + } + }; + const elementID = 'rmpPlayer'; + const rmp = new RadiantMP(elementID); + rmp.init(settings); +}; + +if (window.pbjs) { + /* if we reach timeoutForBidToResolve then we setup player with fallbackVastTagUrl */ + bidTimeout = setTimeout(() => { + invokeVideoPlayer(fallbackVastTagUrl); + }, timeoutForBidToResolve); + pbjs.que = pbjs.que || []; + /* Prebid video ad unit */ + const videoAdUnit = { + code: 'video1', + mediaTypes: { + video: { + playerSize: [640, 480], + context: 'instream' + } + }, + bids: [{ + bidder: 'appnexus', + params: { + placementId: 13232361, + video: { + skippable: true, + playback_method: ['auto_play_sound_off'] + } + } + }] + }; + + pbjs.que.push(function () { + pbjs.addAdUnits(videoAdUnit); + pbjs.setConfig({ + //debug: true, + cache: { + url: 'https://prebid.adnxs.com/pbc/v1/cache' + } + }); + pbjs.requestBids({ + bidsBackHandler: (bids) => { + window.console.log('winning bid follows'); + window.console.log(bids); + const videoUrl = pbjs.adServers.dfp.buildVideoUrl({ + adUnit: videoAdUnit, + params: { + iu: '/19968336/prebid_cache_video_adunit', + cust_params: { + section: 'blog', + anotherKey: 'anotherValue' + }, + output: 'vast' + } + }); + if (!playerHasBeenSetup) { + invokeVideoPlayer(videoUrl); + } + } + }); + }); +} else { + // fallback in case pbjs is not defined + invokeVideoPlayer(fallbackVastTagUrl); +} diff --git a/js/instream-client-side.js b/js/instream-client-side.js index 124a0e5..54fc38b 100644 --- a/js/instream-client-side.js +++ b/js/instream-client-side.js @@ -1,99 +1,22 @@ -/* our app where we run player - our app variables */ -var pbApp = {}; -pbApp.playerSetup = false; -pbApp.prebidTempTag = false; -pbApp.debug = true; -/* in case pre-bidding takes too long or fails we provide a playerSetupTimeout and fallbackAdTagUrl - to insure player setup happens - this is optional */ -pbApp.playerSetupTimeout = 5000; -pbApp.fallbackAdTagUrl = 'https://www.radiantmediaplayer.com/vast/tags/inline-linear-1.xml'; -/* no console - no logs */ -if (typeof window.console === 'undefined' || typeof window.console.log === 'undefined' || typeof window.console.dir === 'undefined') { - pbApp.debug = false; -} - -/* invokeVideoPlayer may not be defined when bidsBackHandler runs - we pre-defined it here so as to capture the returned adTagUrl to be passed to the player */ -pbApp.invokeVideoPlayer = function (adTagUrl) { - pbApp.prebidTempTag = adTagUrl; -}; - -/* prebid.js variables */ -var pbjs; -pbjs = pbjs || {}; -pbjs.que = pbjs.que || []; - -/* Prebid video ad unit - This is a working example but you must use your own settings/bidders for production - More docs at https://prebid.org/prebid-video/video-overview.html */ -var videoAdUnit = { - code: 'video1', - mediaTypes: { - video: { - playerSize: [640, 480], - context: 'instream' - } - }, - bids: [{ - bidder: 'appnexus', - params: { - placementId: 13232361, - video: { - skippable: true, - playback_method: ['auto_play_sound_off'] - } - } - }] -}; - -pbjs.que.push(function () { - pbjs.addAdUnits(videoAdUnit); - - pbjs.setConfig({ - debug: true, - cache: { - url: 'https://prebid.adnxs.com/pbc/v1/cache' - } - }); - - pbjs.requestBids({ - bidsBackHandler: function (bids) { - if (pbApp.debug) { - window.console.dir(bids); - } - var videoUrl = pbjs.adServers.dfp.buildVideoUrl({ - adUnit: videoAdUnit, - params: { - iu: '/19968336/prebid_cache_video_adunit', - cust_params: { - section: 'blog', - anotherKey: 'anotherValue' - }, - output: 'vast' - } - }); - pbApp.invokeVideoPlayer(videoUrl); - } - }); -}); +/* fallback VAST tag in case prebid does not return a winning bid - this is optional */ +const fallbackVastTagUrl = 'https://www.radiantmediaplayer.com/vast/tags/inline-linear-1.xml'; +let playerHasBeenSetup = false; +/* timeout before we consider a bid invalid and resume player set up with fallbackVastTagUrl */ +const timeoutForBidToResolve = 5000; +let bidTimeout = null; -/* here we re-define invokeVideoPlayer with Radiant Media Player set-up */ -pbApp.invokeVideoPlayer = function (adTagUrl) { - if (pbApp.playerSetup) { - return; - } - pbApp.playerSetup = true; - if (pbApp.debug) { - window.console.log('invokeVideoPlayer with Prebid VAST url = ' + adTagUrl); - } - var src = { +/* function to be called when player needs to be displayed */ +const invokeVideoPlayer = function (adTagUrl) { + clearTimeout(bidTimeout); + playerHasBeenSetup = true; + window.console.log('invokeVideoPlayer with Prebid VAST url = ' + adTagUrl); + const src = { mp4: [ 'https://www.rmp-streaming.com/media/big-buck-bunny-360p.mp4' ] }; - var settings = { - licenseKey: 'your-license-key', + const settings = { + licenseKey: 'Kl8lZ292K3N6Mm9pZz9yb201ZGFzaXMzMGRiMEElXyo=', src: src, width: 640, height: 360, @@ -101,6 +24,7 @@ pbApp.invokeVideoPlayer = function (adTagUrl) { // note that we requested a winning bid for skippable auto_play_sound_off so player starts muted autoplay ads: true, autoplay: true, + muted: true, // we use Google IMA in this demo, but you can use rmp-vast as well depending on your requirements adParser: 'ima', // here is our winner VAST adTagUrl @@ -111,23 +35,67 @@ pbApp.invokeVideoPlayer = function (adTagUrl) { ] } }; - var elementID = 'rmpPlayer'; - var rmp = new RadiantMP(elementID); + const elementID = 'rmpPlayer'; + const rmp = new RadiantMP(elementID); rmp.init(settings); - }; -/* in case we already have a winning bid let's use the returned adTagUrl to run player */ -if (pbApp.prebidTempTag) { - pbApp.invokeVideoPlayer(pbApp.prebidTempTag); - pbApp.prebidTempTag = false; +if (window.pbjs) { + /* if we reach timeoutForBidToResolve then we setup player with fallbackVastTagUrl */ + bidTimeout = setTimeout(() => { + invokeVideoPlayer(fallbackVastTagUrl); + }, timeoutForBidToResolve); + pbjs.que = pbjs.que || []; + /* Prebid video ad unit */ + const videoAdUnit = { + code: 'video1', + mediaTypes: { + video: { + playerSize: [640, 480], + context: 'instream' + } + }, + bids: [{ + bidder: 'appnexus', + params: { + placementId: 13232361, + video: { + skippable: true, + playback_method: ['auto_play_sound_off'] + } + } + }] + }; + pbjs.que.push(() => { + pbjs.addAdUnits(videoAdUnit); + pbjs.setConfig({ + //debug: true, + cache: { + url: 'https://prebid.adnxs.com/pbc/v1/cache' + } + }); + pbjs.requestBids({ + bidsBackHandler: (bids) => { + window.console.log('winning bid follows'); + window.console.log(bids); + const videoUrl = pbjs.adServers.dfp.buildVideoUrl({ + adUnit: videoAdUnit, + params: { + iu: '/19968336/prebid_cache_video_adunit', + cust_params: { + section: 'blog', + anotherKey: 'anotherValue' + }, + output: 'vast' + } + }); + if (!playerHasBeenSetup) { + invokeVideoPlayer(videoUrl); + } + } + }); + }); +} else { + // fallback in case pbjs is not defined + invokeVideoPlayer(fallbackVastTagUrl); } - -/* in case something went wrong (latency, network errors, bid issues ...) and we have no winning bid we still need to run the player - this is done after pbApp.playerSetupTimeout ms and we use fallbackAdTagUrl as adTagUrl to pass to the player */ -setTimeout(function () { - if (pbApp.playerSetup) { - return; - } - pbApp.invokeVideoPlayer(pbApp.fallbackAdTagUrl); -}, pbApp.playerSetupTimeout); diff --git a/js/instream-prebid-server.js b/js/instream-prebid-server.js index 0531b7e..d311ce1 100644 --- a/js/instream-prebid-server.js +++ b/js/instream-prebid-server.js @@ -1,111 +1,22 @@ -/* our app where we run player - our app variables */ -var pbApp = {}; -pbApp.playerSetup = false; -pbApp.prebidTempTag = false; -pbApp.debug = true; -/* in case pre-bidding takes too long or fails we provide a playerSetupTimeout and fallbackAdTagUrl - to insure player setup happens - this is optional */ -pbApp.playerSetupTimeout = 5000; -pbApp.fallbackAdTagUrl = 'https://www.radiantmediaplayer.com/vast/tags/inline-linear-1.xml'; -/* no console - no logs */ -if (typeof window.console === 'undefined' || typeof window.console.log === 'undefined' || typeof window.console.dir === 'undefined') { - pbApp.debug = false; -} - -/* invokeVideoPlayer may not be defined when bidsBackHandler runs - we pre-defined it here so as to capture the returned adTagUrl to be passed to the player */ -pbApp.invokeVideoPlayer = function (adTagUrl) { - pbApp.prebidTempTag = adTagUrl; -}; +/* fallback VAST tag in case prebid does not return a winning bid - this is optional */ +const fallbackVastTagUrl = 'https://www.radiantmediaplayer.com/vast/tags/inline-linear-1.xml'; +let playerHasBeenSetup = false; +/* timeout before we consider a bid invalid and resume player set up with fallbackVastTagUrl */ +const timeoutForBidToResolve = 5000; +let bidTimeout = null; -/* prebid.js variables */ -var pbjs; -pbjs = pbjs || {}; -pbjs.que = pbjs.que || []; - -/* Prebid video ad unit - This is a working example but you must use your own settings/bidders for production - More docs at https://prebid.org/prebid-video/video-overview.html */ -var videoAdUnit = { - code: 'video1', - mediaTypes: { - video: { - playerSize: [640, 480], - context: 'instream', - mimes: ['video/mp4'], - protocols: [1, 2, 3, 4, 5, 6, 7, 8], - playbackmethod: [2] - } - }, - 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 () { - // configure prebid to use prebid cache and prebid server - // make sure to add your own accountId to your s2sConfig object - pbjs.setConfig({ - cache: { - url: 'https://prebid.adnxs.com/pbc/v1/cache' - }, - debug: true, - enableSendAllBids: true, - s2sConfig: { - endpoint: 'https://prebid.adnxs.com/pbs/v1/openrtb2/auction', - enabled: true, - accountId: 'c9d412ee-3cc6-4b66-9326-9f49d528f13e', - bidders: ['appnexus'] - } - }); - - pbjs.addAdUnits(videoAdUnit); // add your ad units to the bid request - - pbjs.requestBids({ - bidsBackHandler: function (bids) { - if (pbApp.debug) { - window.console.dir(bids); - } - var videoUrl = pbjs.adServers.dfp.buildVideoUrl({ - adUnit: videoAdUnit, - params: { - iu: '/19968336/prebid_cache_video_adunit', - cust_params: { - section: 'blog', - anotherKey: 'anotherValue' - }, - output: 'vast' - } - }); - pbApp.invokeVideoPlayer(videoUrl); - } - }); -}); - -/* here we re-define invokeVideoPlayer with Radiant Media Player set-up */ -pbApp.invokeVideoPlayer = function (adTagUrl) { - if (pbApp.playerSetup) { - return; - } - pbApp.playerSetup = true; - if (pbApp.debug) { - window.console.log('invokeVideoPlayer with Prebid VAST url = ' + adTagUrl); - } - var src = { +/* function to be called when player needs to be displayed */ +const invokeVideoPlayer = function (adTagUrl) { + clearTimeout(bidTimeout); + playerHasBeenSetup = true; + window.console.log('invokeVideoPlayer with Prebid VAST url = ' + adTagUrl); + const src = { mp4: [ 'https://www.rmp-streaming.com/media/big-buck-bunny-360p.mp4' ] }; - var settings = { - licenseKey: 'your-license-key', + const settings = { + licenseKey: 'Kl8lZ292K3N6Mm9pZz9yb201ZGFzaXMzMGRiMEElXyo=', src: src, width: 640, height: 360, @@ -113,6 +24,7 @@ pbApp.invokeVideoPlayer = function (adTagUrl) { // note that we requested a winning bid for skippable auto_play_sound_off so player starts muted autoplay ads: true, autoplay: true, + muted: true, // we use Google IMA in this demo, but you can use rmp-vast as well depending on your requirements adParser: 'ima', // here is our winner VAST adTagUrl @@ -123,23 +35,80 @@ pbApp.invokeVideoPlayer = function (adTagUrl) { ] } }; - var elementID = 'rmpPlayer'; - var rmp = new RadiantMP(elementID); + const elementID = 'rmpPlayer'; + const rmp = new RadiantMP(elementID); rmp.init(settings); - }; -/* in case we already have a winning bid let's use the returned adTagUrl to run player */ -if (pbApp.prebidTempTag) { - pbApp.invokeVideoPlayer(pbApp.prebidTempTag); - pbApp.prebidTempTag = false; -} +if (window.pbjs) { + /* if we reach timeoutForBidToResolve then we setup player with fallbackVastTagUrl */ + bidTimeout = setTimeout(() => { + invokeVideoPlayer(fallbackVastTagUrl); + }, timeoutForBidToResolve); + pbjs.que = pbjs.que || []; + /* Prebid video ad unit */ + const videoAdUnit = { + code: 'video1', + mediaTypes: { + video: { + playerSize: [640, 480], + context: 'instream', + mimes: ['video/mp4'], + protocols: [1, 2, 3, 4, 5, 6, 7, 8], + playbackmethod: [2] + } + }, + bids: [{ + bidder: 'appnexus', + params: { + placementId: 13232361, // Add your own placement id here. + video: { + skippable: true, + playback_method: ['auto_play_sound_off'] + } + } + }] + }; -/* in case something went wrong (latency, network errors, bid issues ...) and we have no winning bid we still need to run the player - this is done after pbApp.playerSetupTimeout ms and we use fallbackAdTagUrl as adTagUrl to pass to the player */ -setTimeout(function () { - if (pbApp.playerSetup) { - return; - } - pbApp.invokeVideoPlayer(pbApp.fallbackAdTagUrl); -}, pbApp.playerSetupTimeout); + pbjs.que.push(() => { + // configure prebid to use prebid cache and prebid server + // make sure to add your own accountId to your s2sConfig object + pbjs.setConfig({ + cache: { + url: 'https://prebid.adnxs.com/pbc/v1/cache' + }, + //debug: true, + enableSendAllBids: true, + s2sConfig: { + endpoint: 'https://prebid.adnxs.com/pbs/v1/openrtb2/auction', + enabled: true, + accountId: 'c9d412ee-3cc6-4b66-9326-9f49d528f13e', + bidders: ['appnexus'] + } + }); + pbjs.addAdUnits(videoAdUnit); // add your ad units to the bid request + pbjs.requestBids({ + bidsBackHandler: (bids) => { + window.console.log('winning bid follows'); + window.console.log(bids); + const videoUrl = pbjs.adServers.dfp.buildVideoUrl({ + adUnit: videoAdUnit, + params: { + iu: '/19968336/prebid_cache_video_adunit', + cust_params: { + section: 'blog', + anotherKey: 'anotherValue' + }, + output: 'vast' + } + }); + if (!playerHasBeenSetup) { + invokeVideoPlayer(videoUrl); + } + } + }); + }); +} else { + // fallback in case pbjs is not defined + invokeVideoPlayer(fallbackVastTagUrl); +} diff --git a/js/outstream.js b/js/outstream.js index 8b44636..4d8e490 100644 --- a/js/outstream.js +++ b/js/outstream.js @@ -1,71 +1,88 @@ -/* our app where we run player - our app variables */ -var pbjs; -pbjs = pbjs || {}; -pbjs.que = pbjs.que || []; -var debug = false; -if (typeof window.console === 'undefined' || typeof window.console.log === 'undefined' || typeof window.console.dir === 'undefined') { - debug = false; -} -var videoId = 'video1'; +/* fallback VAST tag in case prebid does not return a winning bid - this is optional */ +const fallbackVastTagUrl = 'https://www.radiantmediaplayer.com/vast/tags/inline-linear-1.xml'; +let playerHasBeenSetup = false; +/* timeout before we consider a bid invalid and resume player set up with fallbackVastTagUrl */ +const timeoutForBidToResolve = 5000; +let bidTimeout = null; + +/* function to be called when player needs to be displayed */ +const invokeVideoPlayer = function (adTagUrl, xml) { + clearTimeout(bidTimeout); + playerHasBeenSetup = true; + window.console.log('invokeVideoPlayer with Prebid VAST url'); + window.console.log(adTagUrl); + const settings = { + licenseKey: 'Kl8lZ292K3N6Mm9pZz9yb201ZGFzaXMzMGRiMEElXyo=', + width: 640, + height: 360, + autoplay: true, + adOutStreamMutedAutoplay: true, + ads: true, + adOutStream: true, + skin: 'outstream' + }; + if (xml) { + settings.adsResponse = adTagUrl; + } else { + settings.adTagUrl = adTagUrl; + } + const elementID = 'rmpPlayer'; + const rmp = new RadiantMP(elementID); + rmp.init(settings); +}; -/* Prebid video ad unit - This is a working example but you must use your own settings/bidders for production - More docs at https://prebid.org/prebid-video/video-overview.html */ -var adUnits = [{ - code: videoId, - mediaTypes: { - video: { - playerSize: [640, 480], - context: 'outstream' - } - }, - bids: [{ - bidder: 'appnexus', - params: { - placementId: 13232385, +if (window.pbjs) { + const videoId = 'video1'; + /* if we reach timeoutForBidToResolve then we setup player with fallbackVastTagUrl */ + bidTimeout = setTimeout(() => { + invokeVideoPlayer(fallbackVastTagUrl, false); + }, timeoutForBidToResolve); + pbjs.que = pbjs.que || []; + /* Prebid video ad unit */ + const adUnits = [{ + code: videoId, + mediaTypes: { video: { - skippable: true, - playback_method: ['auto_play_sound_off'] + playerSize: [640, 480], + context: 'outstream' } - } - }] -}]; - -pbjs.que.push(function () { - pbjs.addAdUnits(adUnits); - pbjs.requestBids({ - timeout: 1000, - bidsBackHandler: function (bids) { - if (debug) { - window.console.dir(bids); + }, + bids: [{ + bidder: 'appnexus', + params: { + placementId: 13232385, + video: { + skippable: true, + playback_method: ['auto_play_sound_off'] + } } - // we get the VAST XML from bids adResponse and pass it to our outstream player - if (bids && bids[videoId] && bids[videoId].bids && bids[videoId].bids[0] && bids[videoId].bids[0].adResponse) { - var adResponse = bids[videoId].bids[0].adResponse; - if (adResponse.ad && adResponse.ad.video && typeof adResponse.ad.video.content === 'string') { - var vastXml = bids[videoId].bids[0].adResponse.ad.video.content; - if (vastXml !== '') { - if (debug) { - window.console.log(vastXml); + }] + }]; + pbjs.que.push(function () { + pbjs.addAdUnits(adUnits); + pbjs.requestBids({ + timeout: 1000, + bidsBackHandler: function (bids) { + window.console.log('winning bid follows'); + window.console.log(bids); + // we get the VAST XML from bids adResponse and pass it to our outstream player + if (bids && bids[videoId] && bids[videoId].bids && bids[videoId].bids[0] && bids[videoId].bids[0].adResponse) { + const adResponse = bids[videoId].bids[0].adResponse; + if (adResponse.ad && adResponse.ad.video && typeof adResponse.ad.video.content === 'string') { + const vastXml = bids[videoId].bids[0].adResponse.ad.video.content; + if (vastXml !== '') { + if (!playerHasBeenSetup) { + invokeVideoPlayer(vastXml, true); + } + } else { + invokeVideoPlayer(fallbackVastTagUrl, false); } - var settings = { - licenseKey: 'your-license-key', - width: 640, - height: 360, - autoplay: true, - adOutStreamMutedAutoplay: true, - ads: true, - adsResponse: vastXml, - adOutStream: true, - skin: 'outstream' - }; - var elementID = 'rmpPlayer'; - var rmp = new RadiantMP(elementID); - rmp.init(settings); } } } - } + }); }); -}); +} else { + // fallback in case pbjs is not defined + invokeVideoPlayer(fallbackVastTagUrl, false); +} diff --git a/outstream.html b/outstream.html index 5e65575..882f9e6 100644 --- a/outstream.html +++ b/outstream.html @@ -10,8 +10,12 @@ crossorigin="anonymous"> Using Prebid.js with Radiant Media Player - Outstream Video + + + + - + @@ -31,10 +35,6 @@

Outstream Video (muted autoplay)

- - - - diff --git a/package.json b/package.json index 7038a48..1390582 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rmp-prebid", - "version": "2.0.0", + "version": "3.0.0", "author": "Radiant Media Player ", "description": "Implements header bidding for Radiant Media Player through Prebid.js", "repository": {