Documentation

Companion advertisement

Scope of support for companion advertisement

While displaying a video ad within Radiant Media Player some ad-service provider can offer the possibility to display companion advertisement. Those companion advertisement help to give context to a video ad and can increase viewer engagement.

Radiant Media Player provides three ways to include companions advertisement on a web page when a VAST response include valid companions advertisement data:

Using Google Publisher Tag (Google IMA)

Google Publisher Tag automates the displaying of HTML companion advertisement on your site.

For HTML5 video advertisement please refer to this Google article.

Using the player advertisement API (Google IMA)

When the player fires the adstarted event through our advertisement API you can query the getCompanionAds method to obtain companion advertisement data and display them on your page.

getCompanionAds(companionAdSlotWidth, companionAdSlotHeight, companionAdsOptions) (Object[])

This method returns an Object[] containing companion advertisement data. Parameters companionAdSlotWidth and companionAdSlotHeight are required and must be expressed in pixels. companionAdsOptions is an optional Object representing filtering options for the companion ad to be returned. For complete documentation on companionAdsOptions see thisGoogle documentation page.

Player code example

<script src="https://cdn.radiantmediatechs.com/rmp/10.1.4/js/rmp.min.js"></script>
<div id="rmp"></div>
<br><br>
<!-- here is where the companion ad will be displayed -->
<div id="companion-ad-300-250" style="width: 300px; height: 250px;"></div>
<script>
  const src = {
    hls: 'https://your-hls-url.m3u8'
  };
  const settings = {
    licenseKey: 'your-license-key',
    src,
    width: 640,
    height: 360,
    contentMetadata: {
      poster: [
        'https://your-poster-url.jpg'
      ]
    },
    ads: true,
    adTagUrl: 'https://your-ad-tag-url'
  };
  const elementID = 'rmp';
  const rmp = new RadiantMP(elementID);
  // we wait for the adstarted event
  rmp.on('adstarted', () => {
    // we get our companion ads
    // the following settings are optional
    /*const companionAdsOptions = new google.ima.CompanionAdSelectionSettings();
    companionAdsOptions.resourceType = google.ima.CompanionAdSelectionSettings.ResourceType.STATIC;
    companionAdsOptions.creativeType = google.ima.CompanionAdSelectionSettings.CreativeType.IMAGE;
    companionAdsOptions.sizeCriteria = google.ima.CompanionAdSelectionSettings.SizeCriteria.IGNORE;
    companionAdsOptions.sizeCriteria = google.ima.CompanionAdSelectionSettings.SizeCriteria.SELECT_FLUID;*/
    const companionAds = rmp.getCompanionAds(300, 250);
    // or const companionAds = rmp.getCompanionAds(300, 250, companionAdsOptions);
    // if any companion ad we display them
    const companionAd = companionAds[0];
    // Get HTML content from the companion ad
    if (companionAd.getContent) {
      const companionAdContent = companionAd.getContent();
      // Write the content to the companion ad slot
      const companionAdDiv = document.getElementById('companion-ad-300-250');
      companionAdDiv.innerHTML = companionAdContent;
    } 
  });
  // Initialization ... and done!
  async function initRmpPlayer() {
    try {
      await rmp.init(settings);
    } catch(error) {
      console.error('Radiant Media Player failed to initialize', error);
    }
  }
  initRmpPlayer();
</script>

Companion advertisement with rmp-vast

Using companion advertisement with rmp-vast slightly differs from using companion advertisement with Google IMA so make sure to check the example below before usage.

When the player fires the adstarted event through our API you can query the getCompanionAds method to obtain Object[] representing available companion advertisement based on input parameter. Each Object represents a companion advertisement.

getCompanionAds(companionAdSlotWidth, companionAdSlotHeight)

This method returns Object[]. Input companionAdSlotWidth and companionAdSlotHeight parameters are used to select companion ads based on available width and height for display. If no companion ad is available null is returned. Parameters companionAdSlotWidth and companionAdSlotHeight are required and must be expressed in pixels. Each companion ad Object has the following properties: 

{
  adSlotId: "RMPSLOTID-1"
  altText: "Radiant Media Player logo"
  companionClickThroughUrl: "https://www.radiantmediaplayer.com"
  companionClickTrackingUrl: "https://www.radiantmediaplayer.com/vast/tags/ping.gif?creativeType=companion&type=companionClickTracking"
  height: 250
  imageUrl: "https://www.radiantmediaplayer.com/vast/mp4s/companion.jpg"
  trackingEventsUri: [
    "https://www.radiantmediaplayer.com/vast/tags/ping.gif?creativeType=companion&type=creativeView", 
    "https://www.radiantmediaplayer.com/vast/tags/ping.gif?creativeType=companion&type=creativeViewTwo"
  ]
  width: 300
}

getCompanionAd(index)

return HTMLElement image representing the companion ad. It takes a Number index parameter which represents the index of the wanted companion ad from getCompanionAds. This method automates the required pinging for companion ads.

Player code example

<script src="https://cdn.radiantmediatechs.com/rmp/10.1.4/js/rmp.min.js"></script>
<div id="rmp"></div>
<br><br>
<!-- here is where the companion ad will be displayed -->
<div id="companionId" style="width: 300px; height: 250px;"></div>
<script>
  const src = {
    hls: 'https://your-hls-url.m3u8'
  };
  const settings = {
    licenseKey: 'your-license-key',
    src,
    width: 640,
    height: 360,
    contentMetadata: {
      poster: [
        'https://your-poster-url.jpg'
      ]
    },
    ads: true,
    adParser: 'rmp-vast',
    adTagUrl: 'https://your-ad-tag-url'
  };
  const rmp = new RadiantMP('rmp');
  // we wait for the adstarted event
  rmp.on('adstarted', () => {
    // we need to call getCompanionAds BEFORE calling getCompanionAd so that 
    // rmp-vast can first create a collection of available companion ads based on getCompanionAds 
    // input parameters
    const list = rmp.getCompanionAds(900, 750);
    if (list.length === 3) {
      const img = rmp.getCompanionAd(2);
      if (img instanceof HTMLElement) {
        // we get our companion ad image and we can append it to DOM now
        // VAST trackers will be called automatically when needed
        const companionId = document.getElementById('companionId');
        companionId.appendChild(img);
      }
    }
  });
  // Initialization ... and done!
  async function initRmpPlayer() {
    try {
      await rmp.init(settings);
    } catch(error) {
      console.error('Radiant Media Player failed to initialize', error);
    }
  }
  initRmpPlayer();
</script>
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License.

Radiant Media Player

Support

Company

©2015-2025 Radiant Media Player. All Rights Reserved. ✝