Documentation

Video Ads With Google IMA DAI HTML5 SDK

Introduction

We support the HTML5 Google IMA DAI SDK (dynamic ad insertion) in Radiant Media Player. The Google IMA DAI SDK for HTML5 V3 allows publishers to request and track DAI streams in a HTML5 video environment with a server-side ad insertion angle (SSAI). We support live, on-demand video and Pod Serving with the HTML5 Google IMA DAI SDK with HLS (hls.js where Media Source Extensions are available and native HLS as a fallback, typically for iOS). Skippable ads and snapback are also supported.

You can test your DAI stream in our tester here.

Using Google IMA DAI in our player with MPEG-DASH streaming is currently not supported.

Supported environments for the DAI IMA HTML5 SDK

  • Desktop: Chrome, Firefox, Opera, Safari 11+ for Windows 7+ and macOS 10.12+
  • Mobile: Chrome, Firefox, Opera for Android 5+ and Safari for iOS 10+ and iPadOS 13+

Player code example

DAI VOD stream (HLS)

<!-- Include Radiant Media Player JavaScript file in your <body> or <head> -->
<script src="https://cdn.radiantmediatechs.com/rmp/9.16.6/js/rmp.min.js"></script>
<!-- Player container element -->
<div id="rmp"></div>
<script>
  // Streaming source - in this case we specify a HLS source but we input a dummy URI
  const src = {
    hls: 'ima-dai'
  };
  // Player settings
  const settings = {
    licenseKey: 'your-license-key',
    src: src,
    width: 640,
    height: 360,
    ads: true,
    // enables IMA DAI support in Radiant Media Player
    adImaDai: true,
    // DAI VOD content source and video IDs
    adImaDaiVodContentSourceId: 'content-source-id',
    adImaDaiVodVideoId: 'video-id',
    // Backup HLS stream in case the DAI stream is not available when requested
    adImaDaiBackupStream: 'https://backup-hls-stream.m3u8',
    contentMetadata: {
      poster: [
        'https://your-poster-url.jpg'
      ]
    }
  };
  const rmp = new RadiantMP('rmp');
  rmp.init(settings);
</script>

DAI Live stream (HLS)

<!-- Include Radiant Media Player JavaScript file in your <body> or <head> -->
<script src="https://cdn.radiantmediatechs.com/rmp/9.16.6/js/rmp.min.js"></script>
<!-- Player container element -->
<div id="rmp"></div> 
<script>
  // Streaming source - in this case we specify a HLS source but we input a dummy URI
  const src = {
    hls: 'ima-dai'
  };
  // Player settings
  const settings = {
    licenseKey: 'your-license-key',
    src: src,
    width: 640,
    height: 360,
    ads: true,
    // enables IMA DAI support in Radiant Media Player
    adImaDai: true,
    // DAI Live stream asset key
    adImaDaiLiveAssetKey: 'live-asset-key',
    // Backup HLS stream in case the DAI stream is not available when requested
    adImaDaiBackupStream: 'https://backup-hls-stream.m3u8',
    contentMetadata: {
      poster: [
        'https://your-poster-url.jpg'
      ]
    }
  };
  const rmp = new RadiantMP('rmp');
  rmp.init(settings);
</script>

DAI Live Pod Serving (HLS)

