Skip to content
FrameworkStyle

Register a custom locale

Register translation packs for HTML, React, and CDN players

Video.js is English by default. Built-in packs lazy-load automatically for app bundles; use registerI18n when you have custom strings, need synchronous first paint, or load locales from the CDN.

To opt into another language, mount I18nProvider. Pass its locale prop to force a tag, or omit it to inherit lang.

Read Internationalization first if you are new to phrase keys and the registry.

Prerequisites

  • A locale tag (BCP 47, e.g. es, pt-BR)
  • A partial translation map keyed by current English phrases (Play, Pause, …)

Use a shipped pack synchronously

Built-in packs include side-effect modules that register a language before the player renders: 

import { I18nProvider } from '@videojs/react/i18n';
import '@videojs/react/i18n/locales/es/register';
import { Provider, VideoSkin, Video } from '@videojs/react/video';

export function App() {
  return (
    <Provider>
      <I18nProvider locale="es">
        <VideoSkin>
          <Video src="..." playsInline />
        </VideoSkin>
      </I18nProvider>
    </Provider>
  );
}

Wrap the player subtree with I18nProvider. Omit locale to inherit <html lang="es">.

Register your own pack 

import type { Translations } from '@videojs/react/i18n';

const es = {
  Play: 'Reproducir',
  Pause: 'Pausa',
  Mute: 'Silenciar',
  Unmute: 'Activar sonido',
} satisfies Partial<Translations>;

export default es;
 
import { registerI18n } from '@videojs/react/i18n';
import es from './my-es';

registerI18n('es', es);

All keys are optional. Missing keys follow the locale fallback chain through a built-in pack, browser-translated copy in supported Chrome builds, or English.

What’s next?