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 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 Enegine 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 phones. 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 to use 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 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 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.4.19/js/rmp.min.js" 
  integrity="sha384-MHxuw6s8n+Uh8xT1LYC0zcidvLkX9DN0otZPYoamhjIU8svCQARWXpRYEXV6o6LI"
  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.
On iOS 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 paramater 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


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'
  ]
};

You are required to use fully qualified URL for DASH and HLS streaming. Relative or absolute path are only supported for progressive download.

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.


Logo inclusion

logo: String

Path or URL to PNG, JPEG or GIF logo. Default: '' which implies no logo is wanted on the player. Suggested size for logo: 200px width x 50px height. By default the logo is positioned at the top-left corner of the video to fit in with other player UI elements. You can move it with the logoPosition setting or with CSS (targeting the CSS class .rmp-logo).
Logo image formats other than PNG, JPEG or GIF are not supported.

logoLoc: String

URL to open when the custom logo is clicked or touched. If not provided the logo will still be displayed on the player but will not be click-able. Default: ''.

logoPosition: String

This will set the logo position on stage. 4 values are available: 'topleft', 'bottomleft', 'topright', 'bottomright'. Default: 'topleft'.
Note that due to the inherent player layout we do not recommend using the 'topright' logoPosition as this may interfere with other player UI elements.
The logo has a default value of 8px padding. This value can be adjusted with CSS.

logoWatermark: Boolean

If set to true the logo will not auto-hide with the the control bar and act as a watermark logo. Default: false.


Player sizing

Player responsiveness inner workings

Radiant Media Player offers flexible ways to set the size of the player. All sizing methods are responsive based on player parent container width so it is assumed the player is included in a HTML/CSS layout where the player parent container width can be computed: technically this means that either the offsetWidth property or getComputedStyle/getPropertyValue must be available for player parent container. In case the player parent container width cannot be computed the player will use the default input width provided but may not be responsive.

The player will automatically resize itself when:

  • Player CSS is loaded after init method is called
  • ready event fires
  • orientationchange or resize event fire on window object
  • API resize or setPlayerSize methods are called

As such you could want to only call init on player when your application main CSS files are loaded.

In order to boost performance, updates in player size are throttled and only applied when an actual change in size is detected.

Do not directly apply sizing in CSS or JavaScript (width, height ...) on the player container (wrapper div element with the .rmp-container class). Those are set internally based on the selected sizing option.

Responsive player with maximum width and maximum height set in pixels (this is default)
width: Number

The maximum width of the player in pixels. The player will automatically be resized based on parent container and viewport dimensions but will never exceed this width parameter. Default: 640.
The minimum supported width for the player is 280px at a 16:9 ratio.

height: Number

The maximum height of the player in pixels. The player will automatically be resized based on parent container and viewport dimensions but will never exceed this height parameter. Default: 360.
The width and height values must be expressed in pixels. See the other sizing modes for alternative sizing options.

Auto-height mode
autoHeightMode: Boolean
autoHeightModeRatio: Number

When set to true this setting will set the player width to 100% and its height will automatically be computed based on the aspect ratio defined in the autoHeightModeRatio setting. This mode can be used to better fit specific mobile and responsive designs. Default for autoHeightMode is false. Default for autoHeightModeRatio is 1.7777777778 (16:9 ratio).
An example of using autoHeightMode setting can be found here.

Using % for player width and height

The player does not directly support % values for width or height through player settings. The main reason is that when it comes to video sizing aspect ratio considerations are critical. As such proper width or height for the player can only be computed based on a reference aspect ration value. However % value for the width or height of the player can easily be emulated using the above mentioned auto-height mode approach. In this case the % values must be passed to the parent element of the player container.

Example:

<script src="https://cdn.radiantmediatechs.com/rmp/4.4.19/js/rmp.min.js" 
  integrity="sha384-MHxuw6s8n+Uh8xT1LYC0zcidvLkX9DN0otZPYoamhjIU8svCQARWXpRYEXV6o6LI"
  crossorigin="anonymous"></script>
<div style="width:80%; height: auto">
  <div id="rmpPlayer"></div>
