Player modules

Documentation sections

• How do player modules work?
• Modules API
• Adding custom player modules

How do player modules work?

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

• Quality (e.g. bitrate) selection module: represented by a cog icon and has a .rmp-quality CSS class
• Closed captions selection module: represented by a CC icon and has a .rmp-captions CSS class
• Audio language selection module: represented by a headset icon and has a .rmp-audio CSS class
• Sharing module: represented by a tripod icon and has a .rmp-sharing CSS class
• Playback rate selection module: represented by a clock icon and has a .rmp-speed CSS class
• Casting module: represented by a Google Cast icon and has a .rmp-cast CSS class
• AirPlay module: represented by an AirPlay cast icon and has a .rmp-airplay CSS class
• Related module: represented by a grid menu icon and has a .rmp-related CSS class
• Chapter markers (WebVTT): represented by a bookmark icon and has a .rmp-chapters CSS class
• Picture-in-picture module: represented by a picture-in-picture icon and has a .rmp-pip CSS class
• Virtual reality module: represented by a HMD icon and has a .rmp-vr CSS class
• Volume management module (iOS and Android only): represented by a volume icon and has a .rmp-volume CSS class

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

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

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.

A maximum of 8 modules can be displayed at the same time in the player (other potential modules will automatically be hidden)

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' 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' 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 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/5.6.1/js/rmp.min.js"></script>
<div id="rmpPlayer"></div>
<script>
// Here we start by creating a player instance
var elementID = 'rmpPlayer';
var rmp = new RadiantMP(elementID);
// Your streaming source - HLS in this example
var src = {
  hls: 'https://your-hls-url.m3u8'
};
// Then we define a custom module - in this case a 10s rewind module
var rewindCustomModule = {
  hint: 'Rewind', // Then name of the module - will show as hint within player UI
  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];
// Your player settings
var settings = {
  licenseKey: 'your-license-key',
  src: src,
  width: 640,
  height: 360,
  // Passing custom module data
  customModule: customModule,
  contentMetadata: {
    poster: [
      'https://your-poster-url.jpg'
    ]
  }
};
// Init player
rmp.init(settings);
</script>

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.

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
var rewindCustomModule = {
  hint: 'Rewind',
  svg: 'https://www.radiantmediaplayer.com/images/replay-10.svg',
  svgHover: 'https://www.radiantmediaplayer.com/images/replay-10-hover.svg',
  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://url-to-download-media-file.mp4',
      '_blank'
    );
  }
};
// customModule must be passed as an Array
var customModule = [rewindCustomModule, downloadCustomModule];