Radiant Media Player

General documentation


Main documentation sections



Last updated on January 4, 2017.

Introduction

Radiant Media Player is an HTML5-first web media player oriented towards adaptive bitrate streaming in HLS or MPEG-DASH. It sports a wide arrays of industry-leading features from video ads to powerful analytic tools or content security. It is easily configured through JavaScript configuration options. The player offers 4 uniquely designed skins. It can be extensively customised with JavaScript and CSS to meet any project requirements even the more demanding. Our support team is also here to help you to build a next-level media experience for your audience.

At Radiant Media Player we do care about your success. This is our first priority.

Radiant Media Player 3 is built with native ES2015 JavaScript. Is is compiled to ES5 with Babel and browserify. No framework like jQuery or lodash are required for the player to function.

For development purposes Radiant Media Player can be used within private internets (localhost or 127.0.0.1, 10/8 prefix, 172.16/12 prefix or 192.168/16 prefix) as long as you are using a valid license key.

If you need help with this documentation or a specific feature you can contact us through our contact form - we are always happy to help.

In the following documentation:

HTML5

means the feature is supported in HTML5

Flash

means the feature is supported in Flash


Quick start guide

Get started video tutorial

Player code example

To set up Radiant Media Player on your page you must have:

  • Radiant Media Player JavaScript library included
  • A wrapper div with a unique id. This wrapper div will hold the HTML5 or Flash video player
  • JavaScript Configuration options for the player
  • Object creation + initialization

Here is an example:

You must include the player in a properly formatted web page. This is a page that has a valid HTML5 DOCTYPE, a <head> and <body>.

<!DOCTYPE html>
<html>
<head>
  <title>TODO supply a title</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
</head>
<body>
<!-- Include Radiant Media Player JavaScript file in your <body> or <head> -->
<script src="https://cdn.radiantmediatechs.com/rmp/v3/latest/js/rmp.min.js"></script>
<!-- Set up your wrapper div with its unique id -->
<div id="rmpPlayer"></div>
<!-- Set up player configuration options -->
<script>
// First we specify bitrates to feed to the player
var bitrates = {
  hls: 'https://streamingrmp-1479.kxcdn.com/vod/smil:bbb.smil/playlist.m3u8'
};
// Then we set our player settings
var settings = {
  licenseKey: 'your-license-key',
  bitrates: bitrates,
  delayToFade: 3000,
  width: 640,
  height: 360,
  poster: 'https://www.radiantmediaplayer.com/images/poster-rmp-showcase.jpg'
};
// Reference to the wrapper div (unique id)
var elementID = 'rmpPlayer';
// Create an object based on RadiantMP constructor
var rmp = new RadiantMP(elementID);
// Initialization ... test your page and done!
rmp.init(settings);
</script>
</body>
</html>

More player code examples can be found here.

If you have multiple instances of the player only include rmp.min.js file once.

You can include rmp.min.js in your <head> or <body> tag, but always before the player configuration options. The init player call must happen within the <body> tag as CSS and other JavaScript resources may be appended to the <head>.

Page load speed tip: if you can, place your rmp.min.js and player configruation <script> tags just before the closing </body> tag on your page. This will increase perceived page load speed and might help with your SEO effort.


CORS settings

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

For streaming with HLS or MPEG-DASH to HTML5 video, all HLS and MPEG-DASH resources must be delivered with CORS headers permitting GET requests. This also applies for Chromecast casting or cross-domain loading of external WebVTT captions files.

Please refer to the documentation of your streaming/hosting server for guidance on how to enable CORS. For Wowza Streaming Enegine please refer to this section of our documentation.

For CORS settings for video ads see our video ads documentation page


HLS/HTTP streaming to Flash: 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 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/HTTP content to Flash with Radiant Media Player.

Complete 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 video 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 (based on our open-source project Radiant MediaLyzer). 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.

The player will also automatically adapt to the device network conditions and switch between renditions when appropriate (for HLS and MPEG-DASH in HTML5 or Flash). This is a transparent process for the viewer as this decision-making layer is built within the player. Viewers will also have most of the time the option to manually switch between available renditions.


Mobile-first and responsive player

Radiant Media Player is a mobile-ready web video 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. 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-player