</div>
<script>
  var bitrates = {
    hls: 'https://dqwp3xzzbfhtw.cloudfront.net/vod/smil:tos-v2.smil/playlist.m3u8'
  };
  var settings = {
    licenseKey: 'your-license-key',
    bitrates: bitrates,
    delayToFade: 3000,
    autoHeightMode: true,
    autoHeightModeRatio: 2.4,
    poster: 'https://www.radiantmediaplayer.com/images/poster-rmp.jpg'
  };
  var elementID = 'rmpPlayer';
  var rmp = new RadiantMP(elementID);
  rmp.init(settings);
</script>
iframe Mode

This player sizing mode sets the player width and height to 100% and is best used for iframe embedding or background video use-cases.

Setting width and height with the player API

The player exposes the following methods setPlayerSize, getPlayerWidth, getPlayerHeight in order to programmatically control its sizing. Refer to our player API documentation for more information.


Iframe embedding

Scope of support

We generally recommend using direct embedding as shown in our quick start example to display the player in a web page but it is also possible to display the player through an iframe. The below information should help to properly use the player in an iframe.

Notes for using the player in an iframe

  • iframeMode setting must be set to true to avoid sizing issues
  • iframes can be slower to load and render as they add overhead to the browser processing. This becomes especially true as multiple iframes may be present on a page.
  • iframes are not responsive. In order to make the player within an iframe responsive you must first make the iframe itself responsive. You may need to use the player API resize method when dynamically resizing the iframe.
  • iframes (Frames in general) can be problematic on an accessibility point of view

Player settings and example

iframeAllowed: Boolean

When set to false this setting will disable iframe embedding for the player. Some users may want to use it as an added security measure. Default: true.
Setting added with version 4.0.14

iframeMode: Boolean

When set to true this setting will force the player container to have a 100% width and a 100% height which better fits iframe usage. Default: false.

First prepare a page on your main domain for the iframe content:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <title>Radiant Media Player - Example Apple HLS</title>
    <style>
      /* This CSS is required to avoid layout issues */
      html,
      body {
        height: 100%;
        width: 100%;
        background-color: #000;
        overflow: hidden;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <script src="https://cdn.radiantmediatechs.com/rmp/4.4.19/js/rmp.min.js" 
      integrity="sha384-MHxuw6s8n+Uh8xT1LYC0zcidvLkX9DN0otZPYoamhjIU8svCQARWXpRYEXV6o6LI"
      crossorigin="anonymous"></script>
    <div id="rmpPlayer"></div>
    <script>
      // Set up player settings
      var bitrates = {
        hls: 'https://dqwp3xzzbfhtw.cloudfront.net/vod/smil:bbb.smil/playlist.m3u8'
      };
      var settings = {
        licenseKey: 'your-license-key',
        delayToFade: 3000,
        // Here are our iframe settings
        iframeMode: true,
        iframeAllowed: true,
        sharing: true,
        sharingCode: '<iframe width="640" height="266" src="https://cdn.radiantmediatechs.com/iframe/iframe-content.html" frameborder="0" allowfullscreen></iframe>',
        skin: 's1',
        bitrates: bitrates,
        poster: 'https://www.radiantmediaplayer.com/images/poster-rmp-showcase.jpg'
      };
      var elementID = 'rmpPlayer';
      var rmp = new RadiantMP(elementID);
      rmp.init(settings);
    </script>
  </body>
</html>

For the purpose of this example let us say you host the above code at http://www.mydomain.com/embedded-player.html where you have a valid license key for mydomain.com. You want, for example, your users to be able share this player on http://www.myblog.com or http://www.myotherblog.com. The iframe code that needs to be provided to your user would be:

<iframe
  width="640"
  height="360"
  src="http://www.mydomain.com/embedded-player.html"
  frameborder="0"
  allowfullscreen></iframe>

An example of using iframeMode setting can be found here.


Background video

Background video with HTML5 video can be achieved with Radiant Media Player through a combined use of the iframeMode and scaleMode settings. Example:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <title>Radiant Media Player - Background video example</title>
    <style>
      /* This CSS is required to avoid layout issues */
      html,
      body {
        height: 100%;
        width: 100%;
        background-color: #000;
        overflow: hidden;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <script src="https://cdn.radiantmediatechs.com/rmp/4.4.19/js/rmp.min.js" 
      integrity="sha384-MHxuw6s8n+Uh8xT1LYC0zcidvLkX9DN0otZPYoamhjIU8svCQARWXpRYEXV6o6LI"
      crossorigin="anonymous"></script>
    <div id="rmpPlayer"></div>
    <script>
      // Set up player settings
      var bitrates = {
        hls: 'https://dqwp3xzzbfhtw.cloudfront.net/vod/smil:bbb.smil/playlist.m3u8'
      };
      var settings = {
        licenseKey: 'your-license-key',
        delayToFade: 3000,
        // Magic happens here
        iframeMode: true,
        scaleMode: 'zoom',
        posterScaleMode: 'zoom',
        skin: 's1',
        bitrates: bitrates,
        poster: 'https://www.radiantmediaplayer.com/images/poster-rmp-showcase.jpg'
      };
      // Reference to the player container (id)
      var elementID = 'rmpPlayer';
      // New Radiant Media Player object
      var rmp = new RadiantMP(elementID);
      // Initialize player ... and done!
      rmp.init(settings);
    </script>
  </body>
</html>

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

})();

