Radiant Media Player

Player modules



How do player modules work?

HTML5 Flash

Radiant Media Player skin layout includes modules with various functionalities. Those menus are:

  • Bitrate selector module (sliders 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)

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:

  • When the player width is greater than or equal to 375px all modules should be visible.
  • When the player width is lower than 375px only the cast module should be visible.
  • The following modules are not supported and thus not displayed in Flash: playback rate selector module and casting module.

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.


Adding a custom player modules

HTML5

A sepia colorization module

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:

https://cdn.radiantmediatechs.com/rmp/3.10.10/js/rmp.min.js

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.

Example

Code for example

CSS file can be viewed here.

JavaScript 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>