Radiant Media Player provides a complete client-side video ads solution. To get started you just need to get your hands on an ad tag URL from your ad provider and add it to your player code.
Here is a complete example:
<!-- Include Radiant Media Player JavaScript file in your <body> or <head> --> <script src="https://cdn.radiantmediatechs.com/rmp/9.15.19/js/rmp.min.js"></script> <!-- Player container element --> <div id="rmp"></div> <script> // Streaming source - HLS in this example const src = { hls: 'https://your-hls-url.m3u8' // You may provide alternate or different source types - the player will automatically pick the best option // dash: 'https://your-dash-url.mpd' // mp4: 'https://your-mp4-url.mp4' }; // Player settings const settings = { licenseKey: 'your-license-key', src: src, width: 640, height: 360, ads: true, // We pass our adTag here - the player will attempt to load it upon startup adTagUrl: 'https://your-ad-tag-url', 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, // We pass our adTag here - the player will attempt to load it upon startup adTagUrl: 'https://your-ad-tag-url', 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/9.15.19/js/rmp.min.js"></script>
Radiant Media Player is a Google's video technology partner and has its IMA HTML5 SDK integration certified by Google. As such you are sure you can generate revenue according to best practices in the industry.
You can make video ad requests to any VAST-compliant ad server with Radiant Media Player. Supported 3rd-party ad servers include:
VAST 4 | VAST 3 | VAST 2 | VMAP 1.0.1 | SIMID 1.0 | VPAID 2 (HTML5/JavaScript) |
---|---|---|---|---|---|
(1) | (2) | (3) |
More support information for the Google HTML5 IMA SDK can be found here.
We provide the technology for you to render video ads in our web video player. Revenue generated with video ads remains 100% yours.
Ads may work in other environments with Radiant Media Player but they are not officially supported.
When version for a browser is not specified we support the latest version of this browser.
The following streaming protocols can be used for media content delivery when video ads are enabled within the player (this is for the media content behind the ad, not the ad itself, see next section for the ad):
You can also display audio-only ads within our audio-only player.
A VAST response should hold information about the nature of the creative (type, size, bitrate ...) being returned. A VAST response can hold several formats at various bitrates so that an ad can be displayed on a larger range of devices. Radiant Media Player is equipped with a bandwidth and viewport size detection mechanism for playback of video ads. As such and assuming the creative type, size and bitrate can be found in the VAST response the player will automatically select the best suitable candidate to playback the ad based on device capabilities:
Example of formats (MIME types) that can be used for the ad:
For an example of a VAST response with a combination of formats see this adTag.
It is possible to stream video ads with adaptive bitrate streaming in HLS. However this is only possible where HLS is natively supported in HTML5 video (macOS Safari, iOS Safari, Android Chrome, MS Edge Legacy and MS Edge 79+) and assuming a proper HLS stream is present in the VAST response.
When serving ads from Google Ads network (Google Ad Manager, AdSense for Video) you must use the IMA HTML5 SDK with our player.
ADX & AdSense for Video ads will not render with our
VAST parser rmp-vast.
Google Ad Manager ads may render with rmp-vast but we cannot guarentee full support.
Please read our
using the IMA HTML5 SDK in a WebView section for
complementary information
on using the IMA HTML5 SDK in a WebView. The choice of VAST parser is made through the
adParser
player setting.
To be servable in a JavaScript environment a VAST ad server's response must include the following HTTP CORS headers:
You can find more information on the subject here.
Radiant Media Player support autoplay of pre-roll linear ad assets on desktop and mobile devices. Read our autoplay support documentation page for more information.
ads: Boolean
Activate or not ads within the player. Default: false
.
adTagUrl: String
Specifies the ad tag url that is requested by the player from the
ad server. Default: ''
.
We recommend
using fully qualified URLs for the adTagUrl
setting
adsResponse: String
Specifies a VAST document (as in XML string) to be used as the ads
response instead of making a
request via an ad tag url. This can be useful for debugging and other situations where a
VAST response is
already available. Default: ''
. Using the adTagUrl
setting is
preferred
when both options are available.
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.
adForceNativeFullscreenOnIosForAds: Boolean
Forces native fullscreen on iOS when video ads are enabled in the player. This allows a fullscreen experience
for video ads on iOS but skippable video ads will not be skippable when in fullscreen mode. When set to false
the player will use an emulated fullscreen mode that allows for skippable ads to be skippable in fullscreen
mode at the cost of a lesser viewing experience in fullscreen mode. Default: true
.
adEnablePreloading: Boolean
Enables ad
media preloading
for the Google IMA SDK. This should be enabled when
using VMAP/Ad with when mid-roll or post-roll. Default: false
.
adCountDown: Boolean
A countdwon to be displayed within the player control bar. It shows the
remaining time for the video ads. Default: false
.
If you are using
video ads from AdSense or Ad Exchange set adCountDown: true
. This is because
most ads from AdSense or Ad Exchange
already have a built-in ad countdown.
adMaxNumRedirects: Number
Specifies the maximum number of redirects before the
subsequent redirects will be denied, and the ad load aborted. The number of redirects
directly affects latency and thus user experience. This applies to all VAST wrapper
ads. Default: 4
.
adShowRemainingTime: Boolean
When set to true, a remaining time bar UI will be displayed
on top of the player control bar for linear creatives. Default: false
.
adTagReloadOnEnded: Boolean
When set to true this setting will cause the player to attempt to reload
the initial adTag (or VMAP/ad-schedule) when a user requests content to be played after
having ended. This
setting is compatible with the adTagWaterfall
setting
and outstream ads.
Default: true
.
adLoadVastTimeout: Number
Timeout (in milliseconds) when loading a VAST single
wrapper. Default: 8000
, which represents a 8 seconds
timeout.
adLoadMediaTimeout: Number
Timeout (in milliseconds) when loading a creative media
file (after a successful VAST response). If loading takes longer than this timeout,
the ad playback is cancelled and the next ad in the pod plays or content resumes.
Default: 12000
which represents a 12 seconds timeout.
adLiveStreamPrefetchSeconds: Number
This property specifies the maximum number of seconds the IMA SDK should wait before reaching out to the ad
server after you call AdsLoader.requestAds() for a live stream. The actual request time will be randomized.
For example, if you set AdsRequest.liveStreamPrefetchSeconds to 30, the SDK waits 0 to 30 seconds after you
call AdsLoader.requestAds() to actually make the request to the server. Default: 0
.
adAutoAlign: Boolean
Set to false if you wish to have fine grained control
over the positioning of all non-linear ads. If this value is true, the ad is positioned
in the bottom center. If this value is false, the ad is positioned in the top left
corner. Equivalent to
AdsRenderingSettings.autoAlign
IMA HTML5 SDK setting. Default: true
.
adShowMarkers: String
Adds markers on timeline for on-demand streams indicating to
viewers when ad-breaks are scheduled. Works for VMAP tags and our ad-scheduler. Default:
true
.
adMaxBitrate: Number
Maximum recommended bitrate. The value is in kbit/s. The
player will pick media with bitrate below the specified max from the VAST response, or
the closest bitrate if there is no media with lower bitrate found. Default:
-1
, means
the bitrate will automatically be selected by the player.
adForceNonLinearFullSlot: Boolean
Forces non-linear AdSense ads only to render as linear fullslot.
If set, the content video will be paused and the non-linear text or image ad will be
rendered as fullslot. The content video will resume once the ad has been skipped or
closed. Default: false
.
adNonLinearAdSlotWidth: Number
Specifies the width of the rectangular area within which a non linear ad is displayed. This value is used as
one of the criteria for ads selection. This value does not need to match actual ad's width. Default:
-1
. By default the player uses the current player width for this value, but it can be customized
to address specific use-cases.
adNonLinearAdSlotHeight: Number
Specifies the height of the rectangular area within which a non linear ad is displayed. This value is used as
one of the criteria for ads selection. This value does not need to match actual ad's height. Default:
-1
. By default the player uses the current player height for this value, but it can be customized
to address specific use-cases.
adUseStyledNonLinearAds: Boolean
Render non-linear ads with a close and recall button.
Default: true
.
adContinuousPlayback: String
Sets the
continuous
play context for an ads
request. Available values are 'auto'
, 'yes'
, 'no'
.
Default: 'auto'
which means 'yes'
for
playlist/related and 'no'
for other cases.
adParser: String
Specifies which VAST parser the player should use. Possible values are
'rmp-vast'
and 'ima'
.
Default: 'ima'
.
adPageUrl: String
Specifies the full url of the page that will be included in the Google ad request for targeting purposes. The url needs to be a valid url. If specified, this value will be used for the [PAGEURL] VAST macro. Default: '' (which means that adsRequest.pageUrl will not be set).
adCookiesEnabled: Boolean
Whether the SDK should store a Google Ad Manager cookie (GFP Cookie) on the publisher's domain, as a
first-party cookie. This enables persistence across multiple visits to the same domain without using
third-party cookies. Defaults to true.
This setting will not affect other cookies which may be set by other parties or for other purposes. User
consent and opt-outs may also disable usage of first-party cookies. These will be picked up by publisher's
usage of an IAB compliant Consent Management Provider, if in the same frame. Default: true
.
adPpid: String
Sets the publisher provided id to be used with Google IMA SDK (client-side video advertisement only).
Default: ''
.
adSessionId: String
Sets the session ID to be used with Google IMA SDK (client-side video advertisement only). This is a
temporary
random ID. It is used exclusively for frequency capping. A session ID must be a UUID. Default: ''
.
adCompanionBackfillMode: String
Sets the companion backfill mode to be used with Google IMA SDK (client-side video advertisement only).
Possible values are 'always' or 'onmasterad'. Default: 'always'
.
adContentDuration: Number
Specifies the duration of the content in seconds to be shown.
Used in AdX requests only. Automatically obtained for VOD content if not set.
Default: 0
.
adContentKeywords: String
Specifies the keywords used to describe the content to be shown.
Used in AdX requests only. Default: ''
.
adContentTitle: String
Specifies the title of the content to be shown.
Used in AdX requests only. Default: ''
.
We support OMID (Open Measurement (OM) Web SDK) with Google IMA to enable third-party viewability and verification measurement. This feature is enabled by default. For more information about OMID support in Google IMA SDK see this documentation.
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'.
See the ad tag variables & macros documentation page.
By default when ads
setting is set to true it automatically detects ad-blocker.
If an ad-blocker is detected the player fires a
'adblock' event. This however does not prevent playback of content, it just notifies the publisher that a
video ad-blocker has been detected.
adOnAdBlockPreventPlayback: Boolean
When enabled, this setting will prevent playback of content when a video ad-blocker is detected and present a
viewer with a message: 'AdBlock detected' and 'Our website needs to show advertisement to our viewers - please
allow ads on our website' (in the appropriate language for the viewer). A button will also be shown allowing
the viewer to reload page after having disabled the ad-blocker. The message can be customized through the
hint.ads.adBlockDetectedMessage
and hint.ads.adBlockMessageMessageExtended
player
labels. Default: false
.
It is to be noted that the Google IMA HTML5 SDK does not officially support
being used in a Ionic, Flutter, Apache Cordova, WebView or Electron application (iOS, Android or Desktop native apps). As such the preferred solution is to use our VAST manager
rmp-vast in such environments.
The choice of VAST parser is made through the adParser
player setting.
The following limitations should be noted when still using the Google IMA HTML5 SDK in an Ionic, Flutter, Apache Cordova, WebView or Electron application:
The following limitations should be noted when using the IMA SDK in an Electron app:
Information on how to properly comply with the California Consumer Privacy Act (CCPA) in conjunction to using Googe IMA can be found here.
Information on how to properly request consent from european users in conjunction to using Googe IMA can be found here.
©2015-2024 Radiant Media Player. All Rights Reserved.