-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- updates to Radiant Media Player 6 - updates code to ES2015 - adds ad-scheduling support
- Loading branch information
1 parent
41b736a
commit db5b4d1
Showing
10 changed files
with
475 additions
and
311 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> | ||
| <link rel="stylesheet" | ||
| href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" | ||
| integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" | ||
| crossorigin="anonymous"> | ||
| <title>Using Prebid.js with Radiant Media Player (client-side adapter) - Ad-scheduling</title> | ||
| <!-- prebid.js --> | ||
| <!-- this is an unoptimized build for the purpose of this demo --> | ||
| <!-- see https://prebid.org/download.html or https://github.com/prebid/Prebid.js/#Build to produce a production build specific to your project--> | ||
| <script src="https://acdn.adnxs.com/prebid/not-for-prod/prebid.js"></script> | ||
| <!-- Radiant Media Player core library - debug browser console mode (use rmp.min.js for production) --> | ||
| <script src="https://cdn.radiantmediatechs.com/rmp/6.0.0/js/rmp.min.js"></script> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div class="container"> | ||
| <div class="row"> | ||
| <div class="col"> | ||
| <h1>Using Prebid.js with Radiant Media Player (client-side adapter)</h1> | ||
| <h2>Instream Video (muted autoplay)</h2> | ||
| <p>Go back to <a href="https://github.com/radiantmediaplayer/rmp-prebid">GitHub</a></p> | ||
| <p>Go back to <a | ||
| href="https://www.radiantmediaplayer.com/docs/latest/header-bidding.html">Radiant | ||
| Media Player docs</a></p> | ||
| <p>You may need to reload this demo page to get a fill on the adTag request | ||
| </p> | ||
| <!-- player container --> | ||
| <div id="rmpPlayer"></div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <!-- player app logic --> | ||
| <script src="js/ad-scheduling-client-side.js"></script> | ||
| </body> | ||
|
|
||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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); | ||
| } |
Oops, something went wrong.