Documentation

Offline storage & playback

Radiant Media Player

Player skins & CSS

Sections

Built-in player skins
Skin settings
Skin colorization
Custom icons
Player CSS
Player API

Built-in player skins

Radiant Media Player offers 6 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', 'outstream', 'tv'. Default: 's1'.
If you have multiple players on the same page, all players will have the same skin: the first skin loaded.
You can see all 6 skins live here.
The 'outstream' should be used in the context of using outstream video ads.
The 'tv' skin should be used in the context of developing a TV app.

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: 2800.

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.

hideVolume: Boolean

Hide player volume button. This also disables keyboard control for volume. 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'.

fullWindowSkin: Boolean

Set the skin (s1, s2, s3, s4, outstream) to be having a full window layout. Default: false.

fadeInPlayer: Boolean

When fadeInPlayer is set to true, the player will have a CSS fadeIn effect (200 ms) as it becomes ready, giving a nice player introduction to the viewer. Default: true.

uiSeparator: String

The player will use a separator character in the sharing and quality modules. This setting lets you tune this character. Default: '-'.

Skin colorization

The 4 player skins ('s1', 's2', 's3', 's4') 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.

Player code example - see this example here

<!-- Include Radiant Media Player JavaScript file in your <body> or <head> -->
<script src="https://cdn.radiantmediatechs.com/rmp/6.4.10/js/rmp.min.js"></script>
<!-- Player container element -->
<div id="rmpPlayer"></div>
<!-- Set up player configuration options -->
<script>
// Your streaming source - HLS in this example
var src = {
  hls: 'https://your-hls-url.m3u8'
};
// Your player settings
var settings = {
  licenseKey: 'your-license-key',
  src: src,
  width: 640,
  height: 360,
  skin: 's1',
  contentMetadata: {
    poster: [
      'https://your-poster-url.jpg'
    ]
  },
  // Here starts our colorization settings
  skinBackgroundColor: '01579B',
  skinButtonColor: 'FFD180',
  skinAccentColor: 'FF9100'
};
var elementID = 'rmpPlayer';
var rmp = new RadiantMP(elementID);
rmp.init(settings);
</script>

Custom icons

Input JSON file

You can easily customise player icons by submitting a JSON file holding URIs to SVG files (one SVG for each icon). If you only pass some custom player icons, player default icons will be used for icons that are not defined in the JSON file. Example:

{
  "icons": {
    "airplay": "https://cdn.radiantmediatechs.com/rmp/svg/airplay.svg",
    "audio": "https://cdn.radiantmediatechs.com/rmp/svg/audio.svg",
    "captions": "https://cdn.radiantmediatechs.com/rmp/svg/captions.svg",
    "chapters": "https://cdn.radiantmediatechs.com/rmp/svg/chapters.svg",
    "code": "https://cdn.radiantmediatechs.com/rmp/svg/code.svg",
    "copy": "https://cdn.radiantmediatechs.com/rmp/svg/copy.svg",
    "close": "https://cdn.radiantmediatechs.com/rmp/svg/close.svg",
    "quick-forward": "https://cdn.radiantmediatechs.com/rmp/svg/quick-forward.svg",
    "quick-rewind": "https://cdn.radiantmediatechs.com/rmp/svg/quick-rewind.svg",
    "quick-forward-tv": "https://cdn.radiantmediatechs.com/rmp/svg/quick-forward-tv.svg",
    "quick-rewind-tv": "https://cdn.radiantmediatechs.com/rmp/svg/quick-rewind-tv.svg",
    "link": "https://cdn.radiantmediatechs.com/rmp/svg/link.svg",
    "minus": "https://cdn.radiantmediatechs.com/rmp/svg/minus.svg",
    "next": "https://cdn.radiantmediatechs.com/rmp/svg/next.svg",
    "off-volume": "https://cdn.radiantmediatechs.com/rmp/svg/off-volume.svg",
    "pause": "https://cdn.radiantmediatechs.com/rmp/svg/pause.svg",
    "pip": "https://cdn.radiantmediatechs.com/rmp/svg/pip.svg",
    "play": "https://cdn.radiantmediatechs.com/rmp/svg/play.svg",
    "plus": "https://cdn.radiantmediatechs.com/rmp/svg/plus.svg",
    "previous": "https://cdn.radiantmediatechs.com/rmp/svg/previous.svg",
    "quality": "https://cdn.radiantmediatechs.com/rmp/svg/quality.svg",
    "related": "https://cdn.radiantmediatechs.com/rmp/svg/related.svg",
    "replay": "https://cdn.radiantmediatechs.com/rmp/svg/replay.svg",
    "resize-full": "https://cdn.radiantmediatechs.com/rmp/svg/resize-full.svg",
    "resize-small": "https://cdn.radiantmediatechs.com/rmp/svg/resize-small.svg",
    "sharing": "https://cdn.radiantmediatechs.com/rmp/svg/sharing.svg",
    "skip-next": "https://cdn.radiantmediatechs.com/rmp/svg/skip-next.svg",
    "speed": "https://cdn.radiantmediatechs.com/rmp/svg/speed.svg",
    "volume": "https://cdn.radiantmediatechs.com/rmp/svg/volume.svg",
    "vr": "https://cdn.radiantmediatechs.com/rmp/svg/vr.svg"
  }
}

Player setting

customIconsLoc: String

URI to JSON file holding the SVG icons. Default: ''.

Player code example

<!-- Include Radiant Media Player JavaScript file in your <body> or <head> -->
<script src="https://cdn.radiantmediatechs.com/rmp/6.4.10/js/rmp.min.js"></script>
<!-- Player container element -->
<div id="rmpPlayer"></div>
<!-- Set up player configuration options -->
<script>
// Your streaming source - HLS in this example
var src = {
  hls: 'https://your-hls-url.m3u8'
};
// Your player settings
var settings = {
  licenseKey: 'your-license-key',
  src: src,
  width: 640,
  height: 360,
  skin: 's1',
  contentMetadata: {
    poster: [
      'https://your-poster-url.jpg'
    ]
  },
  // Custom icon URI
  customIconsLoc: 'https://cdn.radiantmediatechs.com/rmp/svg/icons.json'
};
var elementID = 'rmpPlayer';
var rmp = new RadiantMP(elementID);
rmp.init(settings);
</script>

Player CSS

Radiant Media Player skins can be customised through CSS. Source CSS and LESS files are available for each player skin 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.

Get started with player CSS customisation

Inspect

First navigate to the css/ folder within the self-hosted player package and inspect it. Player icons are located in the fonts/ folder (rmp-font.* files).

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:

import-less/ads/
- ad-outstream.less: holds CSS for the outstream ad skin
- ads.less: holds CSS for the ad UI (common for IMA and rmp-vast parsers)
- rmp-ad.less: holds CSS for the ad UI (rmp-vast parser only)
import-less/audio-only/
- audio-only-ios.less: holds the iOS-specific CSS for the audio-only UI
- audio-only-spinner.less: holds CSS for the audio-only spinner UI
- audio-only.less: holds CSS for the audio-only UI
import-less/core-skin/
- 360.less: holds CSS for the 360 UI
- accessibility.less: holds CSS for accessibility UI
- auto-hide.less: holds CSS for auto-hide UI
- captions.less: holds CSS for the captions rendering area and module
- cast.less: holds player CSS for Google Cast and AirPlay
- central-ui.less: holds player CSS for central UI (central play and buffering icons)
- container.less: holds player CSS for player container
- control-bar.less: holds player CSS for player bottom control bar
- core.less: holds core player CSS
- error.less: holds error UI CSS
- fullscreen.less: holds CSS when player is in fullscreen or full window (360 video in iOS) mode
- hide-controls.less: holds CSS to hide player controls
- live.less: holds CSS for live UI
- logo.less: holds logo UI CSS
- modules.less: holds CSS common to all player modules
- playlist.less: holds CSS for the playlist UI
- poster.less: holds CSS for poster UI
- quick-rewind-forward.less: holds CSS when the quick rewind and/or fast forward icons are displayed
- related.less: holds CSS for the related UI
- title-description.less: holds CSS for contentMetadata.title and contentMetadata.description settings
- volume.less: holds CSS for volume UI
import-less/helpers/
- colors.less: holds CSS for player colors
- fonts.less: holds CSS for player fonts
- generic.less: holds CSS for generic helpers
- mixins.less: holds Less mixins (helper functions)
- reset.less: holds CSS for resetting accessible button UI
- scrollbar.less: holds CSS for the player custom scroll bar (webkit-based browsers only)
import-less/s1/
- s1.less: s1 skin specific CSS
import-less/s2/
- s2.less: s2 skin specific CSS
import-less/s3/
- s3.less: s3 skin specific CSS
import-less/s4/
- s4.less: s4 skin specific CSS
import-less/tv/
- core-tv.less: TV skin specific CSS

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 much 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 layout

This is not an exhaustive list of CSS classes for the player but rather some high-level information about the player DOM structure. If you want to extensively customise 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 element where all UI elements are appended
.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-mobile-central-ui class (child of .rmp-container): on mobile we do not use .rmp-overlay-button but a specific central UI
.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 - more information on player modules can be found here

Player container level CSS classes

All the following classes are set on player container (div with .rmp-container class) based on player settings or modes:

When player controls are visible the player container has a .rmp-chrome class
>When player controls are not visible the player container has a .rmp-no-chrome class
When fullscreen is engaged the player container has a .rmp-fullscreen-on class
When fullscreen is engaged on iPadOS the player container has a .rmp-fullscreen-ipad-os class
When fullscreen is engaged on iOS the player container has a .rmp-fullscreen-ios class
When player is rendered on iPadOS the player container has a .rmp-ipad-os class
When full window mode is engaged (which means no native fullscreen support: iOS for 360 video for example) the player container has a .rmp-full-window-on class
When player is in live mode the player container has a .rmp-live class
When player is in DVR mode the player container has a .rmp-live-dvr class
When player is playing DVR recorded content (e.g. not at live edge) the player container has a .rmp-dvr-vod class
When player is playing DVR live content (e.g. not recorded) the player container has .rmp-dvr-live class
When player is rendered on mobile devices (iOS, iPadOS or Android) the player container has a .rmp-mobile class
When Google Cast is available player container has a .rmp-cast-available class
When Google Cast casting is engaged player container has a .rmp-casting class
When AirPlay is available player container has a .rmp-airplay-available class
When player is in audio-only mode player container has a .rmp-audio-only class
When player displays audio-only content with our video player, player container has the .rmp-audio-only-use-video-layout class
When player is engaged in PiP mode player container has a .rmp-pip-on class
When player is displaying a linear video ad player container has a .rmp-linear-ad-ui
When player is displaying playback blocker ( adBlockerDetectedPreventPlayback setting set to true) following detection of an ad-blocker, player container has a .rmp-ad-block-detected class
When quick rewind OR fast forward is available, player container has a .rmp-quick-rewind-or-forward-ui class
When quick rewind AND fast forward is available, player container has a .rmp-quick-rewind-and-forward-ui class
When player is in error mode, player container has a .rmp-error-ui class
When player is in playlist mode, player container has a .rmp-playlist-ui class
When player is in audio-only playlist mode, player container has a .rmp-playlist-audio-only class
When player is in related mode, player container has a .rmp-related-ui class
When player is in audio-only related mode, player container has a .rmp-related-audio-only class
When a player module is open, player container has a .rmp-module-overlay-open class
When a player is displaying on desktop/laptop, player container has a .rmp-volume-desktop-ui class
When a player is displayed with the TV skin, player container has a .rmp-tv-player class
When a player is displaying outstream video ads, player container has a .rmp-ad-outstream class
When player is showing the 360 UI, player container has a .rmp-360-ui class
When player is showing the VR UI, player container has a .rmp-vr-ui class

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 available on the market:

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

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

Player API

Eventually you may want to go one step further and build your own set of player controls from scratch. You can do this by setting hideControls to true and using our player API to command the player (play/pause, volume, seek ...).

Radiant Media Player

Player skins & CSS

Sections

Built-in player skins

Skin colorization

Custom icons

Player CSS

Get started with player CSS customisation

Inspect

Tune

Minify

Overriding player CSS

General player layout

Player container level CSS classes

Player responsiveness

Player API

Sections