To ensure that an application is accessible to a broad audience, it is crucial to consider localization, including localization of the player UI. Our UI fully supports localization and can be expanded to accommodate for any required language.

Selecting the language

The UI can be localized before initializing a UIManager. It ships with English, Spanish, and German translations and uses English by default. Additional translations can be added via a LocalizationConfig, where the automatic language detection can also be enabled.

bitmovin.playerui.i18n.setConfig({
  language: 'de'
});

Please note that the LocalizationConfig is a singleton for all UI instances, i.e., it is currently not possible to configure the language per UIManager instance. This is also the reason why the function must be called before creating a UIManager instance for the configuration to be applied as expected.

Adding a new language

If you want to add your vocabulary for your language, you can easily add support for it by providing your own localized strings.

🫶

We welcome contributions to our UI.

If you are adding support for a new locale, we appreciate if you contribute the language back to our UI.

Our UI does not rely on any third-party localization framework but follows industry standard patterns for localization.

There are two different methods for integrating a custom locale into our user interface:

• Dynamically adding a new language
• Extending our UI and directly integrating a new language

Dynamically using the global i18n object

It is possible to dynamically introduce a new language without the necessity of creating a custom UI. By passing a LocalizationConfig containing the relevant vocabulary to the i18n.setConfig function, the language becomes accessible for use.

📘

You can find the current vocabulary in the API doc.

Checkout this example which introduces a pirate slang, generated using AI:

Statically by adding it to our UI

To establish a more long-lasting solution, it is recommended to fork our UI repository and integrate the vocabulary into the UI in the form of a JSON file. This method is preferred for making permanent additions to languages or for contributing them back to our community.

Localizing text

To easily localize text displayed in the UI, we implemented a LocalizableText interface, which accepts a localizing function or a static string. The process involves simply invoking the i18n.getLocalizer function with the corresponding text key. If the text is not found, the system will use the key as a fallback. This method can be utilized, for example, during the initialization of a Label or Button component.

new Label({
  text: i18n.getLocalizer('key')
});

Check out Build a custom UI structure for more details on how to customize individual components.