Radiant Media Player

Generic player settings

Documentation sections

Generic player settings

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.

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

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.

preload: String

Radiant Media Player supports the HTML5 media preload attribute for progressive download & native HLS (native HLS is mainly used for iOS/macOS Safari). Accepted values are 'none', 'metadata' and 'auto'. Default: 'none'. Note that for HLS (MSE-based) & DASH streaming this setting will have no effect and the player will behave as if preload was set to 'none'. On mobile devices preload is always set to 'none'. When autoplay is set to true preload is always set to 'auto'. Also note that while the preload attribute may be set to a specific value there is no guarantee that the browser will follow this attribute - this is merely provided as an indication.

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.

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).

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: ''.

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: ''.

appName: String

This setting allows to set a unique application name when developing a web-based mobile application with Radiant Media Player. This application name will be used as an identifier in our back-end reporting section. It can be read with API method getAppName. Default: ''.

offsetStartPosition: Number

This setting tells the player to start at a given timestamp. Must be expressed in millisecond. Default: 0, which means no offset.
Setting added with version 4.4.7

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, chapter markers, live or DVR content.
Setting added with version 4.6.10

Input streaming data

Streaming information (HLS, DASH or progressive download URLs) are passed to the player through the bitrates player setting:

bitrates: 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 bitrates = { 
  hls: 'https://dqwp3xzzbfhtw.cloudfront.net/vod/smil:bbb.smil/playlist.m3u8',
  dash: 'https://dqwp3xzzbfhtw.cloudfront.net/vod/smil:bbb.smil/manifest.mpd',
  mp4: [
  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 bitrates object properties follow:

bitrates.hls: String
bitrates.dash: String
bitrates.mp4: Array
bitrates.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:

  • HLS to HTML5 video (MSE-based) first
  • HLS to HTML5 video (native) second
  • DASH to HTML5 video (MSE-based) third
  • MP4 progressive download to HTML5 video fourth
  • WebM progressive download to HTML5 video fifth
  • HLS to Flash last (this is only required to support Internet Explorer on Windows 7 - read our deprecating Flash support article for more information)

Note that the dashFirst and webmFirst settings may be used to alter this order.

Depending on your use-case you could want to use:

  • HLS alone
  • DASH + HLS fallback (or DASH + MP4 progressive download fallback) - fallback is required to target iOS as DASH is not available on iOS
  • MP4 progressive download + WebM progressive download fallback (WebM fallback is optional but may help to support older browsers)

Playback rate

nav: Boolean

Activate or not the playback rate modifier module within the player. Default rates are: x0.25, x0.5, x1, x1.5, x2, x4. Default: false.
On Android playback rate modifier is only supported for Firefox 47+ and Chrome 52+ for Android 5+.

navRates: Array

Set the playback rates to be used for the nav setting. Must be submitted as an array of numbers. Maximum array length is 6 (if array length is greater than 6 - overflow items are truncated). Default: [0.25, 0.5, 1, 1.5, 2, 4].
Setting added with version 4.1.3

Async player loading

Radiant Media Player can be loaded and run asynchronously. 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 - in this case the body of our page but it can be anything
    rmpContainer = document.createElement('div');
    var playerId = 'rmpPlayer';
    rmpContainer.id = playerId;
    // Then we define our player settings as usual
    var bitrates = {
      hls: 'https://dqwp3xzzbfhtw.cloudfront.net/vod/smil:bbb.smil/playlist.m3u8'
    var settings = {
      licenseKey: 'your-license-key',
      bitrates: bitrates,
      width: 640,
      height: 360,
      poster: 'https://www.radiantmediaplayer.com/images/poster-rmp-showcase.jpg'
    rmp = new RadiantMP(playerId);

  // 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.async = true;
  rmpScript.addEventListener('load', _onLoadAppendPlayer);
  rmpScript.addEventListener('error', _onErrorLog);
  rmpScript.src = 'https://cdn.radiantmediatechs.com/rmp/v4/latest/js/rmp.min.js';


Multiple instances

Best practices for achieving multiple player instances on the same page

  • Include player library rmp.min.js only once on your page
  • It is recommended to preload player CSS in your <head> for faster painting of player
<!-- Here we preload our CSS; note the required id rmp-dress-code on the link tag -->
<!-- You can change skin by replacing rmp-s1.min.css with rmp-s*.min.css (where * is 1, 2, 3 or 4) -->
<link type="text/css" rel="stylesheet" id="rmp-dress-code" href="https://cdn.radiantmediatechs.com/rmp/4.7.0/css/rmp-s1.min.css">
... some HTML code
<!-- Only include Radiant Media Player core JavaScript file once-->
<script src="https://cdn.radiantmediatechs.com/rmp/4.7.0/js/rmp.min.js" 
<!-- First player container-->
<div id="rmpPlayer1"></div>
... more HTML code
<!-- Second player container-->
<div id="rmpPlayer2"></div>
... more HTML code
// Settings
var bitrates1 = {
  hls: 'https://dqwp3xzzbfhtw.cloudfront.net/vod/smil:bbb.smil/playlist.m3u8'
var settings1 = {
  licenseKey: 'your-license-key',
  bitrates: bitrates1,
  width: 640,
  height: 360,
  poster: 'https://www.radiantmediaplayer.com/images/poster-rmp-showcase.jpg'
var bitrates2 = {
  hls: 'https://dqwp3xzzbfhtw.cloudfront.net/vod/smil:bbb-long.smil/playlist.m3u8'
var settings2 = {
  licenseKey: 'your-license-key', 
  bitrates: bitrates2,
  width: 640,
  height: 360,
  poster: 'https://www.radiantmediaplayer.com/images/poster-rmp-showcase.jpg',
  nav: true
// Elements
var element1 = 'rmpPlayer1';
var element2 = 'rmpPlayer2';
// Create new objects based on RadiantMP constructor
var rmp1 = new RadiantMP(element1);
var rmp2 = new RadiantMP(element2);
// Initialisation with settings 

Each instance of Radiant Media Player can then be manipulated with our JavaScript API.

When multiple players are on the same page only the first one (first init called) gets Google Cast support.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License.