<!-- Include Radiant Media Player JavaScript file in your <body> or <head> -->
<script src="https://cdn.radiantmediatechs.com/rmp/9.16.6/js/rmp.min.js"></script>
<!-- Player container element -->
<div id="rmp"></div>
<script>
  // Streaming source
  const src = {
    hls: 'https://xxx.yyy.google.com/masterPlaylist/aaaa-bbbb-cccc-dddd-eeee/master.m3u8?gen-seg-redirect=true&network=51636543&event=google-sample&pids=devrel4628000,devrel896000,devrel3528000,devrel1428000,devrel2628000,devrel1928000&seg-host=dai.google.com&stream_id=[[STREAMID]]'
  };
  // Player settings
  const settings = {
    licenseKey: 'your-license-key',
    src: src,
    width: 640,
    height: 360,
    // enables advertisement support
    ads: true,
    // enables IMA DAI support in Radiant Media Player
    adImaDai: true,
    // Dai Pod Network Code
    adImaDaiPodNetworkCode: '51636543',
    // Dai Custom Asset Key
    adImaDaiCustomAssetKey: 'google-sample',
    // Dai Api Key (optional)
    adImaDaiApiKey: '',
    contentMetadata: {
      poster: [
        'https://your-poster-url.jpg'
      ]
    }
  };
  const rmp = new RadiantMP('rmp');
  rmp.init(settings);
</script>

DAI VOD Pod Serving (HLS) BETA

<!-- Include Radiant Media Player JavaScript file in your <body> or <head> -->
<script src="https://cdn.radiantmediatechs.com/rmp/9.16.6/js/rmp.min.js"></script>
<!-- Player container element -->
<div id="rmp"></div>
<script>
  // Streaming source - set to 'vod-dai-stream' for DAI VOD Pod Serving (HLS)
  const src = {
    hls: 'vod-dai-stream'
  };

  // Function that returns a Promise that resolves to the stream URL to be used by the player coming from your video technology partner - streamId value will be passed to that function automatically
  function getUrl({ 'streamId': streamId }) {
    return new Promise(resolve => {
      resolve('https://encodersim.sandbox.google.com/masterPlaylist/9c654d63-5373-4673-8c8d-6d92b66b9d46/master.m3u8?gen-seg-redirect=true&network=51636543&event=google-sample&pids=devrel4628000,devrel896000,devrel3528000,devrel1428000,devrel2628000,devrel1928000&seg-host=dai.google.com&stream_id=' + streamId);
    });
  }

  // Player settings
  const settings = {
    licenseKey: 'your-license-key',
    src: src,
    width: 640,
    height: 360,
    // enables DAI VOD Pod Serving support in Radiant Media Player
    ads: true,
    adImaDai: true,
    adImaDaiVodPod: true,
    adImaDaiPodNetworkCode: '51636543',
    adImaDaiCustomAssetKey: 'google-sample',
    adImaDaiApiKey: '',
    // For DAI VOD Pods we need to get the stream URL from your video technology partner - adImaDaiVodPodRequestStreamURLCallback should be a function returning a Promise resolving to the stream URL
    adImaDaiVodPodRequestStreamURLCallback: getUrl,
    contentMetadata: {
      poster: [
        'https://your-poster-url.jpg'
      ]
    }
  };
  const rmp = new RadiantMP('rmp');
  rmp.init(settings);
</script>

Player settings

ads: Boolean

Activate or not ads within the player. Default: false.

adImaDai: Boolean

Enables HTML5 Google IMA DAI SDK support in Radiant Media Player. Default: false.

adLocale: String

The targeted language for the ads UI provided by the IMA HTML5 SDK. ISO 639-1 (two-letter) code. Default: 'auto', which means player will automatically detect viewer language.
Some languages like Portuguese may require more than a two-letter code. For Portuguese Portuguese use 'pt_pt' and for Brazilian Portuguese use 'pt_br'. Contact us if you are in doubt about which language code to use.

adImaDaiVodContentSourceId: String

DAI VOD content source id. Default: ''.

adImaDaiVodVideoId: String

DAI VOD video id. Default: ''.

adImaDaiLiveAssetKey: String

DAI live stream asset key. Default: ''.

adImaDaiPodNetworkCode: String

The network code for your AdManager360 account. Default: ''.

adImaDaiCustomAssetKey: String

The custom asset key that identifies your pod serving event in AdManager360. This may be created by your manifest manipulator or 3rd party pod serving partner. Default: ''.

adImaDaiApiKey: String

The DAI stream request API key. It's configured through the Google Ad Manager Admin UI and provided to the publisher to unlock their content. It verifies the applications that are attempting to access the content. Default: ''.

