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.
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: ''.
loopModule: Boolean
Enables or disables loop behavior in the player. Default: false.
theaterModeModule: Boolean
Enables or disables theater mode module in the player. Default: false.
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'
.
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.
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];
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; }
©2015-2025 Radiant Media Player. All Rights Reserved.