Floating feature

Scope of support

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 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

floatingStatus getter|setter (Boolean)

const floatingStatus = rmp.floatingStatus;

rmp.floatingStatus = true;

get|set the current floating status of the player.

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/10.1.4/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>

  const src = {
    hls: 'https://your-live-hls-url.m3u8'
  };
  const settings = {
    licenseKey: 'your-license-key',
    src,
    width: 640,
    height: 360,
    floating: true,
    contentMetadata: {
      poster: [
        'https://your-poster-url.jpg'
      ]
    }
  };

  const elementID = 'rmp';
  const rmp = new RadiantMP(elementID);

  async function initRmpPlayer() {
    try {
      await rmp.init(settings);
    } catch (error) {
      console.error('Radiant Media Player failed to initialize', error);
    }
  }
  initRmpPlayer();

</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;
  }
}