adImaDaiBackupStream: String

Backup HLS stream in case the DAI stream is not available when requested. Where hls.js is not available (iOS) this will be used as default HLS stream. Default: ''.

adImaDaiAdTagParameters: Object

You can override a limited set of ad tag parameters on your DAI stream request. See here for more information. Default: {}.

adImaDaiStreamActivityMonitorId: String

The ID to be used to debug the stream with the stream activity monitor. This is used to provide a convenient way to allow publishers to find a stream log in the stream activity monitor tool. Default: ''.

adImaDaiAuthToken: String

The stream request authorization token. Used in place of the API key for stricter content authorization. The publisher can control individual content streams authorizations based on this token. Default: ''.

omidAccessModeRules: Object

The OM SDK supports running verification scripts in different access modes, which control how much the verification script can access. The three access modes are: 'FULL', 'DOMAIN', 'LIMITED'. If you want to set different access modes for different verification script providers you can use omidAccessModeRules setting. Example: 

const omidAccessModeRules = {
  'OTHER': 'FULL', // 'OTHER' is used to set the default access mode for all vendors not explicitly included below
  'MOAT': 'FULL',
  'DOUBLEVERIFY': 'DOMAIN',
  'INTEGRAL_AD_SCIENCE' 'LIMITED',
  'NIELSEN': 'FULL',
  'COMSCORE': 'FULL',
  'MEETRICS': 'FULL',
  'GOOGLE': 'FULL' 
};

To implement 'CREATIVE' access mode, you must follow both of the following steps: sandbox the video player in a secure iframe, isolated from the rest of your site. Set the OmidAccessMode for your viewability partner to 'FULL'.

API events

  • adstreaminitialized: Fires when the DAI stream is initialized.
  • adloaded: Fires when the DAI stream manifest is available.
  • aderror: Fires when the DAI stream fails to load - if a backup stream is provided it will be loaded.
  • adbreakstarted: Fires when an ad break starts.
  • adbreakended: Fires when an ad break ends.
  • adprogress: Fires when there is an update to an ad's progress.
  • adcuepointschanged: Dispatched for on-demand streams when the cuepoints change.
  • adclick: Dispatched when the click element is clicked or tapped while an ad is being played.
  • adstarted: Fires when an ad starts.
  • adfirstquartile: Fires when an ad reaches its first quartile.
  • admidpoint: Fires when an ad reaches its midpoint.
  • adthirdquartile: Fires when an ad reaches its third quartile.
  • adcomplete: Fires when an ad is complete.
  • advideoclicked: Fires when a user clicks on the video without triggering clickthrough. When a "Learn More" button is shown, such as when on mobile web, the CLICK event is only fired when clicking the button. Other clicks will fire this event.
  • adskipped: Fires when the ad is skipped by the user.
  • adskippablestatechanged: Fires when the displayed ad's skippable state is changed.
  • adperiodstarted: Fires when an ad period starts. This includes the entire ad break including slate as well. This event will be fired even for ads that are being replayed or when seeking to the middle of an ad break.
  • adperiodended: Fires when an ad period ends..

API methods

  • play
  • pause
  • getVolume
  • setVolume
  • getMute
  • setMute
  • getAdOnStage
  • getAdPaused
  • getAdLinear
  • getAdSystem
  • getAdTitle
  • getAdDescription
  • getAdMediaWidth
  • getAdMediaHeight
  • getAdDuration
  • getAdPodInfo
  • getAdID
  • getAdvertiserName
  • getAdApiFramework
  • getAdCreativeId
  • getAdCreativeAdId
  • getAdDealId
  • getAdWrapperAdIds
  • getAdWrapperAdSystems
  • getAdWrapperCreativeIds
  • getCompanionAds
  • getAdParser
  • getAdUI
  • setAdUI
  • getAdParserBlocked
  • getAdUniversalAdIds
  • getAdUniversalAdIdRegistry
  • getAdSkippableState
  • getAdSkipTimeOffset