All Radiant Media Player player files are available through our global CDN partner CloudFlare.

Since Radiant Media Player 3.6 the latest always up-to-date stable release of the player can be reached at:

https://cdn.radiantmediatechs.com/rmp/v3/latest/js/rmp.min.js

Player should be included in page as:

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

As such you do not need to update the player version on your site with each new player release. This URL will directly provide the latest updates for Radiant Media Player.

Some users may prefer to target a specific player version. This is done as follows:

https://cdn.radiantmediatechs.com/rmp/3.10.14/js/rmp.min.js

Self-hosting

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

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/
  • terms-of-service.txt

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, object creation + initialization.

<script src="radiantmediaplayer/js/rmp.min.js"></script>
<div id="rmpPlayer"></div>
<script>
var bitrates = {
  mp4: [
    'https://rmpsite-1479.kxcdn.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:

Video ads files 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
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.
If you need to use Radiant Media Player within an Intranet (closed-network) please contact us for guidelines on the set up.

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

More player settings are available in each documentation page (see "Documentation articles" section at top of this page) dedicated to specific player features.

Player code examples can be found here.

Player settings for streaming information can be found here.

Player settings for video ads can be found here.

licenseKey: String
HTML5 Flash

The license key ties your player with an Internet domain. It is a mandatory requirement for the player to use RMP edition features. License keys and Internet domains are managed in Radiant Media Player back-end.

delayToFade: Number
HTML5 Flash

Represents the delay in milliseconds before the overlay control bar disappears when no user interaction is detected. Default: 3000.

loop: Boolean
HTML5 Flash

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
HTML5 Flash

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.
This setting has been added with Radiant Media Player version 3.0.0

muted: Boolean
HTML5 Flash

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
HTML5 Flash

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.
This setting has been added with Radiant Media Player version 3.9.2

scaleMode: String
HTML5 Flash

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.
This setting has been added with Radiant Media Player version 3.8.0.

posterScaleMode: String
HTML5 Flash

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 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).
This setting has been added with Radiant Media Player version 3.8.0

poster: String
HTML5 Flash

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
HTML5 Flash

The path or URL to the end of video poster (image) shown when the video content has completed. Default: ''.

crossorigin: String
HTML5

This paramater allows to set the crossorigin attribute for Radiant Media Player HTML5 video tag. Default: ''. Other possible values are: 'anonymous', 'use-credentials'. This setting can be useful for CORS requests of WebVTT or poster files.

hideControls: Boolean
HTML5 Flash

Hide player controls. Default: false. You can build your own user interface as such through our JavaScript API. Note that all UI elements (including loading icons) are hidden in HTML5 and Flash in this mode.

hideSeekBar: Boolean
HTML5 Flash

Hide player seek bar. This effectively prevents seeking into a video. This should only be used for on-demand video content. This also disables keyboard control for seeking. Default: false.

hideFullscreen: Boolean
HTML5 Flash

Hide player fullscreen button. This effectively prevents entering into fullscreen mode. This also disables keyboard control for fullscreen. Default: false.

hideCentralPlayButton: Boolean
HTML5 Flash

Hide the player central play button. Default: false which means the player central play button is displayed.
This setting has been added with player version 2.7.4

backgroundColor: String
HTML5 Flash

Set the player background color in hex color format (typically shown when player is loading). This may be useful to set it to fit your player skin color. Default: '000000'.
This setting has been added with Radiant Media Player version 3.0.0

skin: String
HTML5 Flash

The name of the skin to be used - available values are: 's1', 's2', 's3', 's4', 's5'. Default: 's1'.
For a complete guide on player skin tuning visit the player skins page.
If you have multiple players on the same page, all players will have the same skin: the first skin loaded.

skinTintColor: String
HTML5 Flash

Set the color for skin colorization. The color must be in hex color format (example: 'FF0000'). Do not include # before the color code.

contentTitle: String
HTML5 Flash

Set the content title string to be displayed on the player. Default: '' which means no content title is displayed.
Digit-only content title may not render in Flash.
This setting has been added with player version 2.7.3

contentDescription: String
HTML5

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.
This setting has been added with player version 3.8.2

sharing: Boolean
HTML5 Flash

Activate or not the sharing module. It takes the URL of the page holding the player and offers the possibility to share this URL on Facebook, Twitter and Google+. Default: false.

sharingUrl: String
HTML5 Flash

Set the URL that should be shared through Facebook, Twitter, Google plus and the link field when the sharing module id displayed. The player uses the page URL as default but this can be overrided through this setting. Default: ''.
This setting has been added with player version 2.7.3

sharingCode: String
HTML5

Set the player code to be shared (generally an iframe) for embedding by the viewer. This is up to you to generate and host this shareable player code as described here. Default: '' which means the code field is hidden in the sharing module.
This setting has been added with player version 3.1.0

displayStreams: Boolean
HTML5 Flash

Show or hide the manual bitrate selector module on the player. Default: true.
The bitrate selector is available with HLS, MPEG-DASH, MP4 or WebM progressive download streams in HTML5 video. For Flash video it is available for HLS streaming.
The bitrate selector will only be visible if more than 1 rendition is available for the given streaming protocol.
On iOS or Mac OS Safari the bitrate selector is not available for HLS due to OS restrictions. The bitrate selection it set to auto by default.

nav: Boolean
HTML5

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


Autoplay

autoplay: Boolean
HTML5 Flash

Command the player to autoplay on load. The autoplay setting will have no effect on mobile devices (see note below for muted autoplay support on mobile devices) such as iOS and Android because those OSes prevent autoplay of videos. When video ads are available video ads will autoplay on player load (except for the previously mentioned mobile OSes). Default: false.
With the release of Safari for iOS 10 and Chrome 53 on Android, it is now possible to autoplay video that are muted. In order to activate this feature with Radiant Media Player you must set muted setting to true while autoplay is also set to true. See next setting mutedAutoplayOnMobile for more information and consideration about muted autoplay of video ads. See more information here.
Radiant Media Player also supports inline playback of video on iPhone with iOS 10+.

mutedAutoplayOnMobile: Boolean
HTML5

This setting has been added with Radiant Media Player version 3.7.1

On mobile devices where muted autoplay is supported (iOS 10+, Chrome 53+ for Android) this setting will enable muted autoplay. When both mutedAutoplayOnMobile and autoplay are set to true the player will autoplay with sound on non-mobile devices and autoplay without sound (muted) on mobile devices. Default: false.
As of version 3.8.4 it is also possible to enable muted autoplay of video ads on iOS 10+ with the mutedAutoplayOnMobile setting set to true (or muted and autoplay both set to true). Muted autoplay of video ads is still not supported on Android.

detectAutoplay: Boolean
HTML5

This setting has been added with Radiant Media Player version 3.8.1

This is an experimental setting. Some users may attempt to block autoplay of HTML5 video (including autoplay of HTML5 video ads) through advanced browser configuration or other more or less recommendable browser plugins. In such cases those plugins/configuration may prevent proper playback of HTML5 video content/ad as they usually mess with the inner workings JavaScript-based HTML5 video. Setting detectAutoplay to true add a preventive detection layer to the player (at a small processing cost) and as such the player will only attempt autoplay of HTML5 video content/ad when it is fairly certain it can successfully do so. Default: false.


Logo inclusion

HTML5 Flash
logo: String

Path or URL to PNG 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 bottom left corner of the video to fit in with other player UI elements. You can move it with CSS for HTML5 video (targeting CSS class rmp-logo). For Flash the logo position cannot be modified.

logoLoc: String

URL to open when the custom logo is clicked. 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. If you use this setting make sure the other UI elements in the top-right corner are disabled.
The logo has a default value of 8px padding. This value can be adjusted with CSS for the HTML5 rendition of the player.

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

HTML5 Flash

Radiant Media Player offers several flexible ways to set the size of the player. All methods are responsive and the player will automatically scale based on parent container or/and viewport dimension. You need to only choose one type of sizing - do not use several player sizing options within your player code.

Do not directly apply/override CSS or JavaScript for sizing (width, height ...) to the player container. Those are set internally based on your configuration options.

Responsive player with maximum width and maximum height set in pixels
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 % based sizing.

Auto-height mode
autoHeightMode: Boolean
autoHeightModeRatio: Number
This setting has been added with Radiant Media Player version 3.6.1

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).
See a complete use-case example here (based on Bootsrap 3).

