Radiant Media Player

Quick start



Introduction

Radiant Media Player is a cross-device HTML5 video & audio player capable of displaying HLS, DASH or progressive download content. It can handle live, DVR or on-demand content and sports a wide array of features from video advertising to 360 video and DRM. Radiant Media Player can easily be implemented in any web-based environments (browsers, WebView, web-based mobile & OTT 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 - our focus is on building a great media player. To use Radiant Media Player you will need to encode and host your video/audio files or use a 3rd-party service provider that can help you with that (Wowza, Nimble Streamer, Amazon Web Services, Vimeo Pro ...).


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

Here is a complete example:

<!DOCTYPE html>
<!-- Our HTML5 document must start with a valid DOCTYPE -->
<html>
<head>
  <meta charset="UTF-8">
  <!-- We add a viewport meta tag for best rendering on mobile devices -->
  <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.10.5/js/rmp.min.js" 
    integrity="sha384-C/ULeCJDlenAbw9Hm+dhOlswTP+pmQHD+i4ihKhNzkzPz02MB5xJMUD1uUpT8kcY"
    crossorigin="anonymous"></script>
  <!-- Add a player container with a unique id - player UI elements will be appended in this container -->
  <div id="rmpPlayer"></div>
  <!-- Set up player configuration options -->
  <script>
    // First we must provide a streaming source to the player - in this case an HLS feed
    var bitrates = {
      hls: 'https://your-hls-url.m3u8'
    };
    // Then we set our player settings
    var settings = {
      licenseKey: 'your-license-key',
      bitrates: bitrates,
      // The player will automatically resize itself based on context and those reference width/height values
      width: 640,
      height: 360,
      // Let us select a skin
      skin: 's1',
      // By default player does not preload any content when initiated
      // Enabling preloading generally helps with faster startup
      preload: 'auto',
      // Let us add a nice poster frame to our player
      poster: 'https://your-poster-url.jpg'
    };
    // Reference to our player container div
    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>
<!DOCTYPE html>
<!-- Our HTML5 document must start with a valid DOCTYPE -->
<html>
<head>
  <meta charset="UTF-8">
  <!-- We add a viewport meta tag for best rendering on mobile devices -->
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <title>TODO supply a title</title>
</head>
<body>
  <!-- Add a player container with a unique id - player UI elements will be appended in this container -->
  <div id="rmpPlayer"></div>
  <!-- Set up async player configuration options -->
  <script>
    // First we must provide a streaming source to the player - in this case an HLS feed
    var bitrates = {
      hls: 'https://your-hls-url.m3u8'
    };
    // Then we set our player settings
    var settings = {
      licenseKey: 'your-license-key',
      bitrates: bitrates,
      // The player will automatically resize itself based on context and those reference width/height values
      width: 640,
      height: 360,
      // Let us select a skin
      skin: 's1',
      // By default player does not preload any content when initiated
      // Enabling preloading generally helps with faster startup
      preload: 'auto',
      // Let us add a nice poster frame to our player
      poster: 'https://your-poster-url.jpg',
      // Here we pass the ID of the player container so that the core library may automatically initialise player when it finishes loading
      asyncElementID: 'rmpPlayer'
    };
    // We push the player settings to a global rmpAsyncPlayers variable
    if (typeof window.rmpAsyncPlayers === 'undefined') {
      window.rmpAsyncPlayers = [];
    }
    window.rmpAsyncPlayers.push(settings);
  </script>
  <!-- Include Radiant Media Player JavaScript at the bottom of your page - note the async attribute -->
  <!-- Here we use a specific version of our cloud player with subresource integrity (optional but provides better security) -->
  <script async src="https://cdn.radiantmediatechs.com/rmp/4.10.5/js/rmp.min.js" 
    integrity="sha384-C/ULeCJDlenAbw9Hm+dhOlswTP+pmQHD+i4ihKhNzkzPz02MB5xJMUD1uUpT8kcY"
    crossorigin="anonymous"></script>
</body>
</html>

If you want to have multiple instances of the player on the same page only include rmp.min.js file once.


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.