Advanced documentation for the above methods can be found here.

Companion ads

Below is an example of companion ads retrieval through our player API:

<!-- Include Radiant Media Player JavaScript file in your <body> or <head> -->
<script src="https://cdn.radiantmediatechs.com/rmp/9.16.6/js/rmp.min.js"></script>
<!-- Player container element -->
<div id="rmp"></div>
<!-- Our companion div -->
<div id="companionDiv"></div>
<script>
  // Streaming source - in this case we specify a HLS source but we input a dummy URI
  const src = {
    hls: 'ima-dai'
  };
  // Player settings
  const settings = {
    licenseKey: 'your-license-key',
    src: src,
    width: 640,
    height: 360,
    ads: true,
    // enables IMA DAI support in Radiant Media Player
    adImaDai: true,
    // DAI VOD content source and video IDs
    adImaDaiVodContentSourceId: 'content-source-id',
    adImaDaiVodVideoId: 'video-id',
    // Backup HLS stream in case the DAI stream is not available when requested
    adImaDaiBackupStream: 'https://backup-hls-stream.m3u8',
    contentMetadata: {
      poster: [
        'https://your-poster-url.jpg'
      ]
    }
  };
  const elementID = 'rmp';
  const rmp = new RadiantMP(elementID);
  // Get companion ad and append it to DOM when adstarted fires (if any available)
  const companionDiv = document.getElementById('companionDiv');
  rmp.on('adstarted', () => {
    const companionAds = rmp.getCompanionAds();
    for (let i = 0; i < companionAds.length; i++) {
      const companionAd = companionAds[i];
      if (companionAd.getWidth() == 300 && companionAd.getHeight() == 250) {
        companionDiv.innerHTML = companionAd.getContent();
      }
    }
    });
  rmp.init(settings);
</script>

Ad pods

Below is an example of ad pods data retrieval through our player API. See here for more information. 

<!-- Include Radiant Media Player JavaScript file in your <body> or <head> -->
<script src="https://cdn.radiantmediatechs.com/rmp/9.16.6/js/rmp.min.js"></script>
<!-- Player container element -->
<div id="rmp"></div>
<script>
  // Streaming source - in this case we specify a HLS source but we input a dummy URI
  const src = {
    hls: 'ima-dai'
  };
  // Player settings
  const settings = {
    licenseKey: 'your-license-key',
    src: src,
    width: 640,
    height: 360,
    ads: true,
    // enables IMA DAI support in Radiant Media Player
    adImaDai: true,
    // DAI Live stream asset key
    adImaDaiLiveAssetKey: 'live-asset-key',
    // Backup HLS stream in case the DAI stream is not available when requested
    adImaDaiBackupStream: 'https://backup-hls-stream.m3u8',
    contentMetadata: {
      poster: [
        'https://your-poster-url.jpg'
      ]
    }
  };
  const elementID = 'rmp';
  const rmp = new RadiantMP(elementID);
  rmp.on('adstarted', () => {
    const adPodInfo = rmp.getAdPodInfo();
    const adPosition = adPodInfo.getAdPosition();
    const maxDuration = adPodInfo.getMaxDuration();
    const podIndex = adPodInfo.getPodIndex();
    const timeOffset = adPodInfo.getTimeOffset();
    const totalAds = adPodInfo.getTotalAds();
  });
  rmp.init(settings);
</script>

CCPA Preparation

Information on how to properly comply with the California Consumer Privacy Act (CCPA) in conjunction to using Googe IMA DAI can be found here. Use the adImaDaiAdTagParameters setting to pass your parameters.

Requesting Consent from European Users (GDPR)

Information on how to properly request consent from european users in conjunction to using Googe IMA DAI can be found here. Use the adImaDaiAdTagParameters setting to pass your parameters.

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-2024 Radiant Media Player. All Rights Reserved.