@videojs/html 10.0.0-rc.3 → 10.0.0-rc.5

package/docs/guides/features.md

@@ -4,6 +4,8 @@ The state and actions each feature adds to the player
 
 Not every player needs to support every use case. To address this, Video.js has a concept of **features** — self-contained units of player functionality. Each one adds state properties and actions to the player. For example, “playback” adds `paused` and `play()`, “volume” adds `volume` and `setVolume()`, and so on.
 
+- [See every feature’s state and actions](../reference/api/player-store.md)
+
 ## Feature bundles and presets
 
 You probably don’t want to hand-pick every feature your player needs. A **feature bundle** groups the features needed for a specific use case into a single array.
@@ -101,7 +103,7 @@ You can also check availability in JS:
 ```ts
 const media = this.#pip.value;
 
-if (media?.pipAvailability !== 'available') {
+if (media?.pictureInPictureAvailability !== 'available') {
   this.hidden = true;
 }
 ```

package/docs/guides/fullscreen.md

@@ -8,7 +8,7 @@ Present the player fullscreen with custom controls intact, and lock screen orien
 
 ## Recommended approach
 
-Add a [`<media-fullscreen-button>`](../reference/components/fullscreen-button.md) inside the player container. It requests fullscreen on the container, so everything inside it — controls, captions, overlays — stays visible in the fullscreen presentation.
+Add a [`<media-fullscreen-button>`](../reference/components/fullscreen-button.md) inside the player container. When element fullscreen is supported, it presents the whole container, including controls, captions, and overlays. On iPhone Safari, it uses the native video presentation instead.
 
 **index.html**
 
@@ -76,13 +76,15 @@ import '@videojs/html/ui/fullscreen-button';
 
 The [fullscreen feature](../reference/api/feature-fullscreen.md) tracks fullscreen state and provides the actions:
 
-- `fullscreen` is `true` while the player is fullscreen, from any path — your button, native controls, or the platform presentation.
+- `isFullscreen` is `true` while the player is fullscreen, from any path — your button, native controls, or the platform presentation.
 - `fullscreenAvailability` is `'available'`, `'unavailable'`, or `'unsupported'`. It starts as `'unavailable'`, then settles to `'available'` or `'unsupported'` when the feature attaches to a media element.
-- `requestFullscreen()`, `exitFullscreen()`, and `toggleFullscreen()` change the presentation. Requests target the player container when the Fullscreen API is available, falling back to the media element’s native presentation otherwise.
+- `requestFullscreen()` and `exitFullscreen()` change the presentation. When the Fullscreen API is available, requests target the player container. Otherwise they fall back to the media element’s native presentation.
 
 Fullscreen and picture-in-picture are exclusive: requesting fullscreen exits an active picture-in-picture presentation first.
 
-Style fullscreen state through the container’s `:fullscreen` pseudo-class, or through the `fullscreen` state in components.
+Style fullscreen state through the container’s `:fullscreen` pseudo-class, the button’s `data-fullscreen` attribute, or `isFullscreen` in player state.
+
+The built-in button hides when `fullscreenAvailability` is not `'available'`. Use the same check for custom controls and handle rejected requests. When the attached media has no supported fullscreen method, the action resolves without changing the presentation.
 
 ## Availability and constraints
 
@@ -97,13 +99,34 @@ Style fullscreen state through the container’s `:fullscreen` pseudo-class, or
 
 Add `orientationLockFeature` to lock screen orientation while the player is fullscreen. It isn’t part of `videoFeatures`, so the preset `<video-player>` doesn’t include it. It locks to `landscape` by default and unlocks on exit.
 
-Compose a player with `orientationLockFeature` in its feature list through [`createPlayer`](../reference/api/html-create-player.md); the prebuilt `<video-player>` element doesn’t include it.
+Register a custom player tag with [`createPlayer`](../reference/api/html-create-player.md):
+
+```html
+<orientation-player>
+  <media-container>
+    <video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" muted playsinline></video>
+    <media-fullscreen-button>Fullscreen</media-fullscreen-button>
+  </media-container>
+</orientation-player>
+<script type="module">
+  import { createPlayer, orientationLockFeature } from '@videojs/html';
+  import { videoFeatures } from '@videojs/html/video';
+  import '@videojs/html/ui/container';
+  import '@videojs/html/ui/fullscreen-button';
+
+  const { PlayerElement } = createPlayer({
+    features: [...videoFeatures, orientationLockFeature],
+  });
+
+  customElements.define('orientation-player', PlayerElement);
+</script>
+```
 
 To lock to something other than `landscape`, set the `orientation-lock-type` attribute on the player. See the [orientation lock feature](../reference/api/feature-orientation-lock.md) reference for details.
 
 ### Double-click to toggle
 
-Use the `<media-gesture>` element — the default skins ship this exact binding. Keep the button as the accessible path; gestures are a pointer-only shortcut.
+Use the `<media-gesture>` element — the packaged skins ship this exact binding. Keep the button as the accessible path; gestures are a pointer-only shortcut.
 
 ```html
 <media-gesture type="doubletap" action="toggleFullscreen" region="center"></media-gesture>
@@ -112,13 +135,17 @@ Use the `<media-gesture>` element — the default skins ship this exact binding.
 </script>
 ```
 
-`region="center"` keeps the gesture off the left and right thirds, which the default skins reserve for double-tap seeking. See [Add keyboard shortcuts and gestures](./keyboard-shortcuts.md) for the full gesture surface.
+With left, center, and right double-tap bindings for the same pointer type, `region="center"` covers the middle third, as in the on-demand video skins. A center-only double-tap binding covers the whole surface. See [Add keyboard shortcuts and gestures](./keyboard-shortcuts.md) for region behavior.
 
 ## Troubleshooting
 
+### The fullscreen button doesn’t render
+
+The button hides while `fullscreenAvailability` is `'unavailable'` or `'unsupported'`. Wait for media attachment, check browser support, and confirm that an embedding iframe permits fullscreen with `allow="fullscreen"`.
+
 ### The fullscreen request is rejected
 
