Translator

Translator is the callable returned by createTranslator. It turns current English phrases from core controls into localized copy and interpolates {placeholder} tokens when params are required.

Import

import type { Translator } from '@videojs/html/i18n';

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

Definition

type Translator = <K extends keyof TranslationParams>(
  key: K,
  ...args: TranslationParams[K] extends never ? [] : [params: TranslationParams[K]]
) => string;

• Plain phrases: t('Play')
• Parametric phrases: t('Seek forward {seconds} seconds', { seconds: 10 })

Missing phrases in the active map resolve to the source English ('Play') so partial locale packs stay readable.

Create manually

import { createTranslator, getI18nTranslations } from '@videojs/html/i18n';

const t = createTranslator(getI18nTranslations('pt-BR'), 'pt-BR');
t('Pause');

import { createTranslator, getI18nTranslations } from '@videojs/react/i18n';

const t = createTranslator(getI18nTranslations('pt-BR'), 'pt-BR');
t('Pause');

import { useTranslator } from '@videojs/react/i18n';

function Label() {
  const t = useTranslator();
  return <span>{t('Play')}</span>;
}

Control components resolve phrases from core getLabel() through their framework adapters. You rarely call t() directly unless building custom UI.

Related

• createTranslator
• useTranslator
• TranslationParams
• Translation phrases