Documentation

Player Modules

How do player modules work?

Radiant Media Player UI includes interactive modules with various functionalities. Those modules are:

Those modules can be enabled through player settings or will automatically be shown when needed. Modules are located at the top-right of the player. When multiple modules are available they are tiled horizontally.

When interacted with the quality, captions, audio, sharing, speed, related, info and chapters modules will open a semi-transparent overlay allowing the viewer to easily select a track, playback rate, related item ...

Labels for modules can be customised through our labelling system.

Information module

infoModule: String

Custom text to be displayed in an overaly on top of the player. Note: you can use HTML markup (example <a> or <em>) in the text to customize it. Default: ''.

Loop module

loopModule: Boolean

Enables or disables loop behavior in the player. Default: false.

Theater mode module

theaterModeModule: Boolean

Enables or disables theater mode module in the player. Default: false.

Modules API

getModuleOverlayVisible(moduleType)

rmp.getModuleOverlayVisible('quality');

This method takes as input a String (moduleType) and returns a Boolean stating if the input module is currently open or not (e.g. input module overlay is visible or not). Input parameter can be: 'quality', 'sharing', 'audio', 'captions', 'speed', 'related', 'info' or 'chapters'.

setModuleOverlayVisible(moduleType, visible)

rmp.setModuleOverlayVisible('quality', true);

This method takes as input a String (moduleType) and a Boolean (visible) and shows or hides the targeted module. Input parameter (moduleType) can be: 'quality', 'sharing', 'audio', 'captions', 'speed', 'related', 'info' or 'chapters'.

Adding custom player modules

In the event you want to add a custom module to the player we have prepared an easy way to do so. All that is required to add a custom module is a name for this module, a SVG icon and a JavaScript callback function to create interactivity for your custom module. Custom modules are passed to the player with the customModule setting. This setting expects to see an Array.>Object<, each Object defining a custom module with the following properties.

  • hint: String
  • svg: String
  • svgHover: String
  • callback: Function

Example:

<script src="https://cdn.radiantmediatechs.com/rmp/10.1.1/js/rmp.min.js"></script>
<div id="rmp"></div>
<script>

  // Here we start by creating a player instance
  const rmp = new RadiantMP('rmp');

  // Your streaming source - HLS in this example
  const src = {
    hls: 'https://your-hls-url.m3u8'
  };

  // Then we define a custom module - in this case a 10s rewind module
  const rewindCustomModule = {
    hint: 'Rewind', // Then name of the module - will show as hint within player UI
    svg: 'https://cdn.radiantmediatechs.com/img/replay-10-icon.svg', // Then SVG icon for the module
    svgHover: 'https://cdn.radiantmediatechs.com/img/replay-10-icon-hover.svg', // An optional second icon that can be displayed when the module is hovered
    callback: () => { // Our callback function
      rmp.seekTo(rmp.currentTime - 10000).then(() => {
        console.log('seekTo was successful');
      }).catch(warning => {
        console.warn(warning);
      });
    }
  };

  // customModule must be passed as an Array
  const customModule = [rewindCustomModule];

  // Your player settings
  const settings = {
    licenseKey: 'your-license-key',
    src,
    width: 640,
    height: 360,
    // Passing custom module data
    customModule: customModule,
    contentMetadata: {
      poster: [
        'https://your-poster-url.jpg'
      ]
    }
  };

  // Player initialisation
  async function initRmpPlayer() {
    try {
      await rmp.init(settings);
    } catch (error) {
      console.error('Radiant Media Player failed to initialize', error);
    }
  }
  initRmpPlayer();

</script>

If we wanted to pass two custom modules we would have something like - see this example here

