Player UI - Localization

by bitmovin_player

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>Bitmovin Player Demo</title>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="text/html; charset=utf-8" />

    <!-- Bitmovin Player -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bitmovin-player@8/bitmovinplayer.js"></script>
    <!-- Bitmovin Player UI JS -->
    <script src='https://cdn.jsdelivr.net/npm/bitmovin-player-ui@4/dist/js/bitmovinplayer-ui.js' type='text/javascript'></script>
    <!-- Bitmovin Player UI CSS -->
    <link href='https://cdn.jsdelivr.net/npm/bitmovin-player-ui@4/dist/css/bitmovinplayer-ui.css' rel='stylesheet'>
  </head>

  <body>
    <div class="player-wrapper">
      <div id="player"></div>
    </div>
  </body>
</html>

CSS

.player-wrapper {
  height: 300px;
  aspect-ratio: 16/9 auto;
  margin: 20px auto;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
}

.marker-buttons {
  text-align: center;
}

JavaScript

var player = new bitmovin.player.Player(document.getElementById('player'), playerConfig());

var localizationConfig = {
  language: 'pir',
  vocabularies: {
    pir: pirateVocabulary(),
  }
};
bitmovin.playerui.i18n.setConfig(localizationConfig);

var uiManager = bitmovin.playerui.UIFactory.buildUI(player);

player.load(sourceConfig());

function pirateVocabulary() {
  return {
    "settings.video.quality": "Spyglass Clarity",
    "settings.audio.quality": "Cannon Boom Quality",
    "settings.audio.track": "Shanty Track",
    "settings.audio.mute": "Silence the Seas",
    "settings.audio.volume": "Raise the Rumble",
    "settings.subtitles.window.color": "Porthole Tint",
    "settings.subtitles.window.opacity": "Porthole Ghostliness",
    "settings.subtitles": "Pirate Chatter",
    "settings.subtitles.font.color": "Ink of the Sea",
    "settings.subtitles.font.opacity": "Faded Ink",
    "settings.subtitles.background.color": "Map Parchment",
    "settings.subtitles.background.opacity": "Parchment Ghostliness",
    "colors.white": "Ghostly White",
    "colors.black": "Black as Midnight",
    "colors.red": "Bloody Crimson",
    "colors.green": "Seaweed Green",
    "colors.blue": "Deep Sea Blue",
    "colors.cyan": "Sky Over the Horizon",
    "colors.yellow": "Golden Doubloon",
    "colors.magenta": "Sunset Purple",
    "percent": "{value}% o' the Plunder",
    "settings.subtitles.font.size": "Letter Height",
    "settings.subtitles.characterEdge": "Letter Edge",
    "settings.subtitles.characterEdge.raised": "Hoisted High",
    "settings.subtitles.characterEdge.depressed": "Sunken Low",
    "settings.subtitles.characterEdge.uniform": "Even Keel",
    "settings.subtitles.characterEdge.dropshadowed": "Shadow o' the Mast",
    "settings.subtitles.font.family": "Letter Clan",
    "settings.subtitles.font.family.monospacedserif": "Monospaced Sea Dog",
    "settings.subtitles.font.family.proportionalserif": "Proportional Sea...