Radiant Media Player

Documentation home page



CORS settings

Information on CORS (Cross-Origin Resource Sharing) can be obtained here.

For HLS or DASH streaming to HTML5 video, all HLS and DASH resources must be delivered with CORS headers permitting GET requests. This also applies for Chromecast casting or ajax loaded files by the player: WebVTT captions/chapters files, JSON playlist/related & preview thumbnails. This is not a specific requirement to Radiant Media Player but to any player streaming content to HTML5 video.

Please refer to the documentation of your streaming/hosting server for guidance on how to enable CORS. For Wowza Streaming Engine you may find help in this article.

For CORS settings related to video ads see this article


HLS streaming to Radiant Media Player Flash fallback: cross-domain policy file

To allow a Flash media player hosted on a web server to access content from another server (web server or streaming server), a properly set crossdomain.xml file is required. The crossdomain.xml file grants a web client the required permission to handle data across multiple domains. This is a requirement for streaming HLS content to Radiant Media Player Flash fallback.

Documentation for this cross-domain policy file can be found here on Adobe site.

Here is an example of cross-domain-policy for a least restrictive policy. Note that you must put your crossdomain.xml file at the root of your hosting domain.

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
    <site-control permitted-cross-domain-policies="all"/>
    <allow-access-from domain="*" secure="false"/>
    <allow-http-request-headers-from domain="*" headers="*" secure="false"/>
</cross-domain-policy>

Ill-configured cross-domain policy file is a common source of issues for HTTP streaming to Flash.

You must load the Flash player components (*.swf) with the same protocol as for your web page (i.e. HTTP === HTTP or HTTPS === HTTPS)

The above example is set to be least restrictive. It is recommended to fit your cross-domain policy file for your project requirement with more restrictive settings.


Automatic feature detection and bitrate switching

Radiant Media Player is equipped with an innovative feature detection technology. It will automatically pick the most-suitable streaming protocol based on the list of available protocols and dynamically add player features based on device capabilities.

With HLS or DASH the player will also automatically adapt to the device network conditions and switch between renditions when appropriate. The adaption logic is optimised to work for most common use-cases but we also provide advanced configuration options to fine tune the adaptation. Manual bitrate switching is also provided to the viewer whenever possible.

The detection and adaptation processes are transparent for the viewer.


Mobile-first and responsive player

Radiant Media Player is a mobile-ready web media player. It will automatically fit the targeted device based on parent container/viewport dimension. It also supports various touch events for a responsive user experience even on mobile devices. It will also automatically resize on orientation change or window resizing. See the player sizing options for more information on player responsiveness.


Required valid HTML5 DOCTYPE declaration

Your player must be implemented on a web page with a valid HTML5 DOCTYPE.

<!DOCTYPE html>

Recommended viewport settings

Radiant Media Player works with most modern mobile devices. In order for it to work at its best on these devices you need to specify a viewport meta tag in the <head> section of your HTML page. We recommend using the below setting. To find out more about the viewport meta tag you can read this Mozilla MDN article.

<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

Cloud-hosted player

All Radiant Media Player files are available through our global CDN (content delivery network) partner CloudFlare for best delivery to a global audience.

When using our cloud-player in production we recommend you use a specific player version with subresource integrity. Subresource integrity usage is optional. Subresource integrity will improve security and user experience when loading the player at no extra-cost of performance (where subresource integrity is not supported the player will still load but without the increased security features).

This is done by adding a script tag pointing to our cloud-player into your web page:

<script src="https://cdn.radiantmediatechs.com/rmp/4.5.15/js/rmp.min.js" 
  integrity="sha384-UOGahVOpoWqVqcgcNFKFOEWH3RV2PoLAq2jmk8g1u9VR/bL8dqsHAsDGwFHPkmuE"
  crossorigin="anonymous"></script>

You can also load the latest always up-to-date version of the player. In such case subresource integrity cannot be used.

<script src="https://cdn.radiantmediatechs.com/rmp/v4/latest/js/rmp.min.js"></script>

Self-hosted player

In this case scenario you are hosting the player files on your servers. Self-hosting is only available for active Radiant Media Player customers - it is not available during trial.

First download the player files in our back-end (click the "Download Player Files" tab). Unzip the files. You should have the following folder structure:

  • css/
  • dash/
  • examples/
  • flash/
  • hls/
  • js/
  • media/
  • rmp-vast/
  • three/
  • vtt/
  • LICENSE

Only static files are present within those folders. Folders must not be renamed. If you do not host the player files at the root of your site you must tell the player where to find the required files with the pathToRmpFiles configuration option (see below for an example).

On your web page include rmp.min.js file. Then add your wrapper div with its unique id, player configuration options and so on. Note that we do not provide subresource integrity base64-encoded cryptographic hash for self-hosting so if you want subresource integrity with your self-hosted rmp.min.js file, you must generate the hash on your own.

