Radiant Media Player

VPAID support



VPAID definition and scope of support

HTML5 Flash

VPAID stands for Video Player Ad-Serving Interface Definition. It is a specification developed by the Interactive Advertising Bureau (IAB) which defines how an ad unit and a video player can interact with one another. VPAID add a new dimension to the VAST standard as it enables true engagement and interactivity with the ad viewer. VPAID is built on top of VAST and allows a video player to display rich interactive media ads (Flash or JavaScript executable ad unit).

Radiant Media Player supports VPAID for HTML5 and Flash video:

  • JavaScript VPAID 2 creatives in Radiant Media Player HTML5 video player
  • Flash VPAID 1 & 2 creatives in Radiant Media Player Flash video player
  • Flash VPAID 1 creatives in Radiant Media Player HTML5 video player (1)

(1) Flash VPAID in HTML5 video has some limitations, specifically when it comes to resizing. We recommend using Flash VPAID 1 & 2 creatives in Radiant Media Player Flash video player whenever possible.


VPAID player settings

adFlashVpaidVersion: String

Specifies which version of VPAID to use for Flash video ads. Default: '1.0'. The other possibles values is '2.0'. Before changing this value make sure you are using VPAID 2 compatible ad tag.

adVpaidMode: String

A set of constants for enabling VPAID functionality with HTML5 video (either JavaScript VPAID or Flash VPAID). Default: 'enabled'. Other accepted values are 'disabled' and 'enabled'. The 'friendlyiframe' setting will cause the VPAID ad to load in a friendly iframe. This gives the ad access to the parent site via JavaScript (as opposed to the 'enabled' setting where the VPAID ad cannot access the parent site).

When set to 'disabled' adVpaidMode will cause the player to automatically discard VPAID ads when received. A aderror event will be raised when a VPAID ad is discarded.


Example: VPAID 2.0 Linear JavaScript (VAST Inline) in Radiant Media Player HTML5 video


Sample player

The above player will load a VPAID JS interface allowing to manually fire different ad events (Trigger Event button).


Player code for the above sample

<!-- Include Radiant Media Player JavaScript file in your <body> or <head> -->
<script src="https://cdn.radiantmediatechs.com/rmp/v3/latest/js/rmp.min.js"></script>
<!-- Set up your wrapper div with its unique id -->
<div id="rmpPlayer"></div>
<!-- Set up player configuration options -->
<script>
// First we specify bitrates to feed to the player
var bitrates = {
  mp4: [
    'https://rmpsite-1479.kxcdn.com/media/bbb-360p.mp4'
  ]
};
// Then we set our player settings
var settings = {
  licenseKey: 'your-license-key',
  bitrates: bitrates,  
  delayToFade: 3000,
  width: 640,
  height: 360,
  ads: true,
  adTagUrl: 'https://www.radiantmediaplayer.com/vast/tags/vpaidjs.xml',
  adVpaidMode: 'friendlyiframe',
  skin: 's1',
  poster: 'https://www.radiantmediaplayer.com/images/poster-rmp-showcase.jpg'
};
// Reference to the wrapper div (unique id)
var elementID = 'rmpPlayer';
// Create an object based on RadiantMP constructor
var rmp = new RadiantMP(elementID);
// Initialization ... test your page and done!
rmp.init(settings);
</script>

Example: Single VPAID 1.0 Linear Flash (VAST Inline) in Radiant Media Player Flash video


Sample player


Player code for the above sample

<!-- Include Radiant Media Player JavaScript file in your <body> or <head> -->
<script src="https://cdn.radiantmediatechs.com/rmp/v3/latest/js/rmp.min.js"></script>
<!-- Set up your wrapper div with its unique id -->
<div id="rmpPlayer"></div>
<!-- Set up player configuration options -->
<script>
// First we specify bitrates to feed to the player
var bitrates = {
  mp4: [
    'https://rmpsite-1479.kxcdn.com/media/bbb-360p.mp4'
  ]
};
// Then we set our player settings
var settings = {
  licenseKey: 'your-license-key',
  bitrates: bitrates,  
  delayToFade: 3000,
  width: 640,
  height: 360,
  ads: true,
  adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dlinearvpaid&correlator=',
  adFlashVpaidVersion: '1.0',
  flashFirst: true,
  skin: 's1',
  poster: 'https://www.radiantmediaplayer.com/images/poster-rmp-showcase.jpg'
};
// Reference to the wrapper div (unique id)
var elementID = 'rmpPlayer';
// Create an object based on RadiantMP constructor
var rmp = new RadiantMP(elementID);
// Initialization ... test your page and done!
rmp.init(settings);
</script>