Localization

Language: EnglishNederlands (Dutch)

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 prop. Use the dropdown below the player to switch between English and Dutch. See also the localization guide.

Code

import { useState } from 'react';
import { DefaultUI, addLocale } from '@theoplayer/react-ui';

const configuration = {
    libraryLocation: '/path/to/theoplayer/',
    license: 'your_theoplayer_license'
};

const source = {
    sources: { src: 'https://cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny.m3u8' },
    metadata: { title: 'Big Buck Bunny' }
};

// Register the Dutch locale. Untranslated messages fall back to the built-in English defaults.
addLocale('nl', {
    playAria: 'afspelen',
    pauseAria: 'pauzeren',
    languageMenuHeading: 'Taal',
    subtitleMenuHeading: 'Ondertitels',
    subtitleOff: 'Uit',
    settingsMenuHeading: 'Instellingen'
    // ...
});

const App = () => {
    const [lang, setLang] = useState('en');
    return (
        <>
            <DefaultUI configuration={configuration} source={source} lang={lang} />
            <select value={lang} onChange={(event) => setLang(event.target.value)}>
                <option value="en">English</option>
                <option value="nl">Nederlands (Dutch)</option>
            </select>
        </>
    );
};

📜 View full source on GitHub