Player modules

How do player modules work?

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

• Bitrate selector module (cog icon)
• Closed captions selector module (CC icon)
• Audio language selector module (headset icon)
• Sharing module (tripod icon)
• Playback rate selector module (clock icon)
• Casting module (cast icon)
• Related module (menu icon)

Those modules can be enabled through player settings or will automatically be shown when needed. Modules are located at the top of the player. It is to be noted that in order to preserve a consistent UI some modules may not be available at all player sizes. More precisely:

• When the player width is greater than or equal to 375px all modules shall be visible.
• When the player width is lower than 375px only the cast & related modules shall be visible.

All those modules have a specific .rmp-module CSS class. When the mouse is over a module a hint shall display - clearly identifying the role of the module. This hint will have a .rmp-hint CSS class. Labels for modules can be customised through our labelling system. When interacted with a module could display an inner-menu or have other effects on the player.

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 of Object, each Object defining a custom module. The customModule Array can hold multiple custom modules. Let us run through an example:

<script src="https://cdn.radiantmediatechs.com/rmp/4.4.4/js/rmp.min.js" 
  integrity="sha384-KfgOHL+uRs3rPCnZledCYzAuPc3+eu4j6DQzjQH8370JtLm2QhZzZSlZ4r9OfCtK"
  crossorigin="anonymous"></script>
<div id="rmpPlayer"></div>
<script>
// Here we start by creating a player instance
var elementID = 'rmpPlayer';
var rmp = new RadiantMP(elementID);
// Then we specify bitrates to feed to the player
var bitrates = {
  hls: 'https://dqwp3xzzbfhtw.cloudfront.net/vod/smil:bbb.smil/playlist.m3u8'
};
// Then we define our custom module - in this case a 10s rewind module
var rewindCustomModule = {
  hint: 'Rewind 10s', // Then name of the module
  svg: 'https://www.radiantmediaplayer.com/images/replay-10.svg', // Then SVG icon for the module
  svgHover: 'https://www.radiantmediaplayer.com/images/replay-10-hover.svg', // An optional second icon that can be displayed when the module is hovered
  callback: function () { // Our callback function
    rmp.seekTo(rmp.getCurrentTime() - 10000);
  }
};
// customModule must be passed as an Array
var customModule = [rewindCustomModule];
// Then we set our player settings
var settings = {
  licenseKey: 'your-license-key',
  bitrates: bitrates,
  delayToFade: 3000,
  width: 640,
  height: 360,
  customModule: customModule,
  poster: 'https://www.radiantmediaplayer.com/images/poster-rmp-showcase.jpg'
};
// Init player
rmp.init(settings);
</script>

At the rmp-extrasmall size (e.g. player width less than 375px) only the casting and related modules are visible. If you want your custom module to show at rmp-extrasmall size you must modify the player CSS.

At all player sizes the player accepts a maximum of 7 modules. If more modules are available the overflow modules will be hidden. You can change this through player CSS if needed.

For accessibility purposes each custom module can be navigated to using the tab key. When focused a custom module can be activated using the space or enter key.

If we wanted to pass two custom modules we would have something like:

// We define our first custom module - in this case a 10s rewind module
var rewindCustomModule = {
  hint: 'Rewind 10s', // Then name of the module
  svg: 'https://www.radiantmediaplayer.com/images/replay-10.svg', // Then SVG icon for the module
  svgHover: 'https://www.radiantmediaplayer.com/images/replay-10-hover.svg', // An optional second icon that can be displayed when the module is hovered
  callback: function () { // Our callback function
    rmp.seekTo(rmp.getCurrentTime() - 10000);
  }
};
// Then our second custom module - in this case a download video module
var downloadCustomModule = {
  hint: 'Download',
  svg: 'https://www.radiantmediaplayer.com/images/download.svg',
  svgHover: 'https://www.radiantmediaplayer.com/images/download-hover.svg',
  callback: function () {
    rmp.pause();
    window.open(
      'https://www.rmp-streaming.com/media/bbb-360p.mp4',
      '_blank'
    );
  }
};
// customModule must be passed as an Array
var customModule = [rewindCustomModule, downloadCustomModule];