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

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

  • JavaScript VPAID 2 creatives
  • Flash VPAID 1 & 2 creatives (dreprecated)

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: '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.2.7/js/rmp.min.js" 
  integrity="sha384-C0sSn+J+s5Dqpm+q4b3+LYtSJvBnjJzqVnne0z+m+cWPz2Nkw6pSoBKTkBkt3/R2"
  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>