With the release of Radiant Media Player 5.0.5, we support the HTML5 Google IMA DAI SDK (dynamic ad insertion). 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 both live and on-demand video streaming with the HTML5 Google IMA DAI SDK through HLS (hls.js based implementation). Since version 5.7.0 we also support skippable ads with Google IMA DAI.
Using the Google's dynamic ad insertion requires publishers to have an Ad Manager 360 account and an account manager.
You can test your DAI stream in our tester here.
<!-- Include Radiant Media Player JavaScript file in your <body> or <head> --> <script src="https://cdn.radiantmediatechs.com/rmp/7.3.0/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 // Note that this is also the HLS stream that will be used on iOS since hls.js does not work on iOS adImaDaiBackupStream: 'https://backup-hls-stream.m3u8', // Forces support for hls.js in macOS and iPad Safari so that we can enable IMA DAI support there forceHlsJSOnMacOSIpadOSSafari: true, contentMetadata: { poster: [ 'https://your-poster-url.jpg' ] } }; const rmp = new RadiantMP('rmp'); rmp.init(settings); </script>
<!-- Player container element --> <div id="rmp"></div> <!-- Set up async player configuration options --> <script> // Streaming source - HLS in this example const src = { hls: 'https://your-hls-url.m3u8' }; // 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 // Note that this is also the HLS stream that will be used on iOS since hls.js does not work on iOS adImaDaiBackupStream: 'https://backup-hls-stream.m3u8', contentMetadata: { poster: [ 'https://your-poster-url.jpg' ] }, // Here we pass the ID of the player container so that the core library may automatically initialise player when it finishes loading asyncElementID: 'rmp' }; // We push the player settings to a global rmpAsyncPlayers variable if (typeof window.rmpAsyncPlayers === 'undefined') { window.rmpAsyncPlayers = []; } window.rmpAsyncPlayers.push(settings); </script> <script async src="https://cdn.radiantmediatechs.com/rmp/7.3.0/js/rmp.min.js"></script>
<!-- Include Radiant Media Player JavaScript file in your <body> or <head> --> <script src="https://cdn.radiantmediatechs.com/rmp/7.3.0/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 // Note that this is also the HLS stream that will be used on iOS since hls.js does not work on iOS adImaDaiBackupStream: 'https://backup-hls-stream.m3u8', contentMetadata: { poster: [ 'https://your-poster-url.jpg' ] } }; const rmp = new RadiantMP('rmp'); rmp.init(settings); </script>
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: ''.
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: ''.
Other generic ad-related settings may also work with our IMA DAI implementation, including:
adCountDown, autoplay, labels, labels,
adBlockerDetection
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..playpausegetVolumesetVolumegetMutesetMutegetAdOnStagegetAdPausedgetAdLineargetAdSystemgetAdTitlegetAdDescriptiongetAdMediaWidthgetAdMediaHeightgetAdDurationgetAdPodInfogetAdIDgetAdvertiserNamegetAdApiFrameworkgetAdCreativeIdgetAdCreativeAdIdgetAdDealIdgetAdWrapperAdIdsgetAdWrapperAdSystemsgetAdWrapperCreativeIdsgetCompanionAdsgetAdParsergetAdUIsetAdUIgetAdParserBlockedgetAdUniversalAdIdsgetAdUniversalAdIdRegistrygetAdSkippableStategetAdSkipTimeOffsetAdvanced documentation for the above methods can be found here.
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/7.3.0/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 // Note that this is also the HLS stream that will be used on iOS since hls.js does not work on iOS adImaDaiBackupStream: 'https://backup-hls-stream.m3u8', contentMetadata: { poster: [ 'https://your-poster-url.jpg' ] } }; const elementID = 'rmp'; const rmp = new RadiantMP(elementID); const rmpContainer = document.getElementById(elementID); // Get companion ad and append it to DOM when adstarted fires (if any available) const companionDiv = document.getElementById('companionDiv'); rmpContainer.addEventListener('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>
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/7.3.0/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 // Note that this is also the HLS stream that will be used on iOS since hls.js does not work on iOS adImaDaiBackupStream: 'https://backup-hls-stream.m3u8', contentMetadata: { poster: [ 'https://your-poster-url.jpg' ] } }; const elementID = 'rmp'; const rmp = new RadiantMP(elementID); const rmpContainer = document.getElementById(elementID); rmpContainer.addEventListener('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>
On iOS Safari, last major environment where Media Source Extensions are still not available in 2018, hls.js does not go. By default if a HLS stream is provided through the adImaDaiBackupStream setting, we will use this HLS source
for iOS Safari. However this does not enable ads on iOS Safari. In order to do so we need to use the client-side
HTML5 IMA SDK (as opposed to the DAI IMA SDK). This can be done as follows:
// We define DAI player settings for non-iOS devices ... const daiSettings = {...}; // ... and client-side IMA player settings for iOS devices const iosImaSettings = {...}; const elementID = 'rmp'; const rmp = new RadiantMP(elementID); // We detect iOS and use the relevant settings to init player const env = rmp.getEnvironment(); const ios = env.isIos[0]; if (ios) { rmp.init(iosImaSettings); } else { rmp.init(daiSettings); }
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.
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.
©2015-2021 Radiant Media Player. All rights reserved.