Radiant Media Player

Player labels



Introduction

Radiant Media Player can display text-helpers (called labels) within its UI for viewers to rapidly become familiar with the player functionalities. You can translate or customise those labels through the labels player settings.


Example

The following player is displayed with player labels tuned for French.


Player setup

Player code for the above example:

<script src="https://cdn.radiantmediatechs.com/rmp/v4/latest/js/rmp.min.js"></script>
<!-- Set up your wrapper div with its unique id -->
<div id="rmpPlayer"></div>
<script>
var ccFiles = [
  ['en', 'English', 'https://www.radiantmediaplayer.com/media/cc.vtt'],
  ['fr', 'Français', 'https://www.radiantmediaplayer.com/media/cc-fr.vtt']
];
var bitrates = {
  mp4: [
    'https://d1swr4916zvh4g.cloudfront.net/media/bbb-360p.mp4',
    'https://d1swr4916zvh4g.cloudfront.net/media/bbb-720p.mp4'
  ]
};
// Here goes our labels
var labels = {
  bitrates: {
    renditions: ['Basse qualité', 'Haute qualité']
  },
  hint: {
    sharing: 'Partager',
    quality: 'Qualité',
    speed: 'Vitesse',
    captions: 'Sous-titres',
    cast: 'Caster'
  },
  captions: {
    off: 'Arrêt'
  }
};
// Player settings
var settings = {
  bitrates: bitrates,
  licenseKey: 'your-license-key',
  width: 640,
  height: 360,
  nav: true,
  sharing: true,
  ccFiles: ccFiles,
  labels: labels,
  poster: 'https://www.radiantmediaplayer.com/images/poster-rmp-showcase.jpg'
};
// Create and init player
var elementID = 'rmpPlayer';
var rmp = new RadiantMP(elementID);
rmp.init(settings);
</script>

Available labels and default values

Below is a list of all customisable player labels:

labels: {
  bitrates: {
    auto: 'Auto',
    renditions: ['Low', 'Med', 'High']
  },
  hint: {
    sharing: 'Share',
    quality: 'Quality',
    speed: 'Speed',
    captions: 'Captions',
    audio: 'Audio',
    live: 'Live',
    cast: 'Cast',
    playlist: 'Playlist',
    related: 'Related',
    upNext: 'Up Next'
  },
  captions: {
    off: 'Off'
  },
  error: {
    customErrorMessage: 'This content is currently unavailable.',
    noSupportMessage: 'No playback support.',
    noSupportDownload: 'You may download video here.',
    noSupportInstallChrome: 'Using the latest version of Google Chrome may help to view this content.'
  },
  ads: {
    controlBarCustomMessage: 'Ad'
  }
}

The above example should be self-explanatory as to what is each label is meant for.


Hiding external player labels

If you do not want player external player labels (those are hint.sharing, hint.quality, hint.speed, hint.captions, hint.audio, hint.cast, hint.related) to be shown within the player you can hide them with the hideExternalPlayerLabels player setting set to true. This setting must be Boolean either true or false. false is the default.


Support notes

The bitrates.renditions label only applies for MP4 and WebM progressive download. For HLS or DASH renditions information (height and bitrate) are automatically displayed instead. You can tune the auto label for HLS or DASH with bitrates.auto.

Labels are set using the JavaScript textContent property. Take this into account when using special characters.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License.