-The request didn’t come from a user gesture, fullscreen is unsupported, or an embedding iframe lacks `allow="fullscreen"`.
+Call the action directly from a click handler and check that an embedding iframe permits fullscreen with `allow="fullscreen"`. Handle the returned promise’s rejection. To detect unsupported fullscreen, check `fullscreenAvailability`; an unsupported request can resolve without entering fullscreen.
 
 ### Custom controls disappear in fullscreen on iPhone
 

package/docs/guides/installation-cdn.md

@@ -10,14 +10,14 @@ Video.js can run directly from browser-ready files on jsDelivr. This HTML-only p
 
 > **Tip: Coming from another player?**
 >
-> Follow the migration guide for [Video.js 8](./migrate-from-video-js-8.md), [Mux Player](./migrate-from-mux-player.md), [Plyr](./migrate-from-plyr.md), or [Media Chrome](./migrate-from-media-chrome.md). Each maps your existing setup onto Video.js v10 instead of starting from scratch.
+> Follow the migration guide for [Video.js 8](./migrate-from-video-js-8.md), [Mux Player](./migrate-from-mux-player.md), [Plyr](./migrate-from-plyr.md), [Media Chrome](./migrate-from-media-chrome.md), or [Vidstack](./migrate-from-vidstack.md). Each maps your existing setup onto Video.js v10 instead of starting from scratch.
 
 ## AI Quickstart
 
 Paste this prompt into your coding agent:
 
 ```
-Install the Video.js skill: run `npx @videojs/cli agents skills` and follow the steps for the agent you are running in. If you can't run commands, follow the install instructions at https://github.com/videojs/skills instead. Then use the Video.js skill for this project. When installation details are needed, run `npx @videojs/cli agents init --method cdn --framework html` to print the version-matched choices and instructions without changing files.
+Install the Video.js skill: run `npx @videojs/cli agents skills` and follow the steps for the agent you are running in. If you can't run commands, follow the install instructions at https://github.com/videojs/skills instead. Then use the Video.js skill when you work on video or audio in this project. When installation details are needed, run `npx @videojs/cli agents init --method cdn --framework html` to print the version-matched choices and instructions without changing files.
 ```
 
 ## Installation options for coding agents
@@ -34,7 +34,7 @@ npx @videojs/cli agents init
 
 - `project`: Whether to adapt the current project or scaffold a new one. New projects need a named app setup. Values: `new`, `existing`. Default: existing.
 - `preset`: The player configuration and control set. Values: `video`, `audio`, `live-video`, `live-audio`, `background-video`. Default: video.
-- `skin`: The visual skin. Minimal has cleaner surfaces and the same controls as Default. Values: `default`, `minimal`, `none`. Default: default. Applies when preset is not background-video.
+- `skin`: The visual skin. Neutral has cleaner surfaces and the same controls as Default. Values: `default`, `neutral`, `compat`, `none`. Default: default. Applies when preset is not background-video.
 - `media`: The media source or playback adapter. See the preset compatibility map below. Values: `background-video`, `hls-background-video`, `cloudflare`, `dash`, `hls`, `html5-audio`, `html5-video`, `mux-audio`, `mux-background-video`, `mux-video`, `spotify`, `tiktok`, `twitch`, `vimeo`, `youtube`. Default: the selected preset's first compatible media source.
 - `extensions`: A comma-separated list of optional player extensions compatible with the selected player. Pass `none` when no extension is needed. Values: `none`, `google-cast`, `mux-data`. Default: mux-data for Mux media; none otherwise (reported as defaulted).
 - `source-url`: The http:// or https:// media URL placed in the generated player example. Pass `demo` to choose the Video.js demo source for the selected media explicitly. Default: the Video.js demo source for the selected media (reported as defaulted).
@@ -48,7 +48,7 @@ Run the command above without flags to see the corresponding CLI flags for every
 1. **Inspect the project.** Read package.json, framework config, and lockfiles to infer the framework, app setup, and package manager. React installs @videojs/react; HTML, Vue, and Svelte install @videojs/html.
 2. **Choose the starting point.** Use existing when adapting a compatible project. Use new only when the user wants a new app or the intended workspace has no app. Confirm the choice when the workspace and request do not make it clear.
 3. **Choose the player.** Use video unless the request signals another experience: audio, music, or podcasts use audio; a live stream uses live-video or live-audio; a muted, looping decorative video uses background-video. Ask only when those signals conflict.
-4. **Choose the skin.** Use default unless the request asks for a minimal, cleaner, or more subtle look, which uses minimal; both contain the same controls. Use none only when the project builds its own controls. Ask only when those signals conflict.
+4. **Choose the skin.** Use default unless the request asks for a minimal, cleaner, or more subtle look, which uses neutral; both contain the same controls. Use none only when the project builds its own controls. Ask only when those signals conflict.
 5. **Choose the media.** Infer the adapter from the source when possible. Mux wins for Mux playback URLs: stream.mux.com/\<playback-id>.m3u8 or a bare playback ID uses mux-video, mux-audio, or mux-background-video rather than hls. Mux static renditions such as .mp4 or .m4a files use html5-video or html5-audio. Other .m3u8 URLs use hls.
 6. **Choose extensions.** Mux Data is included by default for Mux video and audio sources. Add Google Cast when a standard or live video player with a ready-made skin should cast a compatible source. Use none when no extension is needed.
 7. **Choose how to install.** This guide uses CDN scripts for plain HTML. Use an existing page when one is available, and scaffold a minimal Vite app only when no app exists.
@@ -93,7 +93,7 @@ Defaulted options: project, preset, skin, source-url, media, extensions, templat
 ## Reproduce or change these instructions
 
 ```sh
-npx @videojs/cli@10.0.0-rc.3 agents init --method cdn --framework html --project existing --preset video --skin default --media html5-video --extensions none --source-url https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4 --template none
+npx @videojs/cli@10.0.0-rc.5 agents init --method cdn --framework html --project existing --preset video --skin default --media html5-video --extensions none --source-url https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4 --template none
 ```
 
 ## Load Video.js