<script src="radiantmediaplayer/js/rmp.min.js"></script>
<div id="rmpPlayer"></div>
<script>
var bitrates = {
  mp4: [
    'https://www.rmp-streaming.com/media/bbb-576p.mp4'
  ]
};
var settings = {
  licenseKey: 'your-license-key', // Add your license key
  bitrates: bitrates,
  delayToFade: 3000,
  width: 640,
  height: 360,
  poster: 'https://www.radiantmediaplayer.com/images/poster-rmp-showcase.jpg',
  nav: true,
  pathToRmpFiles: 'radiantmediaplayer/' // Here we tell the player to look for the required files in radiantmediaplayer/
};
var elementID = 'rmpPlayer';
var rmp = new RadiantMP(elementID);
rmp.init(settings);
</script>

The pathToRmpFiles setting can either be a relative or absolute path or a URL.

Google-provided files required for some player features are not provided for self-hosting. Here is a non-exhaustive list:

Ads file for Google HTML5 IMA SDK (JavaScript)

https://imasdk.googleapis.com/js/sdkloader/ima3.js

Google Analytics file

https://www.google-analytics.com/analytics.js

Google Cast

https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1
Those files are provided and hosted by Google and always delivered over HTTPS. Referencing these files from Google's servers ensures that you get access to new features and product updates as they become available. Google recommends using those files from Google's servers and as such we follow this recommendation. This is also explained here. You can opt out of the related player features to avoid loading those files but the player will then not be able to use the disabled features.

HTTPS support

Cloud-hosted files for Radiant Media Player are HTTPS compatible. If you self-host the player files you must host them on a domain/server with a valid HTTPS certificate to be HTTPS compatible.

If you use HTTPS all the images, closed captions, logo and streaming URLs called by the player must be HTTPS compatible. Failure to do so can result in unwanted warning/behaviour for your viewers.


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

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

srcChangeAutoplay: Boolean

When using the setSrc API method this setting allows to control the behaviour of player after srcchanged event has fired. When set to true this setting will cause content to autoplay just after srcchanged event. When set to false the player will remain in a pause state after srcchanged event. Default: true. This setting is also compatible with playlist/related but when srcChangeAutoplay is set to false the playlistUpNextAutoplay and relatedUpNextAutoplay settings are automatically set to false.
Setting added with version 4.5.11


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: [
    'https://www.rmp-streaming.com/media/bbb-360p.mp4',
    'https://www.rmp-streaming.com/media/bbb-576p.mp4',
    'https://www.rmp-streaming.com/media/bbb-720p.mp4'
  ],
  webm: [
    'https://www.rmp-streaming.com/media/bbb-360p.webm',
    'https://www.rmp-streaming.com/media/bbb-576p.webm',
    'https://www.rmp-streaming.com/media/bbb-720p.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


Sharing

sharing: Boolean

Activate or not the sharing module. When open the sharing module offers various options to share the current content. Default: false.

sharingUrl: String

Set the URL that should be shared through sharingNetworks and the link field when the sharing module is displayed. The player uses the page URL as default but this can be overwritten through this setting. Default: ''.

sharingNetworks: Array

Set which social networks to display when sharing module is open. Supported social networks are: Facebook, Twitter, LinkedIn, Google Plus, Reddit & email. Example for all social networks: ['facebook', 'twitter', 'linkedin', 'googleplus', 'reddit', 'email']. Default: ['facebook', 'twitter', 'email'].
Setting added with version 4.0.4

sharingCode: String

Set the player code to be provided (iframe) for embedding purposes within the sharing module. It is up to you to generate and host the iframe player code as described here. Default: '' which means the code field is hidden in the sharing module.


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;
    body.appendChild(rmpContainer);
    // 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,
      delayToFade: 3000,
      width: 640,
      height: 360,
      poster: 'https://www.radiantmediaplayer.com/images/poster-rmp-showcase.jpg'
    };
    rmp = new RadiantMP(playerId);
    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/v4/latest/js/rmp.min.js';
  rmpScript.async = true;
  rmpScript.addEventListener('load', _onLoadAppendPlayer);
  rmpScript.addEventListener('error', _onErrorLog);
  head.appendChild(rmpScript);

})();

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
...
<head>
...  
<!-- 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.5.15/css/rmp-s1.min.css">
...
</head>
<body>
... some HTML code
<!-- Only include Radiant Media Player core JavaScript file once-->
<script src="https://cdn.radiantmediatechs.com/rmp/4.5.15/js/rmp.min.js" 
  integrity="sha384-UOGahVOpoWqVqcgcNFKFOEWH3RV2PoLAq2jmk8g1u9VR/bL8dqsHAsDGwFHPkmuE"
  crossorigin="anonymous"></script>
