Radiant Media Player UI includes interactive modules with various functionalities. Those modules are:
.rmp-quality
CSS class
.rmp-captions
CSS class
.rmp-audio
CSS class
.rmp-sharing
CSS class
.rmp-speed
CSS class
.rmp-cast
CSS class
.rmp-airplay
CSS class
.rmp-related
CSS class
.rmp-chapters
CSS class
.rmp-pip
CSS class
.rmp-vr
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.
hideModule: Object
hideModule: { quality: false, captions: false, audio: false, volume: false };
This setting can be used to hide player modules. The quality, captions, audio, volume modules can be hidden. The above example shows the default values.
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'
.
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.12.5/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-icon.svg', // Then SVG icon for the module svgHover: 'https://www.radiantmediaplayer.com/images/replay-10-icon-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-icon.svg', svgHover: 'https://www.radiantmediaplayer.com/images/replay-10-icon-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];
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 { 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/5.12.5/js/rmp.min.js"></script> <div id="rmpPlayer"></div> <script> var src = { hls: 'https://5b44cf20b0388.streamlock.net:8443/vod/smil:bbb.smil/playlist.m3u8' }; // player settings var settings = { licenseKey: 'your-license-key', src: src, width: 640, height: 360, skin: 's1', contentMetadata: { poster: [ 'https://www.radiantmediaplayer.com/images/poster-rmp-demo.jpg' ] } }; var elementID = 'rmpPlayer'; var rmp = new RadiantMP(elementID); rmp.init(settings); // we define our custom overlay div element var rmpContainer = document.getElementById(elementID); var rmpCustomOverlay = document.createElement('div'); rmpCustomOverlay.className = 'rmp-custom-overlay'; // callback that is being run when IP data is fetched from ipify servers function getIP(json) { // add public IP var textFieldIP = document.createElement('div'); textFieldIP.textContent = 'Public IP: ' + json.ip; rmpCustomOverlay.appendChild(textFieldIP); // add client bandwidth var textFieldBW = document.createElement('div'); textFieldBW.textContent = 'Client bandwidth: ' + Math.round(rmp.getBandwidthEstimate() / 1000) + ' kbps'; setInterval(function () { textFieldBW.textContent = 'Client bandwidth: ' + Math.round(rmp.getBandwidthEstimate() / 1000) + ' kbps'; }, 1000); rmpCustomOverlay.appendChild(textFieldBW); } // when ready event fires we append our custom overlay div element // so that this element is appended on top of other player elements rmpContainer.addEventListener('ready', function () { rmpContainer.appendChild(rmpCustomOverlay); }); </script> <!-- script to get public IP address from ipify servers - https://www.ipify.org --> <script type="application/javascript" src="https://api.ipify.org?format=jsonp&callback=getIP"></script>
If you want the custom overlay to auto-hide with player controls add the following CSS to your page:
.rmp-custom-overlay { -webkit-transition-property: opacity,visibility; -moz-transition-property: opacity,visibility; transition-property: opacity,visibility; -webkit-transition-duration: .4s; -moz-transition-duration: .4s; transition-duration: .4s; -webkit-transition-timing-function: ease-in; -moz-transition-timing-function: ease-in; 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-2021 Radiant Media Player. All rights reserved.