Localization

The tutorial will cover the following topics:

  • Setting up a language.

  • Extending available languages.

  • Available localized strings.

All of the text that appears in the player’s UI is localized.

1. Setting up a language.

The player provides three language sets: English, Spanish, and French. By default, the player will use the browser’s language setting to determine which strings to display, but this can be overridden by passing a language value in the config (using ISO 639-1 language codes):

var config = {
	language: "es"
};

If the player can not find a matching language set or a specific message string, it will default to the English language set. This too, can be overridden in the config:

var config = {
	defaults: {
		language: "es"
	}
};

2. Extending available languages.

Additional language sets, as well as overrides to existing language sets, can be provided using the config’s locales property:

// override an existing message string
var config = {
	locales: {
		en: {
			MSG_STREAM_NOT_FOUND: "Sorry, we couldn't find the stream you requested"
		}
	}
};
//Provide an additional language set
var config = {
	locales: {
		pt: {
			MSG_STREAM_NOT_FOUND: "Erro de Vídeo"
		}
	}
};

The locales object can also be used to provide region-specific overrides/language sets BCP 47

// provide country-specific overrides
var config = {
	locales: {
		"en-US": {
			MSG_OPTION_FONT_COLOR: "Font Color"
		},
		"en-GB": {
			MSG_OPTION_FONT_COLOR: "Font Colour"
		}
	}
};

3. Available localized strings

A complete list of available message keys can be found by querying the player’s l10n property:

console.log(amp.l10n);
{
  AD: "Ad",
  CASUAL: "Casual",
  CHI: "Chinese",
  CLOSED_CAPTIONING: "Closed Captioning",
  COLOR_BLACK: "Black",
  COLOR_BLUE: "Blue",
  COLOR_CYAN: "Cyan",
  COLOR_GREEN: "Green",
  COLOR_MAGENTA: "Magenta",
  COLOR_RED: "Red",
  COLOR_WHITE: "White",
  COLOR_YELLOW: "Yellow",
  CURRENT: "Current",
  CURSIVE: "Cursive",
  DE: "German",
  DEU: "German",
  EDGE_DEPRESSED: "Depressed",
  EDGE_LEFT_SHADOW: "Left Drop Shadow",
  EDGE_NONE: "None",
  EDGE_RAISED: "Raised",
  EDGE_RIGHT_SHADOW: "Right Drop Shadow",
  EDGE_UNIFORM: "Uniform",
  EN: "English",
  ENG: "English",
  ENTER_FULLSCREEN: "Toggle Fullscreen Mode",
  ERROR: "Error",
  ERROR_ABORTED: "Media Aborted",
  ERROR_DECODE: "Decode Error",
  ERROR_DEFAULT: "An error has occurred",
  ERROR_NETWORK: "Network Error",
  ERROR_SRC: "Source not supported",
  ES: "Spanish",
  EXIT_FULLSCREEN: "Exit Fullscreen Mode",
  FR: "French",
  FRA: "French",
  FRE: "French",
  FULLSCREEN: "Fullscreen",
  GER: "German",
  GO_LIVE: "GO LIVE",
  IT: "Italian",
  ITA: "Italian",
  JA: "Japanese",
  JPN: "Japanese",
  JUMP_AHEAD: "Jump Ahead",
  JUMP_BACK: "Jump Back",
  KO: "Korean",
  KOR: "Korean",
  LIVE: "LIVE",
  MONOSPACED_SANS_SERIF: "Monospaced Sans-Serif",
  MONOSPACED_SERIF: "Monospaced Serif",
  MUTE: "Mute",
  OF: "of",
  OPTION_BACKGROUND_COLOR: "Background Color",
  OPTION_BACKGROUND_OPACITY: "Background Opacity",
  OPTION_EDGE_COLOR: "Edge Color",
  OPTION_EDGE_OPACITY: "Edge Opacity",
  OPTION_EDGE_STYLE: "Character Edge Style",
  OPTION_FONT_COLOR: "Font Color",
  OPTION_FONT_FAMILY: "Font Family",
  OPTION_FONT_OPACITY: "Font Opacity",
  OPTION_FONT_SIZE: "Font Size",
  OPTION_SCROLL_TYPE: "Scroll Type",
  OPTION_WINDOW_COLOR: "Window Color",
  OPTION_WINDOW_OPACITY: "Window Opacity",
  PAUSE: "Pause",
  PLAY: "Play",
  PLAYBACK_RATE: "Playback Rate",
  PREVIEW: "Preview",
  PROPORTIONAL_SANS_SERIF: "Proportional Sans-Serif",
  PROPORTIONAL_SERIF: "Proportional Serif",
  QUALITY_AUTO: "Auto",
  REPLAY: "Replay",
  REWIND: "Rewind",
  RU: "Russian",
  RUS: "Russian",
  SCROLL_PAINTON: "Paint-on",
  SCROLL_POPOUT: "Pop-out",
  SCROLL_ROLLON: "Roll-on",
  SEEK: "Seek",
  SEEK_TO: "Seek to",
  SETTINGS: "Settings",
  SETTINGS_AUDIO: "Audio",
  SETTINGS_AUTOPLAY: "Autoplay",
  SETTINGS_OPTIONS: "Options",
  SETTINGS_QUALITY: "Quality",
  SETTINGS_SPEED: "Speed",
  SETTINGS_SUBTITLES: "Subtitles",
  SHARE: "Share",
  SLIDER: "Slider",
  SMALL_CAPS: "Small Capitals",
  SPA: "Spanish",
  SPEED_NORMAL: "Normal",
  STREAM_NOT_FOUND: "Stream not found",
  TOGGLE_OFF: "Off",
  UNKNOWN: "Unknown",
  UNMUTE: "Unmute",
  VOLUME: "Volume",
  ZH: "Chinese",
  ZHO: "Chinese"
}

The current list of localized text is also available to data bindings:

amp.evaluateBindings("#{l10n.MSG_OF}");

It is sometimes helpful to see which message keys are associated with the player’s on-screen text. To do this provide a falsy value for the config’s language property:

var config = {
	language: ""
};
Last modified: Nov/2023, AMP Support.