Radiant Media Player

Custom player icons



Getting new font-icons for Radiant Media Player

HTML5

One easy way to gain access to new font-icons is to obtain them from the IcoMoon online application. This is just an example of an online resource that can be used to get player icons. Material Icons and Font Awesome are 2 libraries with nice and well-formatted icons that can be used with Radiant Media Player.

For the purpose of this article we will select 2 icons from the Material Icons library: repeat and settings. Once selected we download our generated files. Our example font can be downloaded here.

Adding or modifying custom player icons is only available with Radiant Media Player in its HTML5 rendition. For Flash you can use pre-built skins and skin colorization to tune your skins.

When tuning the player CSS you must self-host the player files or use a specific version of the cloud player - example for current version:

https://cdn.radiantmediatechs.com/rmp/3.10.14/js/rmp.min.js

Adding a player icon

In this section we will review how to add an icon to the player skin within the control bar. In order to do so we will walk through an example: adding a loop icon to the player and tying this loop icon to the player API setLoop method.

Once we have our font-icon we need to add it to import it with CSS.

@font-face { 
  font-family: 'custom-icon';
  src: url('/css/fonts/icomoon.eot?v0dbhw');
  src: url('/css/fonts/icomoon.eot?v0dbhw#iefix') format('embedded-opentype'), 
    url('/css/fonts/icomoon.ttf?v0dbhw') format('truetype'), 
    url('/css/fonts/icomoon.woff?v0dbhw') format('woff'), 
    url('/css/fonts/icomoon.svg?v0dbhw#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}
.rmp-i-loop:before {
  font-family: 'custom-icon';
  content: '\e040';
}

Now that our font is imported we can add CSS to place our loop icon. We will also need to account for smaller player sizes (.rmp-xs, .rmp-nano). We will add with JavaScript a custom class .rmp-custom-icon to our player container to add specificity to our CSS for better targeting (this is to avoid CSS hacks like !important).

.rmp-custom-icon .rmp-i-loop {
  position: absolute;
  top: 0;
  left: 22%;
  width: 6%;
  height: 100%;
  cursor: pointer;
  font-size: 22px;
  line-height: 38px;
  color: #FFFFFF;
}
/* We need to move the player seek-bar because the loop icon will be placed just before */
.rmp-custom-icon .rmp-seek-bar,
.rmp-xs.rmp-custom-icon .rmp-seek-bar {
  left: 30%;
  width: 40%;
}
/* .rmp-xs for player size < 480px and >= 375px */
.rmp-xs.rmp-custom-icon .rmp-i-loop {
  left: 18%;
}
/* .rmp-nano for player size < 375px - we hide the icon here */
.rmp-nano.rmp-custom-icon .rmp-i-loop {
  display: none;
}

We can get started with our player set up once the above CSS is present on our page.

<!-- Include Radiant Media Player JavaScript file in your <body> or <head> -->
<script src="https://cdn.radiantmediatechs.com/rmp/3.10.14/js/rmp.min.js"></script>
<!-- Set up your wrapper div with its unique id -->
<div id="rmpPlayer"></div>
<!-- Set up player configuration options -->
<script>
// First we specify bitrates and settings to feed to the player
var bitrates = {
  hls: 'https://streamingrmp-1479.kxcdn.com/vod/smil:bbb.smil/playlist.m3u8'
};
var settings = {
  licenseKey: 'your-license-key',
  bitrates: bitrates,
  delayToFade: 3000,
  width: 640,
  height: 360,
  poster: 'https://www.radiantmediaplayer.com/images/poster-rmp-showcase.jpg'
};
var elementID = 'rmpPlayer';
var rmp = new RadiantMP(elementID);
// Reference to the player container
var rmpContainer = document.getElementById(elementID);
var loopEnabled = false;
var loopIcon;
// When the loop icon is interacted with we enforce the loop policy
function loopInteraction(event) {
  if (event) {
    event.stopPropagation();
    if (event.type === 'touchend') {
      event.preventDefault();
    }
  }
  if (loopEnabled) {
    loopEnabled = false;
    rmp.setLoop(false);
    loopIcon.style.color = '#FFFFFF';
  } else {
    loopEnabled = true;
    rmp.setLoop(true);
    loopIcon.style.color = '#2196F3';
  }
}
rmpContainer.addEventListener('ready', function() {
  // When player is ready we add our icon
  rmp.fw.addClass(rmpContainer, 'rmp-custom-icon');
  loopIcon = document.createElement('div');
  loopIcon.className = 'rmp-i rmp-i-loop';
  // Our listener when the loop icon is interacted with
  // We use the setLoop method from the player API
  loopIcon.addEventListener('touchend', loopInteraction);
  loopIcon.addEventListener('click', loopInteraction);
  // The player control bar - we append to loop icon to it
  var controlBar = rmpContainer.getElementsByClassName('rmp-outline')[0];
  if (controlBar) {
    controlBar.appendChild(loopIcon);
  }
});
rmp.init(settings);
</script>

Now we can enjoy the result:


Modifying a player icon

In this section we will review how to modify an existing player icon. We will use an example: replacing the HD player icon used to select bitrates (when available).

This section reviews how to override a player icon. You may also directly modify the player CSS (rmp-s*.css) or Less CSS files from the self-hosted player files.

Once we have our font we need to import it with CSS.

@font-face { 
  font-family: 'custom-icon';
  src: url('/css/fonts/icomoon.eot?v0dbhw');
  src: url('/css/fonts/icomoon.eot?v0dbhw#iefix') format('embedded-opentype'), 
    url('/css/fonts/icomoon.ttf?v0dbhw') format('truetype'), 
    url('/css/fonts/icomoon.woff?v0dbhw') format('woff'), 
    url('/css/fonts/icomoon.svg?v0dbhw#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* our new icon - .rmp-custom-icon-2 is used for specificity*/
.rmp-custom-icon-2 .rmp-i-streams:before {
  font-family: 'custom-icon';
  content: '\e8b8';
}
/* we set our new icon size */
.rmp-custom-icon-2 .rmp-hd .rmp-i-streams {
  font-size: 24px;
}

We can get started with our player set up once the above CSS is present on our page.

<!-- Include Radiant Media Player JavaScript file in your <body> or <head> -->
<script src="https://cdn.radiantmediatechs.com/rmp/3.10.14/js/rmp.min.js"></script>
<!-- Set up your wrapper div with its unique id -->
<div id="rmpPlayer"></div>
<!-- Set up player configuration options -->
<script>
// First we specify bitrates and settings to feed to the player
var bitrates = {
  hls: 'https://streamingrmp-1479.kxcdn.com/vod/smil:bbb.smil/playlist.m3u8'
};
var settings = {
  licenseKey: 'your-license-key',
  bitrates: bitrates,
  delayToFade: 3000,
  width: 640,
  height: 360,
  poster: 'https://www.radiantmediaplayer.com/images/poster-rmp-showcase.jpg'
};
var elementID = 'rmpPlayer';
var rmp = new RadiantMP(elementID);
// Reference to the player container
var rmpContainer = document.getElementById(elementID);
rmpContainer.addEventListener('ready', function() {
  // When player is ready we add specificity to our player in order for the replaced icons to show
  rmp.fw.addClass(rmpContainer, 'rmp-custom-icon-2');
});
rmp.init(settings);
</script>

Now that we are here we can enjoy the result (click play for the bitrate selector module to show):