Floating feature

Scope of support

With Radiant Media Player 9.2.0 we have built-in support for float on scroll feature. This feature keeps the player visible when the original player location is scrolled out of view by minimizing it to a corner of the screen. A close button within the player allows viewer to dismiss the floating player upon user interaction.

Player settings

floating: Boolean

Enables floating feature in the player. Default: false.

floatingThreshold: Number

Sets the threshold point for floating/unfloating of player. Value of 0 means the anchored player has to be completely scrolled out of view, before the floating player appears. Value of 1 means the anchored player will enter floating player as soon as it begins to become out of view. Default: 0.5.

Player API methods

getFloating()

rmp.getFloating();

Returns Boolean the current floating status of the player.

setFloating(float)

rmp.setFloating(true);

This method expects a Boolean input and will set the player floating status to floating (true) or anchored (false)

Player API events

floating

This event fires when player floating status changes to floating.

unfloating

This event fires when player floating status changes to anchored.

Player code example - see this example here

<!-- Include Radiant Media Player - here we use the optimised build for hls.js -->
<script src="https://cdn.radiantmediatechs.com/rmp/9.3.0/js/rmp-hlsjs.min.js"></script>
<!-- !!! Player anchor element -->
<div id="rmp-anchor-element">
  <!-- Player container element, child of anchor element -->
  <div id="rmp"></div>
</div>
<!-- Set up player configuration options -->
<script>
  // HLS streaming source
  const src = {
    hls: 'https://your-live-hls-url.m3u8'
  };
  // Your player settings
  const settings = {
    licenseKey: 'your-license-key',
    src: src,
    width: 640,
    height: 360,
    floating: true,
    contentMetadata: {
      poster: [
        'https://your-poster-url.jpg'
      ]
    }
  };
  const elementID = 'rmp';
  const rmp = new RadiantMP(elementID);
  rmp.init(settings);
</script>

Customizing floating player sizes

The floating player (when detached from its anchor) uses default sizing values. Those values can be overridden with CSS and can be found in floating.less file in our self-hosted package. Those values are also presented below:

.rmp-container.rmp-detach {
  width: 240px !important;
  height: 135px !important;
  position: fixed;
  bottom: 8px;
  right: 8px;
  z-index: 999999;
  box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.3);
}
      
@media (min-width: 400px) {
  .rmp-container.rmp-detach {
    width: 320px !important;
    height: 180px !important;
  }
}
      
@media (min-width: 576px) {
  .rmp-container.rmp-detach {
    width: 480px !important;
    height: 270px !important;
  }
}