Radiant Media Player skin layout includes modules with various functionalities. Those menus are:
Those menus can be enabled through player settings or will automatically be shown when needed. Since Radiant Media Player 3.9 a new module layout is available for the HTML5 player - modules are located at the top of the player. It is to be noted that in order to preserve a consistent skin layout some modules may not be available at all player sizes. More precisely:
All those modules have a specific
.rmp-module CSS class. When the mouse is over a module a hint should display - clearly identifying the role of the module. This hint will have a
.rmp-hint CSS class. When interacted with
a module could display an inner-menu or have other effects on the player.
In this section we will review how to add a custom module with a custom icon to the player UI. Specifically this module will enable sepia-colorization for HTML5 video (custom module can only be added for the HTML5 rendition of the player e.g. not for Flash). This example makes use of the CSS filter property. This could also be used to apply a black&white filter, a negative filter or to strengthen contrast/brightness of a video. A good introduction to CSS filter can be found here.
When tuning the player CSS you must self-host the player files or use a specific version of the cloud player - example for current version:
One easy way to gain access to new font-icons is to obtain them from the IcoMoon online application. This is just an example of an online resource that can be used to get player icons. Material Icons and Font Awesome are 2 libraries with nice and well-formatted icons that can be used with Radiant Media Player.
CSS file can be viewed here.
Those files could be assembled as:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <title>Custom player module - Radiant Media Player</title> <link rel="stylesheet" href="css/custom-module.css"></link> </head> <body> <script src="https://cdn.radiantmediatechs.com/rmp/3.10.10/js/rmp.min.js"></script> <div id="rmpPlayer"></div> <script src="js/custom-module.js"></script> </body> </html>