Logo Inclusion

Logo settings

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

logo: String

Path or URL to logo image. Default: '' which implies no logo is wanted on the player. Suggested size for logo: 200px width x 50px height. By default the logo is positioned at the top-left corner of the video to fit in with other player UI elements. You can move it with the logoPosition setting or with CSS (targeting the CSS class .rmp-logo).
Logo image formats should be PNG, JPEG or GIF.

logoLoc: String

URL to open when the custom logo is clicked or touched. If not provided the logo will still be displayed on the player but will not be click-able. Default: ''.

logoPosition: String

This will set the logo position on stage. 4 values are available: 'topleft', 'bottomleft', 'topright', 'bottomright'. Default: 'topleft'.
The logo has a default padding value of 8px. This value can be adjusted with CSS.

logoWatermark: Boolean

If set to true the logo will not auto-hide with the control bar and act as a watermark logo. Default: false.

logoMargin: String

Sets the margin for the logo. You can specify each margin with values like '8px 4px 8px 4px'. Default: '8px'.

pauseContentOnLogoClick: Boolean

Sets the behaviour when logo is clicked. By default when the logo is interacted with the player will pause content. This may not always be the wanted behaviour so setting pauseContentOnLogoClick to false will prevent the player from pausing content when the logo is interacted with. Default: true.

Player code example - see this example here

<script src="https://cdn.radiantmediatechs.com/rmp/9.16.6/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: src,
  width: 640,
  height: 360,
  contentMetadata: {
    poster: [
      'https://your-poster-url.jpg'
    ]
  },
  // Logo settings
  logo: 'https://your-logo-url.png',
  logoLoc: 'https://www.radiantmediaplayer.com',
  logoPosition: 'topleft',
  logoWatermark: false
};
const rmp = new RadiantMP('rmp');
rmp.init(settings);
</script>

Logo API methods

getLogo()

rmp.getLogo();

This method returns an Object with the current player logo information. This Object holds two properties. The img property is a String representing the URL to the logo image. The loc property is a String representing the link to open when the logo is interacted with. null is returned if this logo information are not available. Example of returned value when available:

{
  img: 'url-logo-image',
  loc: 'link-to-open-when-logo-is-clicked'
}

setLogo(logo)

rmp.setLogo({
  img: 'url-logo-image',
  loc: 'link-to-open-when-logo-is-clicked'
});

When invoked, this method will update the player logo information. Note that player must be initialised with the logo setting for this method to have affect. Parameter value is an Object holding two properties. The img property is a String representing the new URL to the logo image. The loc property is a String representing the new link to open when the logo is interacted with. To unset logo you can set img: ''.

Logo API event

logoclick

This event fires when the logo is interacted with.