@@ -105,7 +105,7 @@ Add these module scripts to the page head. Module scripts are deferred, so they
 _Merge this into the page `<head>`._
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.3/video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.5/video.js"></script>
 ```
 
 ## Add your player
@@ -146,7 +146,7 @@ That’s it! You now have a working Video.js player without installing Video.js
 
 Packaged skins keep their controls and layout inside Video.js. When you need to add, remove, rearrange, or deeply restyle controls, use Shadcn to add the skin source to your project. Its components, layout, styles, and interactions become local files you can change.
 
-- [Install Video.js with Shadcn](./installation-shadcn.md): Add editable skin source and build a working React or HTML player
+- [Install Video.js with Shadcn](./installation-shadcn.md#choose-how-to-install): Add editable skin source and build a working React or HTML player
 
 ## Choose what to do next
 

package/docs/guides/installation-shadcn.md

@@ -10,14 +10,14 @@ Use Shadcn to add a Video.js skin's components, layout, styles, and interactions
 
 > **Tip: Coming from another player?**
 >
-> Follow the HTML migration guide for [Video.js 8](./migrate-from-video-js-8.md), [Mux Player](./migrate-from-mux-player.md), [Plyr](./migrate-from-plyr.md), or [Media Chrome](./migrate-from-media-chrome.md). Each maps your existing setup onto Video.js v10 instead of starting from scratch.
+> Follow the HTML migration guide for [Video.js 8](./migrate-from-video-js-8.md), [Mux Player](./migrate-from-mux-player.md), [Plyr](./migrate-from-plyr.md), [Media Chrome](./migrate-from-media-chrome.md), or [Vidstack](./migrate-from-vidstack.md). Each maps your existing setup onto Video.js v10 instead of starting from scratch.
 
 ## AI Quickstart
 
 Paste this prompt into your coding agent:
 
 ```
-Install the Video.js skill: run `npx @videojs/cli agents skills` and follow the steps for the agent you are running in. If you can't run commands, follow the install instructions at https://github.com/videojs/skills instead. Then use the Video.js skill for this project. When installation details are needed, run `npx @videojs/cli agents init --method shadcn --framework react` for React, or `npx @videojs/cli agents init --method shadcn --framework html` for plain HTML. The command prints version-matched choices and instructions without changing files.
+Install the Video.js skill: run `npx @videojs/cli agents skills` and follow the steps for the agent you are running in. If you can't run commands, follow the install instructions at https://github.com/videojs/skills instead. Then use the Video.js skill when you work on video or audio in this project. When installation details are needed, run `npx @videojs/cli agents init --method shadcn --framework react` for React, or `npx @videojs/cli agents init --method shadcn --framework html` for plain HTML. The command prints version-matched choices and instructions without changing files.
 ```
 
 ## Installation options for coding agents
@@ -35,7 +35,7 @@ npx @videojs/cli agents init
 - `framework`: The application framework that will host the player. React installs @videojs/react; HTML, Vue, and Svelte install @videojs/html. Values: `react`, `html`. Default: react.
 - `project`: Whether to adapt the current project or scaffold a new one. New projects need a named app setup. Values: `new`, `existing`. Default: existing.
 - `preset`: The player configuration and control set. Values: `video`, `audio`, `live-video`, `live-audio`. Default: video.
-- `skin`: The visual skin. Minimal has cleaner surfaces and the same controls as Default. Values: `default`, `minimal`. Default: default. Applies when preset is not background-video.
+- `skin`: The visual skin. Neutral has cleaner surfaces and the same controls as Default. Values: `default`, `neutral`, `compat`. Default: default. Applies when preset is not background-video.
 - `media`: The media source or playback adapter. See the preset compatibility map below. Values: `background-video`, `hls-background-video`, `cloudflare`, `dash`, `hls`, `html5-audio`, `html5-video`, `mux-audio`, `mux-background-video`, `mux-video`, `spotify`, `tiktok`, `twitch`, `vimeo`, `youtube`. Default: the selected preset's first compatible media source.
 - `extensions`: A comma-separated list of optional player extensions compatible with the selected player. Pass `none` when no extension is needed. Values: `none`, `google-cast`, `mux-data`. Default: mux-data for Mux media; none otherwise (reported as defaulted).
 - `source-url`: The http:// or https:// media URL placed in the generated player example. Pass `demo` to choose the Video.js demo source for the selected media explicitly. Default: the Video.js demo source for the selected media (reported as defaulted).
@@ -50,7 +50,7 @@ Run the command above without flags to see the corresponding CLI flags for every
 1. **Inspect the project.** Read package.json, framework config, and lockfiles to infer the framework, app setup, and package manager. React installs @videojs/react; HTML, Vue, and Svelte install @videojs/html.
 2. **Choose the starting point.** Use existing when adapting a compatible project. Use new only when the user wants a new app or the intended workspace has no app. Confirm the choice when the workspace and request do not make it clear.
 3. **Choose the player.** Use video unless the request signals another experience: audio, music, or podcasts use audio; a live stream uses live-video or live-audio; a muted, looping decorative video uses background-video. Ask only when those signals conflict.
-4. **Choose the skin.** Use default unless the request asks for a minimal, cleaner, or more subtle look, which uses minimal; both contain the same controls. Ask only when those signals conflict.
+4. **Choose the skin.** Use default unless the request asks for a minimal, cleaner, or more subtle look, which uses neutral; both contain the same controls. Ask only when those signals conflict.
 5. **Choose the media.** Infer the adapter from the source when possible. Mux wins for Mux playback URLs: stream.mux.com/\<playback-id>.m3u8 or a bare playback ID uses mux-video, mux-audio, or mux-background-video rather than hls. Mux static renditions such as .mp4 or .m4a files use html5-video or html5-audio. Other .m3u8 URLs use hls.
 6. **Choose extensions.** Mux Data is included by default for Mux video and audio sources. Add Google Cast when a standard or live video player with a ready-made skin should cast a compatible source. Use none when no extension is needed.
 7. **Choose how to install.** This guide uses Shadcn to copy editable skin source. React uses the React source catalog; plain HTML uses the HTML source catalog. Vue and Svelte use packaged modules.
@@ -98,7 +98,7 @@ Defaulted options: project, preset, skin, source-url, media, extensions, templat
 ## Reproduce or change these instructions
 
 ```sh
