Documentation

Offline storage & playback

Radiant Media Player

Generic player settings

Sections

Generic player settings
Content metadata setting
Volume settings
Settings using localStorage (volume, current time, quality)
GDPR compliance
Quick rewind & forward
Source streaming data
Dynamic player appending
Multiple instances

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

hideInitialBlackFrameWhenNoPoster: Boolean

When a live or on-demand stream loads into the player it is possible to display the first frame of the stream as a poster frame (provided no poster has been set through the contentMetadata setting). This feature is not supported in iOS or macOS Safari. Default: true.

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.

bitrateDataDisplayed: Boolean

The quality module can display various information about the HLS or DASH stream currently displayed to the viewer. The player will always show the height of the currently available rendition - on top of that the player can also display the bitrate in kbps or Mbps. Default: 'kbps'. Other possible values are 'none' or 'Mbps'.

doubleClickForFullscreen: Boolean

On device where double clicking is possible, a double click action will cause player to enter (or exit) fullscreen. Default: true.

pauseContentWhenViewingAreaIsClicked: Boolean

By default on desktop, when the player viewing area is clicked, content pauses (or resumes). Setting pauseContentWhenViewingAreaIsClicked to false will prevent this behavior. Default: true.

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, Media Notifications and Google Cast
  description: 'My content description', // Used for accessibility, Media Notifications
  artist: 'My artist', // Used for Media Notifications
  album: 'My album', // Used for 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 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://dummyposter.com/1xDPR', // Used for device with 1 <= DPR < 2 (DPR = device pixel ratio)
    'https://dummyposter.com/2xDPR', // Used for device with 2 <= DPR < 3
    'https://dummyposter.com/3xDPR', // Used for device with 3 <= DPR < 4
    'https://dummyposter.com/4xDPR' // Used for device with DPR > 4 - the higher DPR will be used for Google Cast poster frame
  ],
  endOfVideoPoster: [ // Used for end of video poster frame - player will choose best image based device specificity
    'https://dummyendofvideoposter.com/1xDPR', // Used for device with 1 <= DPR < 2 (DPR = device pixel ratio)
    'https://dummyendofvideoposter.com/2xDPR', // Used for device with 2 <= DPR < 3
    'https://dummyendofvideoposter.com/3xDPR', // Used for device with 3 <= DPR < 4
    'https://dummyendofvideoposter.com/4xDPR' // Used for device with DPR > 4 - the higher DPR will be used for Google Cast poster frame
  ],
  thumbnail: 'https://uri-to-thumnail', // Thumbnail for playlist or related
  duration: 'HH:mm:ss' // Duration for related
}

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.

More information on Media Notifications (Media Session API) and what are the related features they offer can be found here. As of December 2019, this is supported in Chrome 57+ for Android and Chrome 73+ for Desktop.

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 12+. 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 12+. Default: false.

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, rememberCurrentTime, rememberQuality 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.

Please review our blog post GDPR compliancy while using Radiant Media Player for additional information.

strictGdprCompliance: Boolean

When set to true, allow the player to use secondary license servers located inside the European Union. Only use if you have a business requirement to do so. 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:

const 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:

const head = document.head || document.getElementsByTagName("head")[0];
const body = document.body || document.getElementsByTagName("body")[0];
let rmpContainer, rmpScript, rmp;

// When Radiant Media Player JavaScript file is asynchronously loaded we append the player to the DOM
const _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');
  const elementID = 'rmp';
  rmpContainer.id = elementID;
  body.appendChild(rmpContainer);
  // Then we define our player settings as usual
  const src = {
    hls: 'https://your-hls-url.m3u8'
  };
  const 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
const _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/7.0.3/js/rmp.min.js';
rmpScript.async = true;
rmpScript.addEventListener('load', _onLoadAppendPlayer);
rmpScript.addEventListener('error', _onErrorLog);
head.appendChild(rmpScript);

Multiple instances

This section highlights best practices for using multiple player instances on the same web 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 is a complete example:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- 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/7.0.3/css/rmp-s1.min.css">
  <title>TODO supply a title</title>
</head>
<body>
  <!-- Only include Radiant Media Player core JavaScript file once-->
  <script src="https://cdn.radiantmediatechs.com/rmp/7.0.3/js/rmp.min.js"></script>
  <!-- First player container-->
  <div id="rmp1"></div>
  <!-- Second player container-->
  <div id="rmp2"></div>
  <script>
  // Settings for player 1
  const src1 = {
    hls: 'https://your-hls-url-1.m3u8'
  };
  const settings1 = {
    licenseKey: 'your-license-key',
    src: src1,
    width: 640,
    height: 360,
    contentMetadata: {
      poster: [
        'https://your-poster-url-1.jpg'
      ]
    }
  };
  // Settings for player 2
  const src2 = {
    hls: 'https://your-hls-url-2.m3u8'
  };
  const settings2 = {
    licenseKey: 'your-license-key', 
    src: src2,
    width: 640,
    height: 360,
    contentMetadata: {
      poster: [
        'https://your-poster-url-2.jpg'
      ]
    }
  };
  // Elements
  const element1 = 'rmp1';
  const element2 = 'rmp2';
  // Create new objects based on RadiantMP constructor
  const rmp1 = new RadiantMP(element1);
  const rmp2 = new RadiantMP(element2);
  // Initiating both players 
  rmp1.init(settings1);
  rmp2.init(settings2);
  </script>
</body>
</html>

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.

Sections

Generic player settings
Content metadata setting
Volume settings
Settings using localStorage (volume, current time, quality)
GDPR compliance
Quick rewind & forward
Source streaming data
Dynamic player appending
Multiple instances

Radiant Media Player

Generic player settings

Sections

Generic player settings

Content metadata setting

Volume settings

Settings using localStorage (volume, current time, quality)

Quick rewind & forward

Source streaming data

Dynamic player appending

Multiple instances

Sections