Internationalization

Vime supports multiple languages out of the box, and includes an english translation by default. We can extend the player with new languages and change between them dynamically very easily. The following player properties are part of our i18n kit:

  • language: The current language of the player, preferably an ISO 639-1 code. Changing this will update the i18n property, and the language being set must be available in languages.
  • languages: List of available languages. This is automatically updated based on the keys in translations.
  • translations: A dictionary containing each language as the key, and translation map as the value. We'll discuss how you can extend this below.
  • i18n: The translation map for the current language.

The only properties you will directly set is language and translations, the rest are readonly and updated automatically. Let's first look at how we can create new translations...

tip
  • If you're not using TypeScript then refer to the english translation as a reference on how to create a new translation.
  • Video.js has an awesome collection of languages available for you to use as a reference.
player-lang.ts
// This is exported from all packages (react/vue/svelte/angular).
import { Translation } from '@vime/core';
// Turkish translation.
export const tr: Translation = {
play: 'Oynat',
pause: 'Duraklat',
// ...
randomWord: 'Rastgele kelime',
};
// Russian translation.
export const ru: Translation = {
play: 'Воспроизвести',
pause: 'Приостановить',
// ...
randomWord: 'Cлучайное слово',
};

Once we have our translations ready we can pass them in through the translations property or the extendLanguage method on the player. The difference is that translations will overwrite all existing translations, and extendLanguage will only extend them. Let' see how we can use them...

player.html
<vime-player language="tr">
<!-- ... -->
</vime-player>
<script>
const player = document.querySelector('vime-player');
// Option 1 using the `translations` property.
player.translations = {
tr: {
// ...
},
};
// Option 2 using the `extendLanguage` method.
player.extendLanguage('tr', {
// ...
});
</script>

Now we can simply change the language property and all the text inside the player will update accordingly. If you're creating your own UI components then make sure to not use static text, instead use the i18n property such as {i18n.play} so they can also update when the language changes.