mirror of
https://github.com/zoriya/v10.git
synced 2026-08-16 02:45:09 +00:00
docs(site): rename media i18n element
This commit is contained in:
Sam Potts
@@ -74,7 +74,7 @@ Import from `@videojs/html/i18n` or `@videojs/react/i18n` depending on your fram
|
||||
- `<video-player>`, `<audio-player>`, and skins include an i18n provider mixin.
|
||||
- Set `<html lang="es">` (or `lang` on an ancestor) and ship/register Spanish strings.
|
||||
|
||||
Use <DocsLink slug="reference/media-i18n-provider">`<media-i18n-provider>`</DocsLink> when you render **standalone** controls outside a player, or when one page hosts players in different languages.
|
||||
Use <DocsLink slug="reference/media-i18n">`<media-i18n>`</DocsLink> when you render **standalone** controls outside a player, or when one page hosts players in different languages.
|
||||
|
||||
</FrameworkCase>
|
||||
|
||||
@@ -93,7 +93,7 @@ Wrap with an explicit <DocsLink slug="reference/i18n-provider">`I18nProvider`</D
|
||||
|
||||
Providers resolve the active locale in order:
|
||||
|
||||
1. **Explicit**: `lang` on <DocsLink slug="reference/media-i18n-provider">`<media-i18n-provider>`</DocsLink> or `locale` on <DocsLink slug="reference/i18n-provider">`I18nProvider`</DocsLink>
|
||||
1. **Explicit**: `lang` on <DocsLink slug="reference/media-i18n">`<media-i18n>`</DocsLink> or `locale` on <DocsLink slug="reference/i18n-provider">`I18nProvider`</DocsLink>
|
||||
2. **Ambient**: nearest ancestor `[lang]` (HTML) or `langRootRef` / `<html lang>` (React)
|
||||
3. **Fallback**: English defaults
|
||||
|
||||
|
||||
@@ -58,9 +58,9 @@ Nested providers inherit the parent locale when you only pass `translations`:
|
||||
Use <DocsLink slug="reference/media-text">`<media-text>`</DocsLink> for static copy outside buttons:
|
||||
|
||||
```html
|
||||
<media-i18n-provider lang="es">
|
||||
<media-i18n lang="es">
|
||||
<media-text key="Play"></media-text>
|
||||
</media-i18n-provider>
|
||||
</media-i18n>
|
||||
```
|
||||
|
||||
Override the phrase in the registry or set `lang` on the provider to a locale where you patched `Play`.
|
||||
|
||||
@@ -80,7 +80,7 @@ Match your app's locale negotiation. Video.js does not replace framework i18n; i
|
||||
|
||||
## HTML custom elements
|
||||
|
||||
SSR HTML players should emit `lang` on `<html>` or on <DocsLink slug="reference/media-i18n-provider">`<media-i18n-provider>`</DocsLink>. Register packs in the entry module loaded before custom elements upgrade:
|
||||
SSR HTML players should emit `lang` on `<html>` or on <DocsLink slug="reference/media-i18n">`<media-i18n>`</DocsLink>. Register packs in the entry module loaded before custom elements upgrade:
|
||||
|
||||
```ts
|
||||
import '@videojs/html/video';
|
||||
|
||||
@@ -22,7 +22,7 @@ document.documentElement.lang = 'fr';
|
||||
```
|
||||
|
||||
<Aside type="note">
|
||||
Ambient switching only applies when no provider sets an explicit locale. React `I18nProvider locale={…}`, HTML `<media-i18n-provider lang="…">`, and `element.lang` on a provider all override `<html lang>` until you remove or update that override.
|
||||
Ambient switching only applies when no provider sets an explicit locale. React `I18nProvider locale={…}`, HTML `<media-i18n lang="…">`, and `element.lang` on a provider all override `<html lang>` until you remove or update that override.
|
||||
</Aside>
|
||||
|
||||
<FrameworkCase frameworks={["html"]}>
|
||||
@@ -73,9 +73,9 @@ Changing `locale` triggers lazy `loadLocale` for built-in packs.
|
||||
<FrameworkCase frameworks={["html"]}>
|
||||
|
||||
```html
|
||||
<media-i18n-provider lang="es" id="provider">
|
||||
<media-i18n lang="es" id="provider">
|
||||
<video-player>...</video-player>
|
||||
</media-i18n-provider>
|
||||
</media-i18n>
|
||||
|
||||
<script type="module">
|
||||
document.querySelector('#lang-picker').addEventListener('change', (e) => {
|
||||
@@ -126,9 +126,9 @@ registerI18n('fr', fr);
|
||||
```
|
||||
|
||||
```html
|
||||
<media-i18n-provider id="provider">
|
||||
<media-i18n id="provider">
|
||||
<video-player>...</video-player>
|
||||
</media-i18n-provider>
|
||||
</media-i18n>
|
||||
|
||||
<script type="module">
|
||||
document.getElementById('provider').lang = 'fr';
|
||||
|
||||
+4
-4
@@ -1,5 +1,5 @@
|
||||
---
|
||||
title: media-i18n-provider
|
||||
title: media-i18n
|
||||
description: HTML custom element that resolves locale and supplies translations to descendants
|
||||
---
|
||||
|
||||
@@ -8,7 +8,7 @@ import FrameworkCase from "@/components/docs/FrameworkCase.astro";
|
||||
|
||||
<FrameworkCase frameworks={["html"]}>
|
||||
|
||||
`<media-i18n-provider>` applies the i18n provider mixin to a standalone subtree. Built-in `<video-player>` and skins already include this mixin — use the element when rendering **controls outside a player** or when sibling players need different locales.
|
||||
`<media-i18n>` applies the i18n provider mixin to a standalone subtree. Built-in `<video-player>` and skins already include this mixin — use the element when rendering **controls outside a player** or when sibling players need different locales.
|
||||
|
||||
Register locale strings with <DocsLink slug="reference/register-i18n">`registerI18n`</DocsLink>, then set `lang` on the provider or an ancestor. See <DocsLink slug="concepts/i18n">Internationalization</DocsLink> for phrase keys and fallback behavior.
|
||||
|
||||
@@ -21,9 +21,9 @@ Register locale strings with <DocsLink slug="reference/register-i18n">`registerI
|
||||
registerI18n('es', es);
|
||||
</script>
|
||||
|
||||
<media-i18n-provider lang="es">
|
||||
<media-i18n lang="es">
|
||||
<media-text key="Play"></media-text>
|
||||
</media-i18n-provider>
|
||||
</media-i18n>
|
||||
```
|
||||
|
||||
## Attributes
|
||||
@@ -8,12 +8,12 @@ import FrameworkCase from "@/components/docs/FrameworkCase.astro";
|
||||
|
||||
<FrameworkCase frameworks={["html"]}>
|
||||
|
||||
`<media-text>` renders the translated value for a registry phrase inside a <DocsLink slug="reference/media-i18n-provider">`<media-i18n-provider>`</DocsLink> (or any ancestor with the i18n provider mixin). Use it for standalone labels, tooltips, or demos — skin controls resolve phrases internally.
|
||||
`<media-text>` renders the translated value for a registry phrase inside a <DocsLink slug="reference/media-i18n">`<media-i18n>`</DocsLink> (or any ancestor with the i18n provider mixin). Use it for standalone labels, tooltips, or demos — skin controls resolve phrases internally.
|
||||
|
||||
```html
|
||||
<media-i18n-provider lang="ja">
|
||||
<media-i18n lang="ja">
|
||||
<media-text key="Play"></media-text>
|
||||
</media-i18n-provider>
|
||||
</media-i18n>
|
||||
```
|
||||
|
||||
## Attributes
|
||||
|
||||
@@ -148,7 +148,7 @@ export const sidebar: Sidebar = [
|
||||
frameworks: ['html'],
|
||||
contents: [
|
||||
{ slug: 'reference/html-create-player', sidebarLabel: 'createPlayer' },
|
||||
{ slug: 'reference/media-i18n-provider', sidebarLabel: 'media-i18n-provider' },
|
||||
{ slug: 'reference/media-i18n', sidebarLabel: 'media-i18n' },
|
||||
{ slug: 'reference/media-text', sidebarLabel: 'media-text' },
|
||||
{ slug: 'reference/player-controller' },
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user