Logo Inclusion

The logo setting

You can brand your player with a custom logo using the following player setting:

logo: Logo Object

The logo Object has the following properties:

• imgUri: String (default: '') - URI to logo image (logo image formats should be PNG, JPEG, AVIF or GIF)
• clickUri: String (default: '') - URI to open when the logo is interacted with
• position: String (default: 'topleft') - Sets the logo position within the player. 4 values are available: 'topleft', 'bottomleft', 'topright', 'bottomright'
• margin: String (default: '8px') - Margin around the logo
• watermark: Boolean (default: false) - If set to true, the logo will not auto-hide with the control bar and will act as a watermark image
• pauseContentOnLogoClick: Boolean (default: false) - Sets the behaviour when logo is is interacted with - by default when the logo is interacted with the player will pause content

Player code example - see this example here

<script src="https://cdn.radiantmediatechs.com/rmp/10.4.1/js/rmp.min.js"></script>
<div id="rmp"></div>
<script>
  const src = {
    hls: 'https://your-hls-url.m3u8'
  };
  const settings = {
    licenseKey: 'your-license-key',
    src,
    width: 640,
    height: 360,
    contentMetadata: {
      poster: [
        'https://your-poster-url.jpg'
      ]
    },
    // Logo settings
    logo: {
      imgUri: 'https://www.radiantmediaplayer.com/images/radiantmediaplayer-logo-300.png',
      clickUri: 'https://www.radiantmediaplayer.com',
      position: 'topleft',
      margin: '8px',
      watermark: false,
      pauseContentOnLogoClick: true
    }
  };
  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>

Logo API getter|setter

logoConfiguration getter (Logo Object)

const logoConfiguration = rmp.logoConfiguration;

This getter returns n Logo Object with the current player logo information. Logo Object is as follows:

{
  imgUri: 'https://www.radiantmediaplayer.com/images/radiantmediaplayer-logo-300.png',
  clickUri: 'https://www.radiantmediaplayer.com',
  position: 'topleft',
  margin: '8px',
  watermark: false,
  pauseContentOnLogoClick: true
}

logoConfiguration setter (Logo Object)

rmp.logoConfiguration = {
  imgUri: 'https://www.radiantmediaplayer.com/images/radiantmediaplayer-logo-300.png',
  clickUri: 'https://www.radiantmediaplayer.com',
  position: 'topleft',
  margin: '8px',
  watermark: false,
  pauseContentOnLogoClick: true
};

When called this setter will update the player logo data.

To unset logo you can use logoConfiguration setter with default logo value.

Logo API event

logoclick

This event fires when the logo is interacted with.