.less Player skins - Radiant Media Player
Radiant Media Player

Player skin tuning



Default player skins

HTML5 Flash

Radiant Media Player offers 4 different player skins. They can be customised through skin-colorization or CSS to better fit your project requirements.

A player skin is set with the skin setting (String, default to 's1'). Available values are: 's1', 's2', 's3' or 's4'.

Radiant Media Player Flash fallback also supports 4 different skins (also set with 's1', 's2', 's3' or 's4'). The flashSkin setting can be used to target a specific Flash skin.

Since Radiant Media Player 3.10 a new skin colorization mechanism with transparency support and 3 different color zones is available. As Flash fades away all future developments for skinning the player will be provided for the HTML5 player.


Skin colorization

HTML5

The 4 player skins can easily be colorized using the following player settings. This will only affect the HTML5 rendition of the player.

  • skinBackgroundColor: this setting will colorize the background of the skin (String, default to '')
  • skinButtonColor: this setting will colorize the buttons and texts of the skin (String, default to '')
  • skinAccentColor: this setting will colorize some secondary UI elements of the skin - like the hover state for buttons (String, default to '')

The above parameters accept either HEX color code (example 'FF0000') or rgba color code (example 'rgba(0, 255, 0, 0.8)').

Colorized player example:

Player code for the above example:

<!-- Include Radiant Media Player JavaScript file in your <body> or <head> -->
<script src="https://cdn.radiantmediatechs.com/rmp/v3/latest/js/rmp.min.js"></script>
<!-- Set up your wrapper div with its unique id -->
<div id="rmpPlayer"></div>
<!-- Set up player configuration options -->
<script>
// First we specify bitrates to feed to the player
var bitrates = {
  hls: 'https://streamingrmp-1479.kxcdn.com/vod/smil:bbb.smil/playlist.m3u8'
};
// Then we set our player settings
var settings = {
  licenseKey: 'your-license-key',
  bitrates: bitrates,
  delayToFade: 3000,
  width: 640,
  height: 360,
  skin: 's1',
  // Here starts our colorization options
  skinBackgroundColor: 'rgba(244, 67, 54, 0.9)',
  skinButtonColor: 'FFFFFF',
  skinAccentColor: '000000',
  poster: 'https://www.radiantmediaplayer.com/images/poster-rmp-showcase.jpg'
};
// Reference to the wrapper div (unique id)
var elementID = 'rmpPlayer';
// Create an object based on RadiantMP constructor
var rmp = new RadiantMP(elementID);
// Initialization ... test your page and done!
rmp.init(settings);
</script>

Player CSS

HTML5

Radiant Media Player HTML5 rendition can be customised through CSS. Source CSS and Less files are available for each customer in our back-end within the self-hosting player files package (download section).

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.14/js/rmp.min.js

Instructions

  • Less: open the rmp-s1.less file (or another rmp-s*.less file) - this is the file for the 's1' skin. You will see that it references several .less files:
    • colors.less: holds color settings
    • mixins.less: holds mixins (helper functions)
    • core.less: holds the player main CSS data
    • cc.less: holds the player CSS for closed captioning
    • playlist.less: holds the CSS for the in-player playlist layout
    • audio-only.less: holds the CSS for the audio-only layout
    • icons.less: holds the CSS icons for the player
    • s1.less: holds the specific CSS for the 's1' skin
    • Additionally ads.less and dvr.less are also imported in s1.less: ads.less holds CSS for rendering advertisement and dvr.less CSS for the DVR UI
    You can apply your modifications to each .less file you want to tune. You will then need to use a less compiler to output your changes to CSS.
  • CSS: open rmp-s1.css (or another rmp-s*.css file) and apply your modifications

In all cases you will need to self-host the player files and minify your output CSS file to rmp-s1.min.css in place of the former rmp-s1.min.css file (or another rmp-s*.min.css file for the other skins). The player will then automatically pick up the CSS changes.

General player structure

This is not an exhaustive list of CSS classes for the player but rather some high-level information about the player structure. If you want to customize the player UI with CSS you are going to need to use a DOM inspector at some point (this is generally under the inspect menu in your browser developer tools) to better understand the player layout.

  • .rmp-container class: this is the player container where all UI elements are added
  • .rmp-content class (child of .rmp-container): this is where the video tag (or Flash object), poster frame or captions rendering area are appended
  • .rmp-overlay-button class (child of .rmp-container): the overlay central play button
  • .rmp-loading-spin class (child of .rmp-container): the central loading spinner
  • .rmp-outline class (child of .rmp-container): the control bar at the bottom of .rmp-container
  • .rmp-module class (children of .rmp-container): the module UI (like sharing, bitrate selector or closed captions menu) - more information on player modules can be found here

Player responsiveness

When the player is resized (for example on player load, orientation change or window resizing) the player will add resizing classes. Those resizing classes change the layout of the player to better fit the current player size and are applied at common break points for devices currently available on the market:

  • When the player width is greater than or equal to 480px the .rmp-xl class is applied to the player container)
  • When the player width is lower than 480px and greater than or equal to 375px the .rmp-xs class is applied to the player container
  • When the player width is lower than 375px the .rmp-nano class is applied to the player container

Other player classes

  • Autohide of UI elements: when the player UI elements are visible the player has a .rmp-chrome class on the player container. When the player UI elements are not visible the player has a .rmp-no-chrome class on the player container.
  • When fullscreen is engaged the player has a .rmp-fullscreen-on class on the player container.
  • When the player is in live mode the player has a .rmp-live class on the player container.
  • When the player is in DVR mode the player has a .rmp-live-dvr class on the player container.
  • When the player is rendered on mobile devices (iOS, Android, Windows Phone) the player has a .rmp-mobile class on the player container.
  • When Google Cast casting is engaged the player has .rmp-casting class on the player container.
  • When the player is with the in-player playlist layout it has the .rmp-inpp class on the player container.
  • When the player is in audio-only mode it has the .rmp-audio-only class on the player container. When the player is in audio-only control-bar-only mode it has both the .rmp-audio-only and .rmp-audio-only-chrome-only classes on the player container.

Using the player API

HTML5 Flash

Through the hideControls setting you can hide the default player controls and start building your own skin through our player API with JavaScript.