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/9.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: 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>
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",
"off-volume": "https://cdn.radiantmediatechs.com/rmp/svg/off-volume.svg",
"volume": "https://cdn.radiantmediatechs.com/rmp/svg/volume.svg",
"volume-half": "https://cdn.radiantmediatechs.com/rmp/svg/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"
}
}
<!-- Include Radiant Media Player JavaScript file in your <body> or <head> --> <script src="https://cdn.radiantmediatechs.com/rmp/9.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: 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>
With Radiant Media Player 8, all CSS and fonts for the player are now built-in our JavaScript library. This means that independent CSS/font files are no longer available, instead all player CSS/font are inlined with JavaScript. 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 (
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.
contentMetadata.title and
contentMetadata.description settings
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;
}
See below for a list of CSS classes that are container-level classes
All the following 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-native-captions rmp-title-ui rmp-medium rmp-quick-rewind-or-forward-ui" tabindex="0" role="complementary" aria-label="Welcome to Radiant Media Player!" style="width: 960px; height: 540px;">...</div>
.rmp-chrome: when player controls are visible, player container has this class on.rmp-no-chrome: when player controls are not visible, player container has this class on.rmp-fullscreen-on: when fullscreen is engaged, player container has this class on.rmp-fullscreen-ipad-os: when fullscreen is engaged on iPadOS player container has this class on
.rmp-fullscreen-ios: when fullscreen is engaged on iOS, player container has this class on
.rmp-ipad-os: when player is rendered 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), player container has this class on.rmp-live: when player is in live mode, player container has this class on.rmp-dvr: when player is in DVR mode, player container has this class on.rmp-dvr-vod: when player is playing DVR recorded content (e.g. not at live edge), player container has this class on.rmp-dvr-live: when player is playing DVR live content (e.g. not recorded), player container has this class on.rmp-mobile: when player is rendered on mobile devices (iOS, iPadOS or Android), player container has this class on.rmp-cast-ui: when Google Cast is available, player container has this class on.rmp-casting: when Google Cast casting is engaged, player container has this class on.rmp-airplay-ui: when AirPlay is available, player container has this class on.rmp-audio-only: when player is in audio-only mode, player container has this class on.rmp-audio-only-use-video-layout: when player displays audio-only content with our video player, player container has this class on.rmp-pip-on: when player is engaged in PiP mode, player container has this class on.rmp-linear-ad-ui: when player is displaying a linear video ad, player container has this class on.rmp-quick-rewind-or-forward-ui: when quick rewind OR fast forward is available, player container has this class on.rmp-quick-rewind-and-forward-ui: when quick rewind AND fast forward is available, player container has this class on.rmp-error-ui: when player is in error mode, player container has this class on.rmp-playlist-ui: when player is in playlist mode, player container has this class on.rmp-playlist-audio-only: when player is in audio-only playlist mode, player container has this class on.rmp-related-ui: when player is in related mode, player container has this class on.rmp-related-audio-only: when player is in audio-only related mode, player container has this class on.rmp-module-overlay-open: when a player module is open, player container has this class on
.rmp-s1: when player is displayed with the s1 skin, player container has this class on.rmp-s2: when player is displaying with the s2 skin, player container has this class on.rmp-tv: when player is displayed with the TV skin, player container has this class on.rmp-outstream: when player is displaying outstream video ads, player container has this class on.rmp-font-awesome: when player is using the font-awesome icons kit, player container has this class on.rmp-font-material: when player is using the material icons kit, player container has this class on.rmp-360-ui: when player is showing the 360° UI, player container has this class onWhen 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-doubleextrasmall: when playerWidth > 0 && playerWidth < 280, player container has this class on.rmp-extrasmall: when playerWidth >= 280 && playerWidth < 375, player container has this class on.rmp-small: when playerWidth >= 375 && playerWidth < 480, player container has this class on
.rmp-medium: when playerWidth >= 480 && playerWidth < 1024, player container has this class on.rmp-large: when playerWidth >= 1024, player container has this class onEventually 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-2023 Radiant Media Player. All Rights Reserved.