Using % for player width and height

The player does not directly support % values for width or height through player settings (one exception is the iframe mode which is discussed just next). 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/v3/latest/js/rmp.min.js"></script>
<div style="width:80%; height: auto">
  <div id="rmpPlayer"></div>
</div>
<script>
  var bitrates = {
    hls: 'https://streamingrmp-1479.kxcdn.com/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
iframeMode: Boolean

When set to true this setting will force the player container to have a 100% width and a 100% height. This mode can be used to display the player through an iframe as described here. Default: false.

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.


Flash settings

Flash
flashFallBack: Boolean

Activate or not a live, DVR and on-demand capable flash video fallback where HTML5 video is not supported and where Flash is a valid fallback option. Default: true.

flashFirst: Boolean

Order the player to enter a Flash first mode where Flash is supported. The player will automatically fallback to HTML5 video where Flash is not supported. Default: false.
This setting is provided for debugging purposes. We generally do not recommend using this setting in production as Radiant Media Player is best fitted for HTML5 media.

flashWMode: String

Set Flash Window Mode. Possible values are 'window', 'direct', 'opaque', 'transparent', 'gpu'. Default: 'direct'. Read this article for more information on the subject.


Debug

We provide debug settings for easier issue resolution should they arise. Those settings must not be used in production.

debug: Boolean
HTML5 Flash

This setting will display player logs in your browser console. This setting must always be set to false in production. Default: false.

streamDebug: Boolean
HTML5 Flash

This setting will display streaming debug logs in your browser console. This setting must always be set to false in production. Default: false.

analyticsDebug: Boolean
HTML5 Flash

This setting will display analytics-related debug logs (mainly Google Analytics logs) in your browser console. This setting must always be set to false in production. Default: false.


Async player loading

HTML5 Flash

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 (document) {

  '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://streamingrmp-1479.kxcdn.com/vod/smil:bbb.smil/playlist.m3u8'
    };
    var settings = {
      licenseKey: 'your-license-key',
      bitrates: bitrates,
      delayToFade: 3000,
      width: 640,
      height: 360,
      displayStreams: true,
      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/v3/latest/js/rmp.min.js';
  rmpScript.async = true;
  rmpScript.addEventListener('load', _onLoadAppendPlayer);
  rmpScript.addEventListener('error', _onErrorLog);
  head.appendChild(rmpScript);

})(document);

