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 when your app imports Video.js packages. 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.

Prerequisites

  • A locale tag (BCP 47, e.g. es, pt-BR)
  • A partial translation map keyed by semantic groups and names (buttons.play, buttons.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 = {
  buttons: {
    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?