AMP support

We support AMP markup with Radiant Media Player through amp-iframe. Because JavaScript support in AMP environment is very limited Google recommends using iframe for media embeds in AMP.

First we will set up a page for our iframe content:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <title>Radiant Media Player - Example Apple HLS</title>
    <style>
      /* This CSS is required to avoid layout issues */
      html,
      body {
        height: 100%;
        width: 100%;
        background-color: #000;
        overflow: hidden;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <script src="https://cdn.radiantmediatechs.com/rmp/4.4.19/js/rmp.min.js" 
      integrity="sha384-MHxuw6s8n+Uh8xT1LYC0zcidvLkX9DN0otZPYoamhjIU8svCQARWXpRYEXV6o6LI"
      crossorigin="anonymous"></script>
    <div id="rmpPlayer"></div>
    <script>
      // Set up player settings
      var bitrates = {
        hls: 'https://dqwp3xzzbfhtw.cloudfront.net/vod/smil:bbb.smil/playlist.m3u8'
      };
      var settings = {
        licenseKey: 'your-license-key',
        delayToFade: 3000,
        iframeMode: true,
        sharing: true,
        bitrates: bitrates,
        poster: 'https://www.radiantmediaplayer.com/images/poster-rmp-showcase.jpg'
      };
      var elementID = 'rmpPlayer';
      var rmp = new RadiantMP(elementID);
      rmp.init(settings);
    </script>
  </body>
</html>

Read our iframe embedding documentation section for more information . Following is a known good AMP layout working with Radiant Media Player that passes validation. This example uses iframe with placeholder in order to have the player appearing on the top of the document (see here for more information).

<!DOCTYPE html>
<html amp lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <title>Hello, AMPs</title>
  <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
  <link rel="canonical" href="https://www.radiantmediaplayer.com/documentation.html">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
  <amp-iframe sandbox="allow-scripts allow-same-origin allow-popups" width="640" height="360" layout="responsive" allowfullscreen frameborder="0" src="https://cdn.radiantmediatechs.com/iframe/iframe-content-amp.html">
    <amp-img layout="fill" src="https://www.radiantmediaplayer.com/images/poster-rmp-showcase.jpg" placeholder></amp-img>
  </amp-iframe>
</body>
</html>

See it at work here.

In order to complete your validation of AMP content with Google you will also need to mark up your video content with structured data. JSON-LD is the recommended way to do so. More information can be found here.


Multiple instances

To achieve multiple player instances on the same page include rmp.min.js only once on your page. Example:

...
<body>
... some HTML code
<!-- Only include Radiant Media Player core JavaScript file once-->
<script src="https://cdn.radiantmediatechs.com/rmp/4.4.19/js/rmp.min.js" 
  integrity="sha384-MHxuw6s8n+Uh8xT1LYC0zcidvLkX9DN0otZPYoamhjIU8svCQARWXpRYEXV6o6LI"
  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.

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