iframe embedding

HTML5 Flash

It is possible to embed Radiant Media Player with a valid license key for a given domain on this domain or another domain through an iframe. This functionality is provided to allow the generation of a shareable player code for inclusion in blogs/social media.

Iframe embedding support is provided for casual embedding of the player on other sites or social media channels. If you intend to use Radiant Media Player on a permanent basis for a given site you must have an active license key for this domain.

Note that with this implementation the player will not be responsive by default as responsiveness cannot be ported through an iframe. You will need to make the iframe responsive if you want the player within the iframe to be responsive.

iframe may be slower to render because they add overhead for the browser to create and maintain the iframe. Use them sparingly.

Radiant Media Player does not provide hosting services for media files and as such it cannot provide iframe content hosting. It is up to you to create and host your iframe-based player.

First prepare a page on your main domain:

<!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/v3/latest/js/rmp.min.js"></script>
    <div id="rmpPlayer"></div>
    <script>
      // Set up player settings
      var bitrates = {
        hls: 'https://streamingrmp-1479.kxcdn.com/vod/smil:bbb.smil/playlist.m3u8'
      };
      var settings = {
        licenseKey: 'your-license-key',
        delayToFade: 3000,
        iframeMode: true,
        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>

For the purpose of this example let us say you host this page 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 is:

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

An example of iframe embedding can be found here.


AMP support

HTML5 Flash

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 rich media embeds in AMP.

You will set up your iframe embed for Radiant Media Player as shown just above. Following is a known good AMP with Radiant Media Player example 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">
  <title>Hello, AMPs</title>
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <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.


Background video

HTML5 Flash

Background video with HTML5 or Flash 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/v3/latest/js/rmp.min.js"></script>
    <div id="rmpPlayer"></div>
    <script>
      // Set up player settings
      var bitrates = {
        hls: 'https://streamingrmp-1479.kxcdn.com/vod/smil:bbb.smil/playlist.m3u8'
      };
      var settings = {
        licenseKey: 'your-license-key',
        delayToFade: 3000,
        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>

Multiple instances

HTML5 Flash

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/v3/latest/js/rmp.min.js"></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://streamingrmp-1479.kxcdn.com/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://streamingrmp-1479.kxcdn.com/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);
// Initialization with settings
rmp1.init(settings1);
rmp2.init(settings2);
</script>
</body>

Each instance of RadiantMP can then be manipulated with the unified JavaScript API (if required).

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


Unified keyboard controls

HTML5 Flash

For more information on our accessibility features go here.

space : Play or pause the media

f : enter fullscreen (HTML5-only)

escape : exit fullscreen

left arrow : seek 10 seconds backward in the media

right arrow : seek 10 seconds forward in the media

m : mute/unmute media content

up arrow : Up volume by 10%

down arrow : Reduce volume by 10%

You need to have focus (click on the video player or circle through the page elements with the tab key) on the player for keyboard control to work.


File protocol support

Scope of support

Radiant Media Player does support the file:// protocol when an active domain license key is in use (since version 3.5). However due to the fragmented nature of environments running the file:// protocol we can only provide support for the file:// protocol itself and not the underlying environments. It is up to you to test the player and see if it fits your requirements. The file:// protocol may be used in environments like:

  • Web-based frameworks for building native apps on iOS or Android (Ionic, Cordova ...)
  • Android or iOS WebView
  • Building apps for Desktop computers, smart TVs or set-top boxes

Notably it is to be noted that the HTML5 Google IMA SDK (which we use for video ads) does not support Android or iOS WebView. Google cast casting may not be available in Chrome-based WebView.

When using Radiant Media Player in an application where the file:// protocol is required you must self-host the player files within this application.

While we are always happy to receive feedback for Radiant Media Player we may not provide assistance with using Radiant Media Player in an environment where the file:// protocol is used.

Licensing considerations when using the file protocol

A valid license key is required to use the file protocol into an application. This license key must be tied to a domain name that is in direct relation with the application. For example a a news company may use the same license key on its main site localnews.com and into an application that directly relates to localnews.com where the file protocol may be required. This related application may be published into as many stores as required as long as its content remains consistent with the content published on localnews.com. If this local news company was to create a spin-off about cooking, localnewscooking.com for example, they would need to purchase and generate a new license key for this site and they could use this newly generated license key into a "local news cooking" application where the file protocol may be required. However they may not use the license key for localnews.com into the "local news cooking" application.

If a license key for a given domain is removed in our back-end and this license key was used in an application requiring the file:// protocol, the license key will also stop working in this application.


Known issues

  • MPEG-DASH with H.264 High profile content may not play properly on some device. We recommend using Main profile for better coverage.
  • MPEG-DASH dynamic multi-period is not currently supported.
  • Post-roll video ads are disabled on iOS devices as they can produce notable content recovery issues.
  • Since version 3.9 Radiant Media Player makes use of Google Cast V3 SDK. As of mid November 2016 this SDK has a number of known issues:
    • Casting from Chrome on iOS is not supported. This will be fixed in a future Chrome/Cast release. This is documented here.
    • Disengaging casting from Chrome for Android may cause issues. See this Chrome bug.

Migration notes for upgrading from version 2 to version 3

You can skip this section if you are not upgrading from Radiant Media Player version 2 to 3.

Radiant Media Player 3 introduces a new set of features and tries to simplify the way it is set up. Please take note of the following notable changes for a smooth transition:

  • For our new HLS to HTML5 video module you must set up your streaming server to return proper CORS settings permitting GET requests.
  • Bitrates information are now simplified and set as string (dash, hls) or simple array (mp4, webm).
  • Bitrates and other player labels are now set with our new player labelling system.
  • Bitrates MPEG-DASH information are now set as bitrates.dash instead of bitrates.dash264.
  • All ad-scheduling information must be passed as array now (previously pre-roll and post-roll could be set as string).

A list of all changes can be found here.

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