<!-- First player container-->
<div id="rmpPlayer1"></div>
... more HTML code
<!-- Second player container-->
<div id="rmpPlayer2"></div>
... more HTML code
<script>
// Settings
var bitrates1 = {
  hls: 'https://dqwp3xzzbfhtw.cloudfront.net/vod/smil:bbb.smil/playlist.m3u8'
};
var settings1 = {
  licenseKey: 'your-license-key',
  bitrates: bitrates1,
  delayToFade: 3000,
  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,
  delayToFade: 3000,
  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 
rmp1.init(settings1);
rmp2.init(settings2);
</script>
</body>

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.


Player 3rd-party dependencies

Radiant Media Player makes use of popular open-source software in order to provide advanced and reliable features. Those open-source projects are:

hls.js | https://github.com/dailymotion/hls.js
Apache 2.0 License available at https://github.com/video-dev/hls.js/blob/master/LICENSE

Shaka Player | https://github.com/google/shaka-player
Apache 2.0 License available at https://github.com/google/shaka-player/blob/master/LICENSE

three.js | https://github.com/mrdoob/three.js
MIT License available at https://github.com/mrdoob/three.js/blob/dev/LICENSE

vtt.js | https://github.com/mozilla/vtt.js
Apache 2.0 License available at https://github.com/mozilla/vtt.js/blob/master/LICENSE

flashls | https://github.com/mangui/flashls
Mozilla Public License, version 2.0 available at https://github.com/mangui/flashls/blob/dev/LICENSE

SWFObject | https://github.com/swfobject/swfobject
MIT License available at https://github.com/swfobject/swfobject/blob/master/LICENSE

AdBlock detector | https://github.com/InteractiveAdvertisingBureau/AdBlockDetection
BSD-3 License available at https://github.com/InteractiveAdvertisingBureau/AdBlockDetection/blob/master/License.md

The above player dependencies are open-source projects with business-friendly licenses allowing commercial use and distribution. As a distributor we took care of complying with the terms of these licenses and you do not need to take extra steps as long as you do not distribute the above mentioned dependencies. Radiant Media Player terms of services forbids the distribution, redistribution or resell of Radiant Media Player software.

Without the above open-source projects Radiant Media Player would probably not exist. We would like to take this opportunity to thank all open-source project owners. We are committed to actively participating in those projects to give back to the community. While Radiant Media Player itself is not open-source you can check our GitHub homepage for a list of open-source projects we manage.


Fallback player dependencies URL

It is a fact: network errors and timeout do happen when a web-page loads. With various devices accessing content from highly fluctuant network conditions they tend to append more often even with recent breakthrough in connected technologies. Radiant Media Player has various retry and error/timeout handling strategies when it comes to VAST and HLS, DASH or progressive download streaming. However before we can start loading and displaying media content we must first insure all required player components to start playback are available.

Radiant Media Player uses a modular approach to dependencies loading. When you include Radiant Media Player on a web-page it only loads a lightweight core JavaScript component required for instantiation. Many player features, such as video ads, HLS streaming, 360 video require additional components to be loaded from the server (those are mainly JavaScript files). In a nutshell when Radiant Media Player core library is loaded and init is called on player it will start to asynchronously load the required additional components based on input player settings. Because those components are keys for playback to start we must insure they are properly loaded and deal with occasional network errors and timeouts. The following settings can help us to do that:

useBackupLibs: Boolean

When one of the key component libraries fails to load due to a network error/timeout the player will automatically look into the backupLibs setting for a fallback option. If a valid fallback option is available the player will try to load it and resume functioning. Default: true.

backupLibs: Object

This object defines fallback location for player key components that can be used if the default resource becomes unavailable due to network errors/timeouts. This is set as follows (the value below are the default values):

backupLibs: {
  // three.js is required for 360 video
  three: 'https://cdn.jsdelivr.net/npm/three@latest',
  // hls.js is required for HLS streaming
  hlsjs: 'https://cdn.jsdelivr.net/npm/hls.js@latest',
  // Shaka player is required for DASH & HLS streaming
  shakaplayer:'https://cdn.radiantmediatechs.com/rmp/v4/latest/dash/shaka-player.compiled.js',
  // rmp-vast is required for video ads
  rmpvast:'https://cdn.radiantmediatechs.com/rmp/v4/latest/rmp-vast/rmp-vast.min.js',
  // swfobject is required for Flash fallback
  swfobject: 'https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js',
  // vtt.js is required for side-loaded WebVTT captions
  vttjs: 'https://cdn.radiantmediatechs.com/rmp/v4/latest/vtt/vtt.min.js'
  // player CSS file - the player will fill in the rest of the css URL
  css: 'https://cdn.radiantmediatechs.com/rmp/v4/latest/css/rmp-'
}

You can safely use the default values but for better recovery rates it is best that you host those libraries on your server and point to them with the backupLibs setting. You can find them in the self-hosted package.

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