-npx @videojs/cli@10.0.0-rc.3 agents init --method shadcn --framework html --project existing --preset video --skin default --media html5-video --extensions none --source-url https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4 --package-manager pnpm --template vite --styling css
+npx @videojs/cli@10.0.0-rc.5 agents init --method shadcn --framework html --project existing --preset video --skin default --media html5-video --extensions none --source-url https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4 --package-manager pnpm --template vite --styling css
 ```
 
 ## Configure app aliases

package/docs/guides/installation-svelte.md

@@ -10,14 +10,14 @@ Svelte apps built with Vite, Astro, or SvelteKit use Video.js HTML custom elemen
 
 > **Tip: Coming from another player?**
 >
-> Follow the migration guide for [Video.js 8](./migrate-from-video-js-8.md), [Mux Player](./migrate-from-mux-player.md), [Plyr](./migrate-from-plyr.md), or [Media Chrome](./migrate-from-media-chrome.md). Each maps your existing setup onto Video.js v10 instead of starting from scratch.
+> Follow the migration guide for [Video.js 8](./migrate-from-video-js-8.md), [Mux Player](./migrate-from-mux-player.md), [Plyr](./migrate-from-plyr.md), [Media Chrome](./migrate-from-media-chrome.md), or [Vidstack](./migrate-from-vidstack.md). Each maps your existing setup onto Video.js v10 instead of starting from scratch.
 
 ## AI Quickstart
 
 Paste this prompt into your coding agent:
 
 ```
-Install the Video.js skill: run `npx @videojs/cli agents skills` and follow the steps for the agent you are running in. If you can't run commands, follow the install instructions at https://github.com/videojs/skills instead. Then use the Video.js skill for this project. When installation details are needed, run `npx @videojs/cli agents init --framework svelte` to print the version-matched choices and instructions without changing files.
+Install the Video.js skill: run `npx @videojs/cli agents skills` and follow the steps for the agent you are running in. If you can't run commands, follow the install instructions at https://github.com/videojs/skills instead. Then use the Video.js skill when you work on video or audio in this project. When installation details are needed, run `npx @videojs/cli agents init --framework svelte` to print the version-matched choices and instructions without changing files.
 ```
 
 ## Installation options for coding agents
@@ -34,7 +34,7 @@ npx @videojs/cli agents init
 
 - `project`: Whether to adapt the current project or scaffold a new one. New projects need a named app setup. Values: `new`, `existing`. Default: existing.
 - `preset`: The player configuration and control set. Values: `video`, `audio`, `live-video`, `live-audio`, `background-video`. Default: video.
-- `skin`: The visual skin. Minimal has cleaner surfaces and the same controls as Default. Values: `default`, `minimal`, `none`. Default: default. Applies when preset is not background-video.
+- `skin`: The visual skin. Neutral has cleaner surfaces and the same controls as Default. Values: `default`, `neutral`, `compat`, `none`. Default: default. Applies when preset is not background-video.
 - `media`: The media source or playback adapter. See the preset compatibility map below. Values: `background-video`, `hls-background-video`, `cloudflare`, `dash`, `hls`, `html5-audio`, `html5-video`, `mux-audio`, `mux-background-video`, `mux-video`, `spotify`, `tiktok`, `twitch`, `vimeo`, `youtube`. Default: the selected preset's first compatible media source.
 - `extensions`: A comma-separated list of optional player extensions compatible with the selected player. Pass `none` when no extension is needed. Values: `none`, `google-cast`, `mux-data`. Default: mux-data for Mux media; none otherwise (reported as defaulted).
 - `source-url`: The http:// or https:// media URL placed in the generated player example. Pass `demo` to choose the Video.js demo source for the selected media explicitly. Default: the Video.js demo source for the selected media (reported as defaulted).
@@ -48,7 +48,7 @@ Run the command above without flags to see the corresponding CLI flags for every
 1. **Inspect the project.** Read package.json, framework config, and lockfiles to infer the framework, app setup, and package manager. React installs @videojs/react; HTML, Vue, and Svelte install @videojs/html.
 2. **Choose the starting point.** Use existing when adapting a compatible project. Use new only when the user wants a new app or the intended workspace has no app. Confirm the choice when the workspace and request do not make it clear.
 3. **Choose the player.** Use video unless the request signals another experience: audio, music, or podcasts use audio; a live stream uses live-video or live-audio; a muted, looping decorative video uses background-video. Ask only when those signals conflict.
-4. **Choose the skin.** Use default unless the request asks for a minimal, cleaner, or more subtle look, which uses minimal; both contain the same controls. Use none only when the project builds its own controls. Ask only when those signals conflict.
+4. **Choose the skin.** Use default unless the request asks for a minimal, cleaner, or more subtle look, which uses neutral; both contain the same controls. Use none only when the project builds its own controls. Ask only when those signals conflict.
 5. **Choose the media.** Infer the adapter from the source when possible. Mux wins for Mux playback URLs: stream.mux.com/\<playback-id>.m3u8 or a bare playback ID uses mux-video, mux-audio, or mux-background-video rather than hls. Mux static renditions such as .mp4 or .m4a files use html5-video or html5-audio. Other .m3u8 URLs use hls.
 6. **Choose extensions.** Mux Data is included by default for Mux video and audio sources. Add Google Cast when a standard or live video player with a ready-made skin should cast a compatible source. Use none when no extension is needed.
 7. **Choose how to install.** This guide uses packaged modules, which need a bundler. Match the package manager to the project lockfile. For an existing HTML site without a build step, use CDN scripts instead.
@@ -94,13 +94,13 @@ Defaulted options: project, preset, skin, source-url, media, extensions, templat
 ## Reproduce or change these instructions
 
 ```sh
