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.

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.

offsetStartPosition: Number

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

automaticFullscreenOnLandscape: Boolean

On mobile devices, the player can be configured to automatically enter fullscreen as orientation changes to Landscape. When orientation changes to Portrait the player will automatically leaves fullscreen. Default: false.


Content metadata setting

contentMetadata: Object
contentMetadata: {
  title: 'My content title', // Title will show on top right corner of player when available, also used for accessibility, Android Media Notifications, Google Cast and title attribute of the HTML5 media element
  description: 'My content description', // Used for accessibility, Android Media Notifications
  artist: 'My artist', // Used for Android Media Notifications
  album: 'My album', // Used for Android Media Notifications
  id: 'My id', // Used to uniquely identify media
  releaseDate: '2016-02-10', // Used for Google Cast (ISO 8601 date and/or time when the content was released)
  googleCastType: 'GENERIC', // Used for Google Cast (Availables values are 'MOVIE', 'TV_SHOW' or 'GENERIC')
  artwork: [ // Used for Android Media Notifications - if none provided the poster attribute will be used
    { src: 'https://dummyimage.com/96x96',   sizes: '96x96',   type: 'image/png' },
    { src: 'https://dummyimage.com/128x128', sizes: '128x128', type: 'image/png' },
    { src: 'https://dummyimage.com/192x192', sizes: '192x192', type: 'image/png' },
    { src: 'https://dummyimage.com/256x256', sizes: '256x256', type: 'image/png' },
    { src: 'https://dummyimage.com/384x384', sizes: '384x384', type: 'image/png' },
    { src: 'https://dummyimage.com/512x512', sizes: '512x512', type: 'image/png' }
  ],
  poster: [ // Used for poster frame for the player - player will choose best image based device specificity
    'https://dummyimage.com/1xDPR', // Used for device with 1 <= DPR < 2 (DPR = device pixel ratio)
    'https://dummyimage.com/2xDPR', // Used for device with 2 <= DPR < 3
    'https://dummyimage.com/3xDPR', // Used for device with 3 <= DPR < 4
    'https://dummyimage.com/4xDPR' // Used for device with DPR > 4 - the higher DPR will be used for Google Cast poster frame
  ]
}

Content metadata can be updated with our player API through the getContentMetadata / setContentMetadata APi methods. This can be useful when using the setSrc API method to update metadata as player source changes.


Volume settings

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.


Poster settings

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


Settings using localStorage (volume, current time, quality)

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.

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 volume value will be used to set initial player volume. Default: true.

rememberCurrentTime: Boolean

When set to true this setting will cause the player to use localStorage to save the current time each time it changes (only works for on-demand streaming). On a new page load if a saved current time value is detected in localStorage this saved current time value will be used to start the player at the last point it was watched. Default: false. When used this setting overrides offsetStartPosition setting. The saved current time does not transfer on other devices, this kind of logic can be built on top the player but requires some server-side logic to hold the saved current time and such implementations fall outside our scope of support.

rememberQuality: Boolean

When set to true this setting will cause the player to use localStorage to save the current quality each time it is changed by viewer. On a new page load if a saved quality value is detected in localStorage this saved quality value will be used to set initial quality for the player. Works with HLS, DASH and progressive download streaming. Default: false.


Quick rewind & forward

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: related content or live 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: related content or live content. You can use both quickRewind and quickForward at the same time.


Source streaming data

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:

  • 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

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)

Dynamic player appending

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,
      contentMetadata: {
        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.6.0/js/rmp.min.js';
  rmpScript.async = true;
  rmpScript.addEventListener('load', _onLoadAppendPlayer);
  rmpScript.addEventListener('error', _onErrorLog);
  head.appendChild(rmpScript);

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