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
.
<script src="https://cdn.radiantmediatechs.com/rmp/9.10.0/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>
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: ''
.
logoclick
This event fires when the logo is interacted with.
©2015-2023 Radiant Media Player. All Rights Reserved.