-npx @videojs/cli@10.0.0-rc.3 agents init --method packaged --framework svelte --project existing --preset video --skin default --media html5-video --extensions none --source-url https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4 --package-manager pnpm --template vite
+npx @videojs/cli@10.0.0-rc.5 agents init --method packaged --framework svelte --project existing --preset video --skin default --media html5-video --extensions none --source-url https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4 --package-manager pnpm --template vite
 ```
 
 ## Install the packages
 
 ```bash
-pnpm add @videojs/html@10.0.0-rc.3
+pnpm add @videojs/html@10.0.0-rc.5
 ```
 
 ## Add your player

package/docs/guides/installation-vue.md

@@ -10,14 +10,14 @@ Vue apps built with Vite, Astro, or Nuxt use Video.js HTML custom elements direc
 
 > **Tip: Coming from another player?**
 >
-> Follow the migration guide for [Video.js 8](./migrate-from-video-js-8.md), [Mux Player](./migrate-from-mux-player.md), [Plyr](./migrate-from-plyr.md), or [Media Chrome](./migrate-from-media-chrome.md). Each maps your existing setup onto Video.js v10 instead of starting from scratch.
+> Follow the migration guide for [Video.js 8](./migrate-from-video-js-8.md), [Mux Player](./migrate-from-mux-player.md), [Plyr](./migrate-from-plyr.md), [Media Chrome](./migrate-from-media-chrome.md), or [Vidstack](./migrate-from-vidstack.md). Each maps your existing setup onto Video.js v10 instead of starting from scratch.
 
 ## AI Quickstart
 
 Paste this prompt into your coding agent:
 
 ```
-Install the Video.js skill: run `npx @videojs/cli agents skills` and follow the steps for the agent you are running in. If you can't run commands, follow the install instructions at https://github.com/videojs/skills instead. Then use the Video.js skill for this project. When installation details are needed, run `npx @videojs/cli agents init --framework vue` to print the version-matched choices and instructions without changing files.
+Install the Video.js skill: run `npx @videojs/cli agents skills` and follow the steps for the agent you are running in. If you can't run commands, follow the install instructions at https://github.com/videojs/skills instead. Then use the Video.js skill when you work on video or audio in this project. When installation details are needed, run `npx @videojs/cli agents init --framework vue` to print the version-matched choices and instructions without changing files.
 ```
 
 ## Installation options for coding agents
@@ -34,7 +34,7 @@ npx @videojs/cli agents init
 
 - `project`: Whether to adapt the current project or scaffold a new one. New projects need a named app setup. Values: `new`, `existing`. Default: existing.
 - `preset`: The player configuration and control set. Values: `video`, `audio`, `live-video`, `live-audio`, `background-video`. Default: video.
-- `skin`: The visual skin. Minimal has cleaner surfaces and the same controls as Default. Values: `default`, `minimal`, `none`. Default: default. Applies when preset is not background-video.
+- `skin`: The visual skin. Neutral has cleaner surfaces and the same controls as Default. Values: `default`, `neutral`, `compat`, `none`. Default: default. Applies when preset is not background-video.
 - `media`: The media source or playback adapter. See the preset compatibility map below. Values: `background-video`, `hls-background-video`, `cloudflare`, `dash`, `hls`, `html5-audio`, `html5-video`, `mux-audio`, `mux-background-video`, `mux-video`, `spotify`, `tiktok`, `twitch`, `vimeo`, `youtube`. Default: the selected preset's first compatible media source.
 - `extensions`: A comma-separated list of optional player extensions compatible with the selected player. Pass `none` when no extension is needed. Values: `none`, `google-cast`, `mux-data`. Default: mux-data for Mux media; none otherwise (reported as defaulted).
 - `source-url`: The http:// or https:// media URL placed in the generated player example. Pass `demo` to choose the Video.js demo source for the selected media explicitly. Default: the Video.js demo source for the selected media (reported as defaulted).
@@ -48,7 +48,7 @@ Run the command above without flags to see the corresponding CLI flags for every
 1. **Inspect the project.** Read package.json, framework config, and lockfiles to infer the framework, app setup, and package manager. React installs @videojs/react; HTML, Vue, and Svelte install @videojs/html.
 2. **Choose the starting point.** Use existing when adapting a compatible project. Use new only when the user wants a new app or the intended workspace has no app. Confirm the choice when the workspace and request do not make it clear.
 3. **Choose the player.** Use video unless the request signals another experience: audio, music, or podcasts use audio; a live stream uses live-video or live-audio; a muted, looping decorative video uses background-video. Ask only when those signals conflict.
-4. **Choose the skin.** Use default unless the request asks for a minimal, cleaner, or more subtle look, which uses minimal; both contain the same controls. Use none only when the project builds its own controls. Ask only when those signals conflict.
+4. **Choose the skin.** Use default unless the request asks for a minimal, cleaner, or more subtle look, which uses neutral; both contain the same controls. Use none only when the project builds its own controls. Ask only when those signals conflict.
 5. **Choose the media.** Infer the adapter from the source when possible. Mux wins for Mux playback URLs: stream.mux.com/\<playback-id>.m3u8 or a bare playback ID uses mux-video, mux-audio, or mux-background-video rather than hls. Mux static renditions such as .mp4 or .m4a files use html5-video or html5-audio. Other .m3u8 URLs use hls.
 6. **Choose extensions.** Mux Data is included by default for Mux video and audio sources. Add Google Cast when a standard or live video player with a ready-made skin should cast a compatible source. Use none when no extension is needed.
 7. **Choose how to install.** This guide uses packaged modules, which need a bundler. Match the package manager to the project lockfile. For an existing HTML site without a build step, use CDN scripts instead.
@@ -94,13 +94,13 @@ Defaulted options: project, preset, skin, source-url, media, extensions, templat
 ## Reproduce or change these instructions
 
 ```sh
