Radiant Media Player is a HTML5 media player oriented towards adaptive bitrate streaming in HLS or DASH. It sports a wide arrays of features from video ads to powerful APIs or content security with a friendly business model. Radiant Media Player can be easily implemented in any web-based environments and configured through various player settings. Built-in advanced features like ad-waterfalling or fallback streaming URL are here to improve user experience & maximise revenue without requiring extensive custom work on your side. Our support team is also available to help you get started with Radiant Media Player.
We work closely with our customers to make Radiant Media Player a fast, reliable and enjoyable product. Your success is our success.
Radiant Media Player is developed with ES2015 JavaScript. Is is compiled to ES5 with Babel and browserify for maximum cross-device compatibility. No framework like jQuery or lodash are required for the player to function.
Radiant Media Player 4 introduces full 360 video support, related content, a new DASH engine, major performance improvements, new API options and deprecates Flash. See the full release note here.
We also took great care to make the change footprint as minimal as possible. As a result the player configuration & APIs remain globally the same and unless you are using DASH DRM you should not need to adapt your current set up to upgrade to Radiant Media Player 4.
Radiant Media Player version 3 should continue to work as expected in the short-term future however it is no longer actively developed - we encourage all customers to upgrade to version 4 whenever possible.
A snapshot of Radiant Media Player version 3 documentation can be found here.
To set up Radiant Media Player on your page you must have:
After that you can browse our documentation for the various player settings and API available to customise the player to your needs.
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> --> <!-- Here we use a specific version of our cloud player with subresource integrity (for better security) --> <script src="https://cdn.radiantmediatechs.com/rmp/4.2.7/js/rmp.min.js" integrity="sha384-C0sSn+J+s5Dqpm+q4b3+LYtSJvBnjJzqVnne0z+m+cWPz2Nkw6pSoBKTkBkt3/R2" crossorigin="anonymous"></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://dqwp3xzzbfhtw.cloudfront.net/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>
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>.
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
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.
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.
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.
Your player must be implemented on a web page with a valid HTML5 DOCTYPE.
<!DOCTYPE html>
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">
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. This will improve security 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 your cloud-player into your web page:
<script src="https://cdn.radiantmediatechs.com/rmp/4.2.7/js/rmp.min.js" integrity="sha384-C0sSn+J+s5Dqpm+q4b3+LYtSJvBnjJzqVnne0z+m+cWPz2Nkw6pSoBKTkBkt3/R2" crossorigin="anonymous"></script>
You can also load the latest always up-to-date version of the player. In such case subresource integrity is not available.
<script src="https://cdn.radiantmediatechs.com/rmp/v4/latest/js/rmp.min.js"></script>
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:
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.
<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.jsThose 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.
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.
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.
delayToFade: Number
Represents the delay in milliseconds before the overlay control bar disappears when no user interaction is detected. Default: 3000.
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.
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:
Note that the dashFirst and webmFirst settings may be used to alter this order.
Recommendations
In order to maximise device coverage in HTML5 video we recommend using the following association of streaming protocols:
For DRM-encrypted content you will need to use:
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.
hideControls: Boolean
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 this mode.
hideSeekBar: Boolean
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
Hide player fullscreen button. This effectively prevents entering into fullscreen mode. This also disables keyboard control for fullscreen. Default: false.
hideCentralPlayButton: Boolean
Hide the player central play button. Default: false which means the player central play button is displayed.
backgroundColor: String
Set the player background colour in hex colour format (typically shown in certain aspect-ratio configuration or when no poster setting is provided). Default: '000000'.
skin: String
The name of the skin to be used - available values are: 's1', 's2', 's3', 's4'. 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.
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: ''.
Setting added with version 4.0.18
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: 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.
Scope of support
We generally recommend using direct embedding as shown in our quick start example and other examples throughout our documentation 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 issuesresize method when dynamically resizing the iframe.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.2.7/js/rmp.min.js"
integrity="sha384-C0sSn+J+s5Dqpm+q4b3+LYtSJvBnjJzqVnne0z+m+cWPz2Nkw6pSoBKTkBkt3/R2"
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,
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 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>
autoplay: Boolean
Command the player to autoplay content on load/init. This works for media content and video ads. On mobile devices muted autoplay is supported for media content and video ads. Default: false.
mutedAutoplayOnMobile: Boolean
On mobile devices where muted autoplay is supported (iOS 10+, Chrome 53+ for Android) this setting can enable muted autoplay of content or video ads. 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.
featureDetectAutoplay: Boolean
Autoplay support for a specific device does not mean the player can actually autoplay the content or the preroll ads at runtime. Changing environments or user settings can cause browsers to block autoplay of content/ads. This setting enables feature-detection of autoplay support for the targeted device at player runtime. If not enabled the player will use user-agent detection to determine if it can autoplay or not - which is not best practice - and this can cause the player to force autoplay in context where it is not supposed to and may in turn cause a poor playback experience. Default: true. Here are a few reasons why you could want to use feature-detection of autoplay support:
However it should be noted that feature detection of autoplay support can caused false negative, from time to time, and as such setting featureDetectAutoplay to false may result in a higher autoplay rate depending on the
targeted environment and player configuration. The decision is left to you as to what would best fit your project requirement.
An example of implementation can be found here.
Setting added with version 4.0.20
autoplayDetectionTimeout: Number
This setting is expressed in milliseconds and represents the time after which the player will stop trying to detect autoplay support (muted-autoplay on mobiles). If timeout is reached the player considers autoplay is not available. Most of the
time the player will never reach this timeout as feature detection happens very fast before timeout is reached. Increasing this value may cause an increase accuracy for autoplay support detection but at the potential cost of slower player startup.
If you target a market with older devices or where network conditions are known to be highly fluctuant or if you are using iframe embedding, you may consider increasing this setting. Default: 8000.
Setting added with version 4.0.19
playsInline: Boolean
When the HTML5 playsinline attribute is supported and this setting is set to true the player will add the playsinline attribute to its HTML5 video/audio tag. This notably enables playback of inline video/audio on iOS 10+. Where the HTML5 playsinline attribute is not supported the player will add the webkit-playsinline attribute on mobile devices as a fallback. Default: true.
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.
Radiant Media Player offers flexible ways to set the size of the player. All methods are responsive and the player will automatically resize itself based on parent container or/and viewport dimension. Only choose one type of sizing for your player configuration.
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.
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.
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).
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.2.7/js/rmp.min.js"
integrity="sha384-C0sSn+J+s5Dqpm+q4b3+LYtSJvBnjJzqVnne0z+m+cWPz2Nkw6pSoBKTkBkt3/R2"
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>
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.
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);
})();
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.2.7/js/rmp.min.js"
integrity="sha384-C0sSn+J+s5Dqpm+q4b3+LYtSJvBnjJzqVnne0z+m+cWPz2Nkw6pSoBKTkBkt3/R2"
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">
<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 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.2.7/js/rmp.min.js"
integrity="sha384-C0sSn+J+s5Dqpm+q4b3+LYtSJvBnjJzqVnne0z+m+cWPz2Nkw6pSoBKTkBkt3/R2"
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>
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.2.7/js/rmp.min.js" integrity="sha384-C0sSn+J+s5Dqpm+q4b3+LYtSJvBnjJzqVnne0z+m+cWPz2Nkw6pSoBKTkBkt3/R2" 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.