Radiant Media Player

VPAID ads support

Mobile applications documentation



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 for example).

Radiant Media Player supports the following types of VPAID ads in HTML5 video:

  • JavaScript VPAID 2 creatives

VPAID player setting

adVpaidMode: String

A set of constants for enabling VPAID functionality with HTML5 video. Default: 'enabled'. Other accepted values are 'disabled' and 'friendlyiframe'.

  • 'friendlyiframe' means VPAID is enabled. The VPAID ad will load in a friendly iframe. This allows the ad access to the site via javascript.
  • 'enabled' means VPAID is enabled using a cross domain iframe. The VPAID ad cannot access the site. VPAID ads that depend on friendly iframe access may not play.
  • 'disabled' means VPAID is disabled. VPAID ads will be discarded when requested. An aderror event will be raised when this happens and content should resume.

Generally the 'friendlyiframe' setting should provide a larger coverage for VPAID ads but some VPAID ads may require adVpaidMode to be set to 'enabled'. If you are having issues with playing a certain type of VPAID ads try changing the value for adVpaidMode.


Example of VPAID 2 Linear JavaScript ad in Radiant Media Player


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/4.3.10/js/rmp.min.js" 
  integrity="sha384-oqyrp9HkidOFyRcmx+X2yLeX4ICBkGqK+vCML6IeTlkD3JV9omoVl0lvZJNqdmTX"
  crossorigin="anonymous"></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://www.rmp-streaming.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,
  adVpaidMode: 'enabled',
  adTagUrl: 'https://www.radiantmediaplayer.com/vast/tags/vpaid-2-js-linear.xml',
  poster: 'https://www.radiantmediaplayer.com/images/poster-rmp-showcase.jpg'
};
var elementID = 'rmpPlayer';
var rmp = new RadiantMP(elementID);
rmp.init(settings);
</script>