Documentation

Quick Start

Introduction

Radiant Media Player is a versatile cross-device HTML5 video & audio player. You can stream to Radiant Media Player with HLS, MPEG-DASH or progressive download streaming. 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 added to any web environments (browsers, mobile & OTT apps): it just is a piece of HTML and JavaScript, the player will automatically adapt its layout to yours. Radiant Media Player is highly customisable with over 200 player settings and a fully documented API to build about anything on top of our player. Our support team is also available to help you get the most out of Radiant Media Player. Your success is our success.

Radiant Media Player does not provide encoding or hosting services for video content - we just provide the player. Therefore to use Radiant Media Player you will need to encode and host your content yourself or use a 3rd-party service provider that can help you with that - any standard-compliant streaming provider will work with Radiant Media Player.

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 and initialization

Here is a complete example:

<!DOCTYPE html>
<!-- Our HTML5 document must start with a valid DOCTYPE -->
<html lang="en">
  <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/10.1.4/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,
        // 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'
          ]
        }
      };
      // Player ID 
      const elementID = 'rmp';
      // Create an object based on RadiantMP constructor
      const rmp = new RadiantMP(elementID);
      // Initialization ... and done!
      async function initRmpPlayer() {
        try {
          await rmp.init(settings);
        } catch(error) {
          // This should not happen often, but when it happens it could be due to:
          // invalid license key|cannot find container element (or PARENT)|no playback support
          console.error('Radiant Media Player failed to initialize', error);
        }
      }
      initRmpPlayer();
    </script>
  </body>
</html>
<!DOCTYPE html>
<!-- Our HTML5 document must start with a valid DOCTYPE -->
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My video app</title>
    <!-- we map rmp to our cloud player file -->
    <script type="importmap">
      {
        "imports": {
          "rmp": "https://cdn.radiantmediatechs.com/rmp/10.1.4/js/rmp.min.mjs"
        }
      }
    </script>
  </head>
  <body>
    <!-- Player container element -->
    <div id="rmp"></div>
    <script type="module" src="/main.js"></script>
  </body>
</html>
...
// main.js
// import Radiant Media Player as a ES2015 module (cloud-player)
import RadiantMP from 'rmp';
// 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']
};
// Your player settings
const settings = {
  licenseKey: 'your-license-key',
  src,
  width: 640,
  height: 360,
  contentMetadata: {
    poster: [
      'https://your-poster-url.jpg'
    ]
  }
};
const elementID = 'rmp';
const rmp = new RadiantMP(elementID);
// Player initialisation
async function initRmpPlayer() {
  try {
    await rmp.init(settings);
  } catch (error) {
    // This should not happen often, but when it happens it could be due to:
    // invalid license key|cannot find container element (or PARENT)|no playback support
    console.error('Radiant Media Player failed to initialize', error);
  }
}
initRmpPlayer();

<!DOCTYPE html>
<!-- Our HTML5 document must start with a valid DOCTYPE -->
<html lang="en">
  <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 player configuration options -->
    <script type="module">
      // import Radiant Media Player as a ES2015 module
      import RadiantMP from 'radiantmediaplayer/dist/rmp.min.mjs';
      // 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,
        // 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);
      // Initialization ... and done!
      async function initRmpPlayer() {
        try {
          await rmp.init(settings);
        } catch(error) {
          // This should not happen often, but when it happens it could be due to:
          // invalid license key|cannot find container element (or PARENT)|no playback support
          console.error('Radiant Media Player failed to initialize', error);
        }
      }
      initRmpPlayer();
    </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-2025 Radiant Media Player. All Rights Reserved. ✝