Radiant Media Player offers 2 different player skins each with a different look and feel and optimised for cross-device rendering. Additionally, dedicated player skins are available for our TV and outstream player. Player skins can be customised with player settings or CSS for more advanced use-cases.
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'
, '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 a demo of player 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, outstream) to be having a full window layout.
Default: false
.
The 4 player skins ('s1'
, 's2'
, 'outstream'
, 'tv'
) can
easily be colorized using the following player settings.
skinBackgroundColor: String
This setting will colorize the background of the
skin. Default to ''
.
skinButtonColor: String
This setting will colorize the buttons and texts of the
skin. Default to ''
.
skinAccentColor: String
This setting will colorize secondary UI elements of the
skin - like hover state for buttons. 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/10.1.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, 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'); // Initialization ... and done! async function initRmpPlayer() { try { await rmp.init(settings); } catch(error) { console.error('Radiant Media Player failed to initialize', error); } } initRmpPlayer(); </script>
iconsSet: String
Sets the player icons theme. Default: 'font-awesome'
for icons based on the
font-awesome project. You can also opt
for 'material'
for player icons based on Google
Material Icons project.
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", "volume": "https://cdn.radiantmediatechs.com/rmp/svg/volume.svg", "volume-half": "https://cdn.radiantmediatechs.com/rmp/svg/volume.svg", "volume-off": "https://cdn.radiantmediatechs.com/rmp/svg/volume-off.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" } }
<!-- Include Radiant Media Player JavaScript file in your <body> or <head> --> <script src="https://cdn.radiantmediatechs.com/rmp/10.1.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, 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'); // Initialization ... and done! async function initRmpPlayer() { try { await rmp.init(settings); } catch(error) { console.error('Radiant Media Player failed to initialize', error); } } initRmpPlayer(); </script>
iconSpinner: String
Player spinner is displayed when the player is in waiting mode. For example player will enter waiting mode
when it needs to fetch content from a server but that content has become unavailable due to network outage or
congestion. You can choose between 2 player spinners: 'classic' for a classic circling spinner and 'rmp' for a
more modern spinner. Default: 'classic'
. See src/less/import-less/spinner/spinner.less in
self-hosted package for CSS
specific to player spinners.
Radiant Media Player CSS and fonts are inlined in player JavaScript library file (as such there is no
separated CSS or icons files). This allows for faster styling and printing of player on page load and better
SEO. We are providing with our self-hosted
package the complete player CSS as Less files for reference
(see src/less
folder - these Less files can be used as a reference to customise player skins).
You can modify the player CSS by overriding the default CSS values found in those Less files - see below for
an example. Below is a break
down of Less files you will find in our self-hosted package.
Additionally the player also inlines its icons and font:
Since player CSS is appended dynamically to page you will have to use CSS specificity to enable overriding of default values. This is done by targeting the player container id (#rmp in this case):
#rmp .rmp-button { outline: dashed red; }
Radiant Media Player v10 is built with CSS Flexbox. This allows for a cross-device progressive, responsive design.
For example below are the default order for player icons within the control bar:
.rmp-play-pause { order: 1; } .rmp-related-skip-next { order: 2; } .rmp-quick { order: 3; } .rmp-quick-both { order: 4; } .rmp-volume { order: 5; } .rmp-volume-bar { order: 6; } .rmp-time { order: 7; } .rmp-seek-bar { order: 8; } .rmp-captions-ui .rmp-captions { order: 9; } .rmp-audio-ui .rmp-audio { order: 10; } .rmp-quality { order: 11; } .rmp-fullscreen { order: 12; }
If I wanted to swap the play/pause icon with the fullscreen icon this is the CSS that would need to be added:
#rmp .rmp-play-pause { order: 12; } #rmp .rmp-fullscreen { order: 1; }
The following CSS classes are set on player container (div
with
.rmp-container
class that will also have the id the player is initialized with) based on player
settings or modes. Example:
<div id="rmp" class="rmp-container rmp-color-button rmp-chrome rmp-s1 rmp-font-awesome rmp-medium" tabindex="0" role="application" aria-label="Welcome to Radiant Media Player!">...</div>
.rmp-chrome
: when player controls are visible.rmp-no-chrome
: when player controls are not visible.rmp-fullscreen-on
: when fullscreen is engaged.rmp-fullscreen-ipad-os
: when fullscreen is engaged on iPadOS player container has this class
on.rmp-full-window-on
: when full window mode is engaged (no native fullscreen support - iOS for
360° video for example).rmp-live
: when player is in live mode.rmp-dvr
: when player is in DVR mode.rmp-dvr-vod
: when player is playing DVR recorded content (e.g. not at live edge).rmp-dvr-live
: when player is playing DVR live content (e.g. not recorded).rmp-mobile
: when player is rendered on mobile devices (iOS, iPadOS or Android).rmp-audio-only
: when player is in audio-only mode.rmp-audio-only-use-video-layout
: when player displays audio-only content with our video
player.rmp-pip-on
: when player is engaged in PiP mode.rmp-linear-ad-ui
: when player is displaying a linear video ad.rmp-ad-no-ui
: when player is displaying a linear video ad but the ad UI is not shown
(typically some VPAID or SIMID ads that have their own UI).rmp-quick
: when quick rewind OR fast forward is available.rmp-quick-both
: when quick rewind AND fast forward is available.rmp-focus
: when player is interacted with a keyboard.rmp-error-ui
: when player is in error mode.rmp-playlist-audio-only
: when player is in audio-only playlist mode.rmp-related-audio-only
: when player is in audio-only related mode.rmp-s1
: when player is displayed with the s1 skin.rmp-s2
: when player is displaying with the s2 skin.rmp-tv
: when player is displayed with the TV skin.rmp-outstream
: when player is displaying outstream video ads.rmp-font-awesome
: when player is using the font-awesome icons kit.rmp-font-material
: when player is using the material icons kit.rmp-360-ui
: when player is showing the 360° UI.rmp-casting
: when Google Cast casting is engaged.rmp-airplay-engaged-ui
: when player is AirPlay casting.rmp-title-ui
: when player is showing a contentMetadata.title.rmp-title-description-ui
: when player is showing a contentMetadata.title and a a
contentMetadata.description.rmp-module-open-ui
: when player is showing an open module overlay UIWhen 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-xs
: when playerWidth is playerWidth < 320px.rmp-sm
: when playerWidth >= 320px && playerWidth < 480px.rmp-md
: when playerWidth >= 480px && playerWidth < 640px.rmp-lg
: when playerWidth >= 640px && playerWidth < 1024px.rmp-xl
: when playerWidth >= 1024pxEventually 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, seekTo ...).
©2015-2025 Radiant Media Player. All Rights Reserved.