Localization
This sample demonstrates localizing the UI and switching language at runtime. A locale is registered with addLocale, and the language is selected through the lang attribute. Use the dropdown below the player to switch between English and Dutch. See also the localization guide.
Code
<script type="module">
import { addLocale } from '@theoplayer/web-ui';
addLocale('nl', {
playAria: 'afspelen',
pauseAria: 'pauzeren',
languageMenuHeading: 'Taal',
subtitleMenuHeading: 'Ondertitels',
subtitleOff: 'Uit',
settingsMenuHeading: 'Instellingen'
});
</script>
<theoplayer-default-ui
id="ui"
lang="en"
configuration='{"libraryLocation":"/path/to/theoplayer/","license":"your_theoplayer_license"}'
source='{"sources":{"src":"https://cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny.m3u8"}}'
></theoplayer-default-ui>
<select id="lang-select">
<option value="en">English</option>
<option value="nl">Nederlands (Dutch)</option>
</select>
<script>
document.querySelector('#lang-select').addEventListener('change', (event) => {
document.querySelector('#ui').setAttribute('lang', event.target.value);
});
</script>