// We define our first custom module - in this case a 10s rewind module
const rewindCustomModule = {
  hint: 'Rewind',
  svg: 'https://cdn.radiantmediatechs.com/img/replay-10-icon.svg',
  svgHover: 'https://cdn.radiantmediatechs.com/img/replay-10-icon-hover.svg',
  callback: () => {
    rmp.seekTo(rmp.currentTime - 10000).then(() => {
      console.log('seekTo was successful');
    }).catch(warning => {
      console.warn(warning);
    });
  }
};
// Then our second custom module - in this case a download video module
const downloadCustomModule = {
  hint: 'Download',
  svg: 'https://cdn.radiantmediatechs.com/img/download-icon.svg',
  svgHover: 'https://cdn.radiantmediatechs.com/img/download-icon-hover.svg',
  callback: () => {
    rmp.pause();
    window.open(
      'https://url-to-download-media-file.mp4',
      '_blank'
    );
  }
};
// customModule must be passed as an Array
const customModule = [rewindCustomModule, downloadCustomModule];

Adding custom overlay

Below is an example of how to implement a custom overlay on top of the player displaying custom information (public IP and client bandwidth of viewer). This example can be viewed live here.

CSS (to be added to your page <head>)

<style>
  .rmp-custom-overlay {
    width: auto;
    height: auto;
    background: rgba(255, 255, 255, 0.7);
    color: #000000;
    border: 2px solid #000000;
    position: absolute;
    left: 8px;
    top: 8px;
    font-size: 14px;
    padding: 8px;
    text-align: left;
    border-radius: 4px;
  }

  .rmp-custom-overlay > div:first {
    margin-bottom: 10px;
  }
</style>

HTML + JavaScript (to be added to your page <body>)

<script src="https://cdn.radiantmediatechs.com/rmp/10.1.1/js/rmp.min.js"></script>
<div id="rmp"></div>
<script>
  const src = {
    hls: 'https://your-hls-url.m3u8'
  };
  // player settings
  const settings = {
    licenseKey: 'your-license-key',
    src,
    width: 640,
    height: 360,
    skin: 's1',
    contentMetadata: {
      poster: [
        'https://www.radiantmediaplayer.com/images/poster-rmp-demo.jpg'
      ]
    }
  };
  const elementID = 'rmp';
  const rmp = new RadiantMP(elementID);

  // We define our custom overlay div element
  const rmpContainer = document.getElementById(elementID);
  const rmpCustomOverlay = document.createElement('div');
  rmpCustomOverlay.className = 'rmp-custom-overlay';

  // Player initialisation
  async function initRmpPlayer() {
    try {
      await rmp.init(settings);
      console.log('ready');

      // Add bandwidth data
      const textFieldBW = document.createElement('div');
      textFieldBW.textContent = 'Client bandwidth: ' + Math.round(rmp.bandwidthEstimate / 1000) + ' kbps';
      setInterval(() => {
        textFieldBW.textContent = 'Client bandwidth: ' + Math.round(rmp.bandwidthEstimate / 1000) + ' kbps';
      }, 1000);
      rmpCustomOverlay.appendChild(textFieldBW);

      // Add position data
      const options = {
        enableHighAccuracy: true,
        timeout: 5000,
        maximumAge: 3600000
      };
      navigator.geolocation.getCurrentPosition((pos) => {
        const crd = pos.coords;
        console.log(crd);
        const textFieldLat = document.createElement('div');
        textFieldLat.textContent = 'Latitude: ' + crd.latitude;
        const textFieldLong = document.createElement('div');
        textFieldLong.textContent = 'Longitude: ' + crd.longitude;
        rmpCustomOverlay.appendChild(textFieldLat);
        rmpCustomOverlay.appendChild(textFieldLong);
      }, (error) => {
        console.warn(`ERROR(${error.code}): ${error.message}`);
      }, options);
      rmpContainer.appendChild(rmpCustomOverlay);
    } catch (error) {
      console.error('Radiant Media Player failed to initialize', error);
    }
  }
  initRmpPlayer();
</script>

If you want the custom overlay to auto-hide with player controls add the following CSS to your page:

.rmp-custom-overlay {
  transition-property: opacity,visibility;
  transition-duration: .4s;
  transition-timing-function: ease-in;
}

.rmp-chrome .rmp-custom-overlay {
  opacity: 1;
  visibility: visible;
}

.rmp-no-chrome .rmp-custom-overlay {
  opacity: 0;
  visibility: hidden;
}
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License.

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