-npx @videojs/cli@10.0.0-rc.3 agents init --method packaged --framework vue --project existing --preset video --skin default --media html5-video --extensions none --source-url https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4 --package-manager pnpm --template vite
+npx @videojs/cli@10.0.0-rc.5 agents init --method packaged --framework vue --project existing --preset video --skin default --media html5-video --extensions none --source-url https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4 --package-manager pnpm --template vite
 ```
 
 ## Install the packages
 
 ```bash
-pnpm add @videojs/html@10.0.0-rc.3
+pnpm add @videojs/html@10.0.0-rc.5
 ```
 
 ## Register custom elements

package/docs/guides/installation.md

@@ -10,14 +10,14 @@ Video.js is an **HTML video player built on custom elements**: lightweight, fram
 
 > **Tip: Coming from another player?**
 >
-> Follow the migration guide for [Video.js 8](./migrate-from-video-js-8.md), [Mux Player](./migrate-from-mux-player.md), [Plyr](./migrate-from-plyr.md), or [Media Chrome](./migrate-from-media-chrome.md). Each maps your existing setup onto Video.js v10 instead of starting from scratch.
+> Follow the migration guide for [Video.js 8](./migrate-from-video-js-8.md), [Mux Player](./migrate-from-mux-player.md), [Plyr](./migrate-from-plyr.md), [Media Chrome](./migrate-from-media-chrome.md), or [Vidstack](./migrate-from-vidstack.md). Each maps your existing setup onto Video.js v10 instead of starting from scratch.
 
 ## AI Quickstart
 
 Paste this prompt into your coding agent:
 
 ```
-Install the Video.js skill: run `npx @videojs/cli agents skills` and follow the steps for the agent you are running in. If you can't run commands, follow the install instructions at https://github.com/videojs/skills instead. Then use the Video.js skill for this project. When installation details are needed, run `npx @videojs/cli agents init --framework html` to print the version-matched choices and instructions without changing files.
+Install the Video.js skill: run `npx @videojs/cli agents skills` and follow the steps for the agent you are running in. If you can't run commands, follow the install instructions at https://github.com/videojs/skills instead. Then use the Video.js skill when you work on video or audio in this project. When installation details are needed, run `npx @videojs/cli agents init --framework html` to print the version-matched choices and instructions without changing files.
 ```
 
 ## Installation options for coding agents
@@ -34,7 +34,7 @@ npx @videojs/cli agents init
 
 - `project`: Whether to adapt the current project or scaffold a new one. New projects need a named app setup. Values: `new`, `existing`. Default: existing.
 - `preset`: The player configuration and control set. Values: `video`, `audio`, `live-video`, `live-audio`, `background-video`. Default: video.
-- `skin`: The visual skin. Minimal has cleaner surfaces and the same controls as Default. Values: `default`, `minimal`, `none`. Default: default. Applies when preset is not background-video.
+- `skin`: The visual skin. Neutral has cleaner surfaces and the same controls as Default. Values: `default`, `neutral`, `compat`, `none`. Default: default. Applies when preset is not background-video.
 - `media`: The media source or playback adapter. See the preset compatibility map below. Values: `background-video`, `hls-background-video`, `cloudflare`, `dash`, `hls`, `html5-audio`, `html5-video`, `mux-audio`, `mux-background-video`, `mux-video`, `spotify`, `tiktok`, `twitch`, `vimeo`, `youtube`. Default: the selected preset's first compatible media source.
 - `extensions`: A comma-separated list of optional player extensions compatible with the selected player. Pass `none` when no extension is needed. Values: `none`, `google-cast`, `mux-data`. Default: mux-data for Mux media; none otherwise (reported as defaulted).
 - `source-url`: The http:// or https:// media URL placed in the generated player example. Pass `demo` to choose the Video.js demo source for the selected media explicitly. Default: the Video.js demo source for the selected media (reported as defaulted).
@@ -48,7 +48,7 @@ Run the command above without flags to see the corresponding CLI flags for every
 1. **Inspect the project.** Read package.json, framework config, and lockfiles to infer the framework, app setup, and package manager. React installs @videojs/react; HTML, Vue, and Svelte install @videojs/html.
 2. **Choose the starting point.** Use existing when adapting a compatible project. Use new only when the user wants a new app or the intended workspace has no app. Confirm the choice when the workspace and request do not make it clear.
 3. **Choose the player.** Use video unless the request signals another experience: audio, music, or podcasts use audio; a live stream uses live-video or live-audio; a muted, looping decorative video uses background-video. Ask only when those signals conflict.
-4. **Choose the skin.** Use default unless the request asks for a minimal, cleaner, or more subtle look, which uses minimal; both contain the same controls. Use none only when the project builds its own controls. Ask only when those signals conflict.
+4. **Choose the skin.** Use default unless the request asks for a minimal, cleaner, or more subtle look, which uses neutral; both contain the same controls. Use none only when the project builds its own controls. Ask only when those signals conflict.
 5. **Choose the media.** Infer the adapter from the source when possible. Mux wins for Mux playback URLs: stream.mux.com/\<playback-id>.m3u8 or a bare playback ID uses mux-video, mux-audio, or mux-background-video rather than hls. Mux static renditions such as .mp4 or .m4a files use html5-video or html5-audio. Other .m3u8 URLs use hls.
 6. **Choose extensions.** Mux Data is included by default for Mux video and audio sources. Add Google Cast when a standard or live video player with a ready-made skin should cast a compatible source. Use none when no extension is needed.
 7. **Choose how to install.** This guide uses packaged modules, which need a bundler. Match the package manager to the project lockfile. For an existing HTML site without a build step, use CDN scripts instead.
@@ -96,13 +96,13 @@ Defaulted options: project, preset, skin, source-url, media, extensions, templat
 ## Reproduce or change these instructions
 
 ```sh
