Radiant Media Player

Quick start



Introduction

Radiant Media Player is a cross-device HTML5 media player capable of delivering content with adaptive bitrate streaming in HLS & DASH or with progressive download. It can display live, DVR or on-demand media content and sports a wide array of features from video advertising to powerful APIs or DRM support. Radiant Media Player can be easily implemented in any web-based environments (browsers, WebView or web-based mobile apps) and configured through various player settings. 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 does not provide encoding, hosting or ad-server services - we focus on building a great media player. In order to use Radiant Media Player you will need to encode and host your video/audio files or find a 3rd-party service provider that can help you with that. Some of our partners could offer such services.


Quick start example

Radiant Media Player must be included in a well-formed HTML5 document. This means a web-page with a valid HTML5 DOCTYPE, <html>, <head> and <body> tags and other elements that are commonly available in today's web.

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

  • Radiant Media Player JavaScript library included in your page
  • A container div HTMLElement with a unique id. This element will hold the HTML5 media player when initialised
  • JavaScript configuration options for the player
  • Player instance creation and initialisation

Here is a complete example:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <title>TODO supply a title</title>
</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 (optional but provides better security) -->
<script src="https://cdn.radiantmediatechs.com/rmp/4.5.6/js/rmp.min.js" 
  integrity="sha384-qb+PmooIWhAZeANOBZtHK1ELmwWy6OlB5p4VsS/TnKj7CLrdqeZ0I400P2kif/Gz"
  crossorigin="anonymous"></script>
<!-- Set up our container div with its unique id -->
<div id="rmpPlayer"></div>
<!-- Set up player configuration options -->
<script>
// First we specify a streaming URL for the player - in this example an HLS on-demand feed
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,
  skin: 's1',
  poster: 'https://www.radiantmediaplayer.com/images/poster-rmp-showcase.jpg'
};
// Reference to our container 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 want to have multiple instances of the player on the same page only include rmp.min.js file once.

You can include rmp.min.js in your <head> or <body> tag, but always before creating a new player instance.


Where to go from here?

Now that we have covered how to set up a basic player code, you can browse our documentation to review all the features Radiant Media Player has to offer, popular sections include:

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