# media-text

HTML custom element that renders a translated string by semantic key

## Import

```ts
import "@videojs/html/i18n";
```

One import registers both `<media-i18n>` and `<media-text>`.

`<media-text>` renders a translated value inside a [`<media-i18n>`](./media-i18n.md) (or any ancestor with the i18n provider mixin). Set `token` to the semantic translation key and use the text content as its English fallback. Use it for authored component content, standalone labels, tooltips, or demos.

```html
<media-i18n lang="ja">
  <media-text token="buttons.play">Play</media-text>
</media-i18n>
```

## Token and fallback

The `token` attribute accepts an opaque key such as `buttons.play`. The initial text content is the fallback shown when the active locale has no value for that key. See [Translation phrases](./translation-phrases.md) for the supported keys and English defaults.

Without `token`, `<media-text>` keeps its text content unchanged. This is useful for literal copy that should not be translated.

Parametric translations are not yet supported on `<media-text>`. Use `createTranslator` in script for interpolated strings.