Here we present general player settings. Specific player settings are available in each documentation page for the related feature.
licenseKey: String
The license key ties your player with an Internet domain. It is a mandatory requirement for the player to work. For active customers license keys and Internet domains are managed in Radiant Media Player back-end.
loop: Boolean
Command the player to loop after the video ends. This is only supported for on-demand video. Default: false.
The loop setting is not supported with video ads on iOS as it can create content recovery issue. When video ads are set the loop setting is automatically set to false on
iOS.
The loop setting is only supported with iOS on version 10+. It is automatically set to false on iOS 9 and below.
Do not use the loop setting with post-roll video ads. This use case it not supported.
scaleMode: String
This parameter changes the way the video is rendered within the stage. Possible values are 'letterbox' (a.k.a. fit), 'zoom', 'stretch', 'none'. Default: 'letterbox'. This feature makes use of the
object-fit CSS property for HTML5 video. It is to be noted that this CSS property is currently not supported in MS Edge
or Internet Explorer (for those browsers where object-fit is not supported the player uses a 'letterbox' fallback).
The scale mode setting only applies to video content. Linear video ads may not follow the scaleMode setting.
crossorigin: String
This parameter allows to set the crossorigin attribute for Radiant Media Player HTML5 video tag. Default: ''. Other possible values are: 'anonymous', 'use-credentials'. For 360 video this setting is automatically set to 'anonymous' for better cross-device support.
contentTitle: String
Set the content title string to be displayed on the player (beneath central play button). Default: '' which means no content title is displayed.
contentDescription: String
Set the media content description that could be used for better accessibility purposes. If set this setting will add a label link to the player container. This label will have the text provided by
contentDescription and the player container will have a aria-describedby referencing this label.
contentID: String
This setting allows to set a unique reference to the player (or the content displayed). It can be managed with API methods
getContentID &
setContentID. Default: ''.
videoTitle: String
This setting sets the title attribute of the HTML5 media element used by Radiant Media Player in iOS. This will only have effect in iOS as the title attribute
can be picked up by the OS to display content title in iOS control center. If contentTitle is set to a non-empty string, but
videoTitle is not set, contentTitle will be used as title attribute. In playlist/related the contentTitle of each item can be used as
videoTitle, but the initial value of
videoTitle must be set to 'playlist'. Default: '', which means title attribute is not set. API methods
getVideoTitle and setVideoTitle can be used to get|set
videoTitle (note that using setContentTitle will not set
videoTitle you need to explicitely use setVideoTitle).
offsetStartPosition: Number
This setting tells the player to start at a given timestamp. Must be expressed in millisecond. Default: 0, which means no offset.
allowLocalStorage: Boolean
The player does use
localStorage for the following purposes: to faster authenticate the player license, when using the
rememberVolume setting. The player does not store personal data when it uses localStorage, but only technical, anonymous variables. If you do not want the player to access the viewer localStorage set
allowLocalStorage to false. Note that this only applies to the player core library, 3rd-party libraries like the Google IMA SDK will use cookies and may require
specific consent handling depending on your targeted audience. Default: true.
initialVolume: Number
Command the player to start with a specific initial volume. Value must be a
Number between 0 (no volume) and 1 (maximum volume) where for example 0.5 will set the volume half-way. Default: 1.
When muted setting is set to true or on device where only muted autoplay is allowed (and autoplay is requested) this setting will have no effect
forceInitialVolume: Boolean
When both initialVolume and rememberVolume are enabled, rememberVolume will take precedence over initialVolume on page loads (assuming rememberVolume can be read from localStorage).
Setting forceInitialVolume to true will allow initialVolume to take precedence over
muted: Boolean
Command the player to be started as muted a.k.a. no audio. On iOS this setting is supported from iOS 10. Default: false.
permanentMuted: Boolean
Command the player to be started and to remain muted permanently (a.k.a. no audio). This differs from the
muted setting in the sense that the viewer will not be able to restore volume using the player controls, keyboard or device volume controls. On iOS this setting is supported from iOS 10. Default: false.
rememberVolume: Boolean
When set to true this setting will cause the player to use localStorage to save the current player volume each time it is changed by viewer. On a new page load if a saved volume value is detected in localStorage this saved value will be used to set initial player volume. Default: true.
poster: String
The path or URL to the poster (image) shown while the video is downloading, or until the user hits the play button. Default: ''.
endOfVideoPoster: String
The path or URL to the end of video poster (image) shown when the video content has completed. Default: ''.
posterScaleMode: String
This parameter changes the way the poster is rendered within the stage (same as scaleMode but for the poster frame). Possible values are 'letterbox', 'zoom', 'stretch', 'none'. Default: 'letterbox'. This feature makes use of the object-fit CSS property for HTML images. It is to be noted that this CSS property is currently not supported in MS Edge or Internet Explorer (for those browsers where object-fit is not supported the player uses a 'letterbox' fallback).
quickRewind: Number
This setting tells the player to display a quick rewind icon within the control bar. Interacting with this icon will cause the player to quickly rewind its play-head according to the quickRewind submitted value. Possible values for
quickRewind setting are: 5, 10, 30. Those values respectively represent a quick rewind of 5s, 10s or 30s. A common value in the industry is 10s but you may want to adapt this based on the type of content being delivered (e.g. short-form
vs. long-form content). Default: 0, which means no quick rewind icon is shown on player. The quick rewind icon is not available with the following options: HTML5 audio player, related content, live or DVR content. You can use both
quickRewind and quickForward at the same time.
quickForward: Number
This setting tells the player to display a quick forward icon within the control bar. Interacting with this icon will cause the player to quickly forward its play-head according to the quickForward submitted value. Possible values
for
quickForward setting are: 5, 10, 30. Those values respectively represent a quick forward of 5s, 10s or 30s. A common value in the industry is 10s but you may want to adapt this based on the type of content being delivered (e.g.
short-form vs. long-form content). Default: 0, which means no quick forward icon is shown on player. The quick forward icon is not available with the following options: HTML5 audio player, related content, live or DVR content. You can use both
quickRewind and quickForward at the same time.
Source streaming data (HLS, DASH or progressive download URLs) are passed to the player through the
src player setting:
src: Object
This setting holds streaming information for the content to be displayed: HLS streaming, DASH streaming or/and MP4/WebM progressive download. You must provide at least one streaming URL for the player to display content (exception being for outstream video ads which do not require actual content). For audio-only streaming refer to the audio-only documentation page. When multiple streaming protocols are provided the player will opt for the best suitable candidate based on device capabilities. Example:
var src = {
hls: 'https://your-hls-url.m3u8',
dash: 'https://your-dash-url.mpd',
mp4: [
'https://your-mp4-sd-url.mp4',
'https://your-mp4-hd-url.mp4',
'https://your-mp4-full-hd-url.mp4'
],
webm: [
'https://your-webm-sd-url.webm',
'https://your-webm-hd-url.webm',
'https://your-webm-full-hd-url.webm'
]
};
We recommend using fully qualified URLs for your streaming data. Relative or absolute path can also be used but beware of pathing issues.
The above example shows all player capabilities. You do not need to provide all streaming protocols variant to the player - only use the one that you are able to provide. Expected types for the
src object properties follow:
src.hls: String
src.dash: String
src.mp4: Array
src.webm: Array
The player will follow the following order when opting for a streaming protocol as multiple options may be supported by a given device:
Note that the
dashFirst and
webmFirst settings may be used to alter this order.
Depending on your use-case you could want to use:
Radiant Media Player can be loaded and run asynchronously. This might be required with certain types of JavaScript frameworks or CMS. You can also use this method to dynamically append the player to the DOM. Example:
(function () {
'use strict';
var head = document.head || document.getElementsByTagName("head")[0];
var body = document.body || document.getElementsByTagName("body")[0];
var rmpContainer, rmpScript, rmp;
// When Radiant Media Player JavaScript file is asynchronously loaded we append the player to the DOM
var _onLoadAppendPlayer = function () {
// First we create our player container and append it to DOM - in this case the body of our page but it can be anything
rmpContainer = document.createElement('div');
var elementID = 'rmpPlayer';
rmpContainer.id = elementID;
body.appendChild(rmpContainer);
// Then we define our player settings as usual
var src = {
hls: 'https://your-hls-url.m3u8'
};
var settings = {
licenseKey: 'your-license-key',
src: src,
width: 640,
height: 360,
poster: 'https://your-poster-url.jpg'
};
rmp = new RadiantMP(elementID);
rmp.init(settings);
};
// Log an error if we are unable to retrieve Radiant Media Player JavaScript file
var _onErrorLog = function () {
console.log('could not load Radiant Media Player JavaScript file');
};
// We create our script tag with async set to true and append it to our head
// When it loads we create our player instance
rmpScript = document.createElement('script');
rmpScript.src = 'https://cdn.radiantmediatechs.com/rmp/5.3.0/js/rmp.min.js';
rmpScript.async = true;
rmpScript.addEventListener('load', _onLoadAppendPlayer);
rmpScript.addEventListener('error', _onErrorLog);
head.appendChild(rmpScript);
})();