Override translations

Patch individual i18n strings without replacing an entire locale pack

registerI18n merges. Each call adds or replaces phrases for that locale tag without wiping prior registrations. Use this to tweak shipped packs or A/B test copy.

Read Internationalization for merge order and Translation phrases for the supported keys.

Override after a built-in pack

import { registerI18n } from '@videojs/html/i18n';
import '@videojs/html/i18n/locales/es/register';

registerI18n('es', { Play: 'Comenzar' }); // only `Play` changes

Later registrations win for the same phrase. The rest of the es pack stays intact.

React provider overrides

Pass translations on I18nProvider to scope overrides to one subtree. This layer sits above registry and lazy packs:

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

<Provider>
  <I18nProvider locale="es" translations={{ Play: 'Comenzar' }}>
    <VideoSkin>
      <Video src="..." playsInline />
    </VideoSkin>
  </I18nProvider>
</Provider>

Nested providers inherit the parent locale when you only pass translations:

<I18nProvider locale="de">
  <I18nProvider translations={{ Play: 'Override' }}>
    {/* locale stays `de`; only `Play` differs */}
  </I18nProvider>
</I18nProvider>

HTML reflected text

Use <media-text> for static copy outside buttons:

<media-i18n lang="es">
  <media-text>Play</media-text>
</media-i18n>

Override the phrase in the registry or set lang on the provider to a locale where you patched Play.

Parametric phrases

Keep required placeholders when overriding:

// ✅
registerI18n('es', { 'Seek forward {seconds} seconds': 'Adelantar {seconds} segundos' });

// ❌ TypeScript error: missing {seconds}
registerI18n('es', { 'Seek forward {seconds} seconds': 'Adelantar' });

What’s next?

Switch locale dynamically
getI18nTranslations: Inspect the merged map