-npx @videojs/cli@10.0.0-rc.3 agents init --method packaged --framework html --project existing --preset video --skin default --media html5-video --extensions none --source-url https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4 --package-manager pnpm --template vite
+npx @videojs/cli@10.0.0-rc.5 agents init --method packaged --framework html --project existing --preset video --skin default --media html5-video --extensions none --source-url https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4 --package-manager pnpm --template vite
 ```
 
 ## Install the packages
 
 ```bash
-pnpm add @videojs/html@10.0.0-rc.3
+pnpm add @videojs/html@10.0.0-rc.5
 ```
 
 ## Add your player
@@ -164,7 +164,7 @@ That’s it! You now have a working Video.js player.
 
 Packaged skins keep their controls and layout inside Video.js. When you need to add, remove, rearrange, or deeply restyle controls, use Shadcn to add the skin source to your project. Its components, layout, styles, and interactions become local files you can change.
 
-- [Install Video.js with Shadcn](./installation-shadcn.md): Add editable skin source and build a working React or HTML player
+- [Install Video.js with Shadcn](./installation-shadcn.md#choose-how-to-install): Add editable skin source and build a working React or HTML player
 
 ## Choose what to do next
 

package/docs/guides/internationalization.md

@@ -6,7 +6,7 @@ Translate every player label, tooltip, and screen-reader announcement. The playe
 
 ## Recommended approach
 
-Wrap the player in the i18n provider. It resolves the locale from your page’s `lang` attribute (or an explicit override), lazy-loads the matching locale pack, and every component label follows.
+Wrap the player in the i18n provider. It resolves the locale from your page’s `lang` attribute or an explicit override, then lazy-loads the matching locale pack. Every component label follows that locale.
 
 ```html
 <media-i18n lang="ja">
@@ -19,6 +19,7 @@ Wrap the player in the i18n provider. It resolves the locale from your page’s
 <script type="module">
   import '@videojs/html/i18n';
   import '@videojs/html/video/player';
+  import '@videojs/html/ui/container';
 </script>
 ```
 
@@ -77,10 +78,11 @@ Pick a language and every label follows — no remount:
 **index.ts**
 
 ```ts
-import { LOCALES } from '@videojs/html/i18n';
+import '@videojs/html/i18n';
 import '@videojs/html/video/player';
 import '@videojs/html/video/skin';
 
+const locales = ['en', 'es', 'fr', 'de', 'ja', 'ar'];
 const languageNames = new Intl.DisplayNames(['en'], { type: 'language' });
 const initializedDemos = new WeakSet<HTMLElement>();
 
