Radiant Media Player

VPAID ads support



VPAID definition and scope of support

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 (JavaScript executable ad unit).

Radiant Media Player supports JavaScript and Flash VPAID for HTML5 video:

  • JavaScript VPAID 2 creatives
  • Flash VPAID 1 & 2 creatives

Take a moment to read our deprecating Flash support article as Google has announced end of support for Flash in the IMA SDK and as Flash becomes rapidly deprecated in the industry. The use of JavaScript VPAID is highly recommended.


VPAID player setting

adVpaidMode: String

A set of constants for enabling VPAID functionality with HTML5 video (either JavaScript VPAID or Flash VPAID). Default: 'friendlyiframe'. 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. An aderror event will be raised when a VPAID ad is discarded.


Example of VPAID 2 Linear JavaScript in Radiant Media Player


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/v4/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://d1swr4916zvh4g.cloudfront.net/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',
  poster: 'https://www.radiantmediaplayer.com/images/poster-rmp-showcase.jpg'
};
var elementID = 'rmpPlayer';
var rmp = new RadiantMP(elementID);
rmp.init(settings);
</script>