Radiant Media Player

Player skin tuning



Default player skins

Radiant Media Player offers 4 different player skins each with a different look and feel and optimised for cross-device rendering. They can be customised through skin-colorization or CSS to better fit your project requirements.

A player skin is set with the skin player setting:

skin: String

The name of the skin to be used - available values are: 's1', 's2', 's3', 's4'. Default: 's1'.
If you have multiple players on the same page, all players will have the same skin: the first skin loaded.


Other skin-related player settings follow:

hideControls: Boolean

Hide player controls. Default: false. You can build your own user interface as such through our JavaScript API. Note that all UI elements (including loading icons) are hidden in this mode.

delayToFade: Number

Represents the delay in milliseconds before the overlay control bar fades away when no user interaction is detected. Default: 3000.

hideSeekBar: Boolean

Hide player seek bar. This effectively prevents seeking into a video. This should only be used for on-demand video content. This also disables keyboard control for seeking. Default: false.

hideFullscreen: Boolean

Hide player fullscreen button. This effectively prevents entering into fullscreen mode. This also disables keyboard control for fullscreen. Default: false.

hideCentralPlayButton: Boolean

Permanently hide the player central play button. Default: false which means the player central play button is displayed.

hideCentralBuffering: Boolean

Permanently hide the player central buffering overlay (animated wave or spinner depending on skin when player is buffering data). Default: false which means the player central buffering overlay is displayed when buffering happens.

backgroundColor: String

Set the player background colour in hex colour format (typically shown in certain aspect-ratio configuration or when no poster setting is provided). Default: '000000'.


Skin colorization

The 4 player skins can easily be colorized using the following player settings.

  • 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 secondary UI elements of the skin - like 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)') for transparency support.

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/4.4.19/js/rmp.min.js" 
  integrity="sha384-MHxuw6s8n+Uh8xT1LYC0zcidvLkX9DN0otZPYoamhjIU8svCQARWXpRYEXV6o6LI"
  crossorigin="anonymous"></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://dqwp3xzzbfhtw.cloudfront.net/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.85)',
  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

Radiant Media Player 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.

When doing advanced CSS work on the player you must self-host the player files.


Instructions

Inspect

First navigate to the css/ folder within the self-hosted player package and inspect it.

Tune

Option 1: tuning with 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
  • ads.less: holds the CSS data for the ad UI
  • 360.less: holds the CSS data for the 360 UI
  • cc.less: holds the player CSS for closed captioning
  • related.less: holds the CSS for the related UI
  • playlist.less: holds the CSS for the playlist UI
  • audio-only.less: holds the CSS for the audio-only UI
  • dvr.less: holds the CSS for the DVR UI
  • icons.less: holds the CSS icons for the player
  • s1.less: holds the specific CSS for the 's1' skin

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.

Option 2: tuning with CSS

open rmp-s1.css (or another rmp-s*.css file) and apply your modifications

Minify

In all cases you will need to minify (a.k.a. compress) your modified 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.

Overriding player CSS

The player loads its CSS dynamically with JavaScript after init is called on player - which means that any CSS you may apply to the player when page loads may be overwritten at a later stage (e.g. after init has been called). Typically one can know when player CSS is loaded and applied when the player ready event fires. You may use CSS specificity to override the player CSS (while a limited use of the !important exception is generally accepted in the industry using CSS specificity is a better approach). This could work for simple CSS modifications. However for any advanced CSS work on the player you should follow the steps above to modify the core player CSS and let the player load the modified CSS through its own logic.


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 extensively the player UI with CSS you are going to need to use a DOM inspector at some point 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, 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 to its container based on its current width. 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:

  • playerWidth > 0 && playerWidth < 375: .rmp-extrasmall class is present
  • playerWidth >= 375 && playerWidth < 480: .rmp-small class is present
  • playerWidth >= 480 && playerWidth < 640: .rmp-medium class is present
  • playerWidth >= 640 .rmp-large class is present

Most of the player CSS magic happens at .rmp-extrasmall and .rmp-small sizes.


Other player CSS 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 or Android) the player has a .rmp-mobile class on the player container.
  • When Google Cast casting is engaged the player has a .rmp-casting class on the player container.
  • When the player is with the related UI the player has a .rmp-related-ui class on the player container.
  • When the player is in audio-only mode it has the .rmp-audio-only class on the player container.