@@ -93,7 +95,7 @@ function initializeDemos(): void {
     const select = demo.querySelector('select');
     const provider = demo.querySelector('media-i18n');
 
-    for (const locale of ['en', ...LOCALES]) {
+    for (const locale of locales) {
       const option = document.createElement('option');
 
       option.value = locale;
@@ -113,15 +115,19 @@ document.addEventListener('astro:page-load', initializeDemos);
 
 ## How it works
 
-- Component labels are text descriptors — a translation key plus its English default — so everything renders in English with no setup and switches language when a translator is present. Keys are stable: `buttons.play` stays `buttons.play` even if the English wording changes.
-- The provider resolves the locale: explicit `lang` on `<media-i18n>` first, then the nearest ancestor `lang` attribute, then `'en'`. It re-resolves when the page’s `lang` changes.
-- The provider lazy-loads the pack for the resolved locale automatically and keeps it in a layer above the shared registry ([`registerI18n`](../reference/api/register-i18n.md)). Translations merge along a fallback chain that follows the [BCP 47](https://www.rfc-editor.org/rfc/rfc5646) parent tags — `es-MX` checks `es`, then `en` — so a regional pack only has to carry the text that differs from its parent.
-- Each piece of text resolves from the first source that has it:
-  1. Registered custom translations
-  2. A built-in locale pack
-  3. The component’s English fallback
-- `registerI18n(locale, translations)` **merges**: each call adds or replaces keys for that locale without wiping prior registrations, and later registrations win for the same key. Register a locale before the provider resolves it — a pack the provider already lazy-loaded sits above the registry and hides registry entries for that locale. Overriding a handful of strings is the same call as registering a full locale.
-- When no shipped pack matches the locale, the provider can fall back to the browser’s on-device Translation API to machine-translate the English catalogue, with placeholders preserved.
+Component labels carry a translation key and an English default. The provider loads the resolved locale’s pack on demand. Locale fallback follows [BCP 47](https://www.rfc-editor.org/rfc/rfc5646) parent tags: `es-MX` checks `es`, then `en`.
+
+`<media-i18n>` uses its own `lang`, then the nearest ancestor’s `lang`, then `'en'`. It follows changes to the ancestor language when its own `lang` is omitted.
+
+Each label uses the first available value:
+
+1. The shared registry
+2. The lazy-loaded locale pack
+3. The component’s English default
+
+[`registerI18n(locale, translations)`](../reference/api/register-i18n.md) adds or replaces keys in the shared registry. Mounted providers pick up later registrations. Registering any strings for a locale prevents its pack from loading automatically. For partial global overrides, import the locale’s `/register` entry first, as shown below. This keeps the full translation available after a locale switch or provider remount.
+
+When no shipped pack matches, the provider can use the browser’s on-device Translation API. Supply your own translations when you need reviewed wording or consistent availability across browsers.
 
 Translate your own UI with the same machinery:
 
@@ -135,7 +141,7 @@ The element’s text content is the English default; the `token` selects the tra
 
 - English is built in; every other locale is a lazy-loaded pack.
 - Locale tags are [BCP 47](https://www.rfc-editor.org/rfc/rfc5646) (`es`, `pt-BR`).
-- Translation keys are namespaced strings (`buttons.play`, `errors.network`, `menu.quality`); the full list lives at [Translation phrases](../reference/api/translation-phrases.md) and is typed, so typos in `registerI18n` objects fail in TypeScript. The translator itself accepts any string; a mistyped `t()` key falls back to its `default`.
+- Translation keys are namespaced strings (`buttons.play`, `errors.network`, `menu.quality`). The full list is in [Translation phrases](../reference/api/translation-phrases.md). The keys are typed, so typos in `registerI18n` objects fail in TypeScript. The translator itself accepts any string; a mistyped `t()` key falls back to its `default`.
 - Some strings interpolate parameters; custom translations must keep the placeholders:
 
 ```ts
@@ -159,16 +165,16 @@ import { registerI18n } from '@videojs/html/i18n';
 registerI18n('ja', { buttons: { play: '再生', pause: '一時停止' } });
 ```
 
-Only the keys you pass change; the rest of the `ja` pack stays intact. Keep the `/register` import first: it must run before `<media-i18n>` upgrades, or the provider lazy-loads the shipped pack and that pack hides your overrides.
+Import the full pack before registering partial overrides so the remaining labels stay in Japanese. If you register overrides after the pack lazy-loads, they apply immediately. After a locale switch or remount, the provider will not reload the pack, so the remaining labels can fall back to English. Importing `/register` first preserves those labels.
 
 ### Register your own locale
 
-Registered packs are partial: missing keys fall back through the locale chain to a shipped pack or English.
+Register strings for a locale your application supports. Missing keys fall back to registered parent strings, then a shipped parent pack, then English. For example, register a few `es-MX` labels and the `es` pack supplies the rest. If the tag has its own shipped pack, registering strings for it prevents that pack from loading. Use the full-pack pattern above for that case.
 
 ```ts
 import { registerI18n, type Translations } from '@videojs/html/i18n';
 
-const es = {
+const esMX = {
   buttons: {
     play: 'Reproducir',
     pause: 'Pausa',
@@ -177,12 +183,12 @@ const es = {
   },
 } satisfies Partial<Translations>;
 
-registerI18n('es', es);
+registerI18n('es-MX', esMX);
 ```
 
 ### Register a pack with the bundle
 
-Skip lazy loading by registering a shipped locale at startup with a side-effect import. First paint is synchronous in that language:
+Skip lazy loading by registering a shipped locale at startup with a side-effect import. Labels render in that language on first paint:
 
 ```ts
 import '@videojs/html/i18n/locales/ja/register';
@@ -193,23 +199,24 @@ import '@videojs/html/i18n/locales/ja/register';
 CDN locale modules call `registerI18n` on import. Pin every URL to the same version:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.3/locales/es.js"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.3/video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.5/locales/es.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.5/video.js"></script>
 ```
 
-For custom strings, import `registerI18n` from the version-pinned `i18n.js` that matches your player script. The player’s chunks import that exact URL, so a different or unversioned URL loads a second copy of the module with its own registry, and your strings never reach the player. Load your module before the player script so the strings are registered when the elements upgrade:
+Use the same pinned version for your locale pack, `i18n.js`, and player script. Copies loaded in the same window share a registry; matching versions keeps their translation keys and APIs compatible. Import the full locale pack before partial overrides, and register before the player loads to translate the first render:
 
 **my-locale.js**
 
 ```js
-import { registerI18n } from 'https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.3/i18n.js';
+import 'https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.5/locales/es.js';
+import { registerI18n } from 'https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.5/i18n.js';
 
 registerI18n('es', { buttons: { play: 'Reproducir', pause: 'Pausa' } });
 ```
 
 ```html
 <script type="module" src="/my-locale.js"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.3/video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.5/video.js"></script>
 ```
 
 ### Switch locale at runtime
@@ -220,7 +227,7 @@ The simplest switch updates the document language and lets providers pick it up
 document.documentElement.lang = 'fr';
 ```
 
-Ambient switching only applies when `<media-i18n>` has no explicit `lang` attribute. To switch explicitly, set the provider’s `lang`:
+Switching through the document language works only when `<media-i18n>` has no explicit `lang` attribute. To switch explicitly, set the provider’s `lang`:
 
 ```js
 document.querySelector('media-i18n').lang = 'fr';
@@ -252,7 +259,7 @@ Providers without an explicit locale inherit ambient document language and direc
 <html lang="ar" dir="rtl">
 ```
 
-RTL preserves playback control ordering and time-semantic media icons while mirroring menu motion and navigation chevrons. Horizontal time and volume sliders retain a physical left-to-right value scale: Left Arrow decreases the value, Right Arrow increases it, and the minimum remains on the left.
+In RTL layouts, playback controls keep their order and time-related media icons keep their direction. Menu motion and navigation chevrons mirror. Horizontal time and volume sliders retain a physical left-to-right value scale: Left Arrow decreases the value, Right Arrow increases it, and the minimum remains on the left.
 
 ### Replace a component’s visible text
 
@@ -275,8 +282,10 @@ Render the document language on the server (`<html lang="es">`) and make transla
 Emit `lang`, wrap the player with `<media-i18n>`, and register packs in the entry module loaded before custom elements upgrade:
 
 ```ts
-import '@videojs/html/video/player';
 import '@videojs/html/i18n/locales/es/register';
+import '@videojs/html/i18n';
+import '@videojs/html/video/player';
+import '@videojs/html/ui/container';
 ```
 
 > **Caution**
@@ -287,11 +296,11 @@ import '@videojs/html/i18n/locales/es/register';
 
 ### Labels stay in English
 
-No provider is mounted, or the locale never resolved: check the `locale`/`lang` value and that it matches a shipped pack (regional tags fall back — `pt-BR` works; a bare unknown tag falls through to English).
+Check that a provider is mounted and that its `locale`/`lang` value matches a shipped pack. Regional tags fall back to their base language, so `pt-BR` works. An unmatched language falls back to English unless the browser’s Translation API supplies translations; register your own pack for consistent coverage.
 
 ### Some strings are translated, others aren’t
 
-A partial override or partial pack: missing keys fall back through the locale chain to English. Fill in the missing keys with `registerI18n`.
+If you registered partial global overrides before the locale pack loaded, the loader skips that pack. Import its `/register` entry before your overrides. For a custom locale, supply missing keys in your pack; they fall back to English until you do.
 
 ### Translations flash in after load or after switching