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.
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
.
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/7.9.1/js/rmp.min.js"></script> <!-- Player container element --> <div id="rmp"></div> <!-- Set up player configuration options --> <script> // Your streaming source - HLS in this example const src = { hls: 'https://your-hls-url.m3u8' }; // Your player settings const 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' }; const rmp = new RadiantMP('rmp'); rmp.init(settings); </script>
iconsSize: Number
Modify player icons size. Sane values are between 0.75 (smaller icons) and 1.25 (larger icons). Default:
1
.
customIconsLoc: String
URI to JSON file holding the SVG icons. Default: ''
.
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" } }
<!-- Include Radiant Media Player JavaScript file in your <body> or <head> --> <script src="https://cdn.radiantmediatechs.com/rmp/7.9.1/js/rmp.min.js"></script> <!-- Player container element --> <div id="rmp"></div> <!-- Set up player configuration options --> <script> // Your streaming source - HLS in this example const src = { hls: 'https://your-hls-url.m3u8' }; // Your player settings const 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' }; const rmp = new RadiantMP('rmp'); rmp.init(settings); </script>
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.
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).
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:
contentMetadata.title
and
contentMetadata.description
settings
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
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.
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.
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
All the following classes are set on player container (div
with
.rmp-container
class) based on player settings or modes:
.rmp-chrome
class
.rmp-no-chrome
class
.rmp-fullscreen-on
class
.rmp-fullscreen-ipad-os
class
.rmp-fullscreen-ios
class
.rmp-ipad-os
class
.rmp-full-window-on
class.rmp-live
class
.rmp-live-dvr
class
.rmp-dvr-vod
class.rmp-dvr-live
class
.rmp-mobile
class
.rmp-cast-available
class
.rmp-casting
class
.rmp-airplay-available
class
.rmp-audio-only
class
.rmp-audio-only-use-video-layout
class
.rmp-pip-on
class
.rmp-linear-ad-ui
adBlockerDetectedPreventPlayback
setting set to true
) following detection of an ad-blocker, player container has a
.rmp-ad-block-detected
class
.rmp-quick-rewind-or-forward-ui
class
.rmp-quick-rewind-and-forward-ui
class
.rmp-error-ui
class
.rmp-playlist-ui
class
.rmp-playlist-audio-only
class
.rmp-related-ui
class
.rmp-related-audio-only
class
.rmp-module-overlay-open
class
.rmp-volume-desktop-ui
class
.rmp-tv-player
class
.rmp-ad-outstream
class
.rmp-360-ui
class
.rmp-vr-ui
class
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:
.rmp-extrasmall
class is present
.rmp-small
class is present
.rmp-medium
class is presentMost of the player CSS magic happens at .rmp-extrasmall
and
.rmp-small
sizes.
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 ...).
©2015-2022 Radiant Media Player. All Rights Reserved.