Documentation

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 environments (browsers, 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 have made a commitment to work closely with our customers to make Radiant Media Player a fast, reliable and developer-friendly product. Your success is our success.

Radiant Media Player does not provide encoding or hosting services for media content - our focus is on building a great HTML5 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 - see our list of partners for a few suggestion.

Player Creator

We provide a player creation user interface to rapidly obtain a player code to be copied/pasted into your web page or CMS. This player creator does not include all player features, just some commonly used ones, refer to our documentation for other use-cases.

Quick start player code 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, initial-scale=1, shrink-to-fit=no">
  <title>TODO supply a title</title>
</head>
<body>
  <!-- Include Radiant Media Player JavaScript library -->
  <script src="https://cdn.radiantmediatechs.com/rmp/9.12.0/js/rmp.min.js"></script>
  <!-- Add a div container with a unique id - video and UI elements will be appended to this container -->
  <div id="rmp"></div>
  <!-- Set up player configuration options -->
  <script>
    // First we must provide a streaming source to the player - in this case an HLS feed
    const src = {
      hls: 'https://your-hls-url.m3u8'
      // You may provide different source types - the player will automatically pick the best option
      // dash: 'https://your-dash-url.mpd'
      // mp4: 'https://your-mp4-url.mp4'
    };
    // Then we set our player settings
    const settings = {
      licenseKey: 'your-license-key',
      src: src,
      // 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',
      // Let us add a poster frame to our player
      contentMetadata: {
        poster: [
          'https://your-poster-url.jpg'
        ]
      }
    };
    // Reference to our container div 
    const elementID = 'rmp';
    // Create an object based on RadiantMP constructor
    const rmp = new RadiantMP(elementID);
    // Initialization ... 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, initial-scale=1, shrink-to-fit=no">
  <title>TODO supply a title</title>
</head>
<body>
  <!-- Add a div container with a unique id - video and UI elements will be appended to this container -->
  <div id="rmp"></div>
  <!-- Set up async player configuration options -->
  <script>
    // First we must provide a streaming source to the player - in this case an HLS feed
    const src = {
      hls: 'https://your-hls-url.m3u8'
      // You may provide different source types - the player will automatically pick the best option
      // dash: 'https://your-dash-url.mpd'
      // mp4: 'https://your-mp4-url.mp4'
    };
    // Then we set our player settings
    const settings = {
      licenseKey: 'your-license-key',
      src: src,
      // 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',
      // Let us add a poster frame to our player
      contentMetadata: {
        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: 'rmp'
    };
    // 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 -->
  <script async src="https://cdn.radiantmediatechs.com/rmp/9.12.0/js/rmp.min.js"></script>
</body>
</html>

Using Radiant Media Player as a ES2015 module requires self-hosting of player files - this is only available for paid Radiant Media Player customers 

<!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, initial-scale=1, shrink-to-fit=no">
  <title>TODO supply a title</title>
</head>
<body>
  <!-- Add a div container with a unique id - video and UI elements will be appended to this container -->
  <div id="rmp"></div>
  <!-- Set up async player configuration options -->
  <script type="module">
    // import Radiant Media Player as a ES2015 module
    import RadiantMP from 'radiantmediaplayer/dist/rmp.module.js';
    // First we must provide a streaming source to the player - in this case an HLS feed
    const src = {
      hls: 'https://your-hls-url.m3u8'
      // You may provide different source types - the player will automatically pick the best option
      // dash: 'https://your-dash-url.mpd'
      // mp4: 'https://your-mp4-url.mp4'
    };
    // Then we set our player settings
    const settings = {
      licenseKey: 'your-license-key',
      src: src,
      // The player will automatically resize itself based on context and those reference width/height values
      width: 640,
      height: 360,
      pathToRmpFiles: 'radiantmediaplayer/',
      // Let us select a skin
      skin: 's1',
      // Let us add a poster frame to our player
      contentMetadata: {
        poster: [
          'https://your-poster-url.jpg'
        ]
      }
    };
    const elementID = 'rmp';
    const rmp = new RadiantMP(elementID);
    rmp.init(settings);
  </script>
</body>
</html>

Where to next?

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.

Radiant Media Player

Support

Company

©2015-2023 Radiant Media Player. All Rights Reserved.