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

package/docs/reference/components/icons.md

@@ -0,0 +1,130 @@
+# Icons
+
+The SVG icon sets used by the packaged skins, as React components, SVG strings, and the media-icon element
+
+The icons the packaged skins render. Skin source added with the [Shadcn registry](../../guides/installation-shadcn.md) imports its icons from these modules, and your own controls can use them too.
+
+Each icon is available as an SVG string and by name through the `<media-icon>` element.
+
+## Import
+
+Register `<media-icon>`:
+
+```ts
+import "@videojs/html/icons/element";
+```
+
+Or import SVG strings:
+
+```ts
+import { playIcon } from "@videojs/html/icons";
+```
+
+## Icon sets
+
+Three sets ship with the same icon names and different designs.
+
+| Set | `family` | SVG strings | Used by |
+| --- | --- | --- | --- |
+| Default | `default` | `@videojs/html/icons` or `@videojs/html/icons/default` | The default skins, such as [`<video-skin>`](./video-skin.md) |
+| Neutral | `neutral` | `@videojs/html/icons/neutral` | The neutral skins, such as [`<video-neutral-skin>`](./video-neutral-skin.md) |
+| Compat | `compat` | `@videojs/html/icons/compat` | The compat skins, such as [`<video-compat-skin>`](./video-compat-skin.md) |
+
+## Available icons
+
+| Name | Export |
+| --- | --- |
+| `airplay-enter` | `airPlayEnterIcon` |
+| `airplay-exit` | `airPlayExitIcon` |
+| `captions-off` | `captionsOffIcon` |
+| `captions-on` | `captionsOnIcon` |
+| `cast-enter` | `castEnterIcon` |
+| `cast-exit` | `castExitIcon` |
+| `check` | `checkIcon` |
+| `chevron` | `chevronIcon` |
+| `fullscreen-enter` | `fullscreenEnterIcon` |
+| `fullscreen-exit` | `fullscreenExitIcon` |
+| `gear` | `gearIcon` |
+| `pause` | `pauseIcon` |
+| `pip-enter` | `pipEnterIcon` |
+| `pip-exit` | `pipExitIcon` |
+| `play` | `playIcon` |
+| `quality` | `qualityIcon` |
+| `restart` | `restartIcon` |
+| `seek` | `seekIcon` |
+| `speech` | `speechIcon` |
+| `speed` | `speedIcon` |
+| `spinner` | `spinnerIcon` |
+| `switches` | `switchesIcon` |
+| `volume-high` | `volumeHighIcon` |
+| `volume-low` | `volumeLowIcon` |
+| `volume-off` | `volumeOffIcon` |
+
+## Element
+
+`<media-icon>` renders a registered icon as its child `<svg>`, in the light DOM. It renders nothing when the name is not registered in the family.
+
+| Attribute | Default | Description |
+| --- | --- | --- |
+| `name` | — | Icon name from the [available icons](#available-icons), such as `play` |
+| `family` | `default` | Icon set to read from, such as `neutral` |
+
+```html
+<media-play-button>
+  <media-icon class="play-icon" name="play"></media-icon>
+  <media-icon class="pause-icon" name="pause" family="neutral"></media-icon>
+</media-play-button>
+```
+
+Each module below defines `<media-icon>` if it is not already defined:
+
+| Module | Registers |
+| --- | --- |
+| `@videojs/html/icons/element` | Every set, loading each one the first time a `<media-icon>` asks for its family |
+| `@videojs/html/icons/element/default` | The default set, up front |
+| `@videojs/html/icons/element/neutral` | The neutral set, up front |
+| `@videojs/html/icons/element/compat` | The compat set, up front |
+
+## SVG strings
+
+Each icon export from `@videojs/html/icons`, `@videojs/html/icons/default`, `@videojs/html/icons/neutral`, and `@videojs/html/icons/compat` is the icon’s SVG markup as a string; `@videojs/html/icons` also exports [`registerIcons`](#registericons). Importing them does not define `<media-icon>`.
+
+```ts
+import { playIcon } from "@videojs/html/icons";
+
+button.innerHTML = playIcon;
+```
+
+## `registerIcons`
+
+`registerIcons(family, icons)` registers SVG strings under icon names for `<media-icon>` and defines the element if needed. Only the icons you import ship, which is how skin source from the Shadcn registry registers its icons. Registering into an existing family adds to it, and `<media-icon>` elements already in the page update.
+
+```ts
+import { pauseIcon, playIcon, registerIcons } from "@videojs/html/icons";
+
+registerIcons("default", { play: playIcon, pause: pauseIcon });
+registerIcons("brand", { play: '<svg viewBox="0 0 18 18">…</svg>' });
+```
+
+```html
+<media-icon name="play"></media-icon>
+<media-icon name="play" family="brand"></media-icon>
+```
+
+Once a family has registered icons, `<media-icon>` renders only those for it, even when `@videojs/html/icons/element` is also imported. `registerIcons` throws when a different element is already defined as `media-icon` and does not support registration.
+
+## Styling
+
+Icons use `fill="currentColor"`, so they take the text color of their parent. They are drawn on an 18×18 grid and render most sharply at 18px or a whole multiple, such as 36px.
+
+```css
+media-icon svg {
+  width: 36px;
+  height: 36px;
+  color: white;
+}
+```
+
+## Accessibility
+
+Every icon renders with `aria-hidden="true"`. Give the surrounding control its accessible name. Built-in buttons, such as the [play button](./play-button.md), provide one automatically.

package/docs/reference/components/live-audio-compat-skin.md

@@ -0,0 +1,35 @@
+# live-audio-compat-skin
+
+A live audio skin designed for broader browser compatibility
+
+The Compat skin of the live audio preset provides basic controls and plain surfaces, with broader browser compatibility as its design goal. It shows a Live button in place of time controls. See [Customize skins](../../guides/customize-skins.md) to install and edit its source.
+
+## Import
+
+```ts
+import '@videojs/html/live-audio/compat-skin';
+```
+
+## Usage
+
+The skin goes between the player and the media element. It renders its controls around the media.
+
+```html
+<live-audio-player>
+  <live-audio-compat-skin>
+    <mux-audio src="live.m3u8"></mux-audio>
+  </live-audio-compat-skin>
+</live-audio-player>
+```
+
+The examples use the [Mux audio element](./mux-audio.md): a plain `<audio>` can’t play HLS in most browsers, and this element reports the live playback state the skin’s Live button needs. See [Play live streams](../../guides/live-streams.md).
+
+## Styling
+
+Packaged skins style themselves and expose a small set of public CSS custom properties. Everything else inside the skin is private and may change between releases. [Customize skins](../../guides/customize-skins.md#style-a-packaged-skin) documents the properties. For deeper changes, the Video.js registry provides the skin files.
+
+## Own the UI
+
+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](../../guides/installation-shadcn.md#choose-how-to-install): Add editable skin source and build a working React or HTML player

package/docs/reference/components/{live-audio-minimal-skin.md → live-audio-neutral-skin.md}

@@ -1,19 +1,19 @@
-# live-audio-minimal-skin
+# live-audio-neutral-skin
 
 The live audio preset's visually lighter skin, closer to a classic control bar
 
-The minimal skin of the live audio preset: the same player and the same controls in a visually lighter design, closer to a classic control bar. Like the default skin, it shows a Live button in place of time controls. [LiveAudioSkin](./live-audio-skin.md) is the same preset’s other variant. See [Skins](../../guides/skins.md) for how packaged skins work and [Presets](../../guides/presets.md) for what the live audio preset ships.
+The neutral skin of the live audio preset: the same player and the same controls in a visually lighter design, closer to a classic control bar. Like the default skin, it shows a Live button in place of time controls. [LiveAudioSkin](./live-audio-skin.md) is the same preset’s other variant. See [Skins](../../guides/skins.md) for how packaged skins work and [Presets](../../guides/presets.md) for what the live audio preset ships.
 
 ## Import
 
 ```ts
-import '@videojs/html/live-audio/minimal-skin';
+import '@videojs/html/live-audio/neutral-skin';
 ```
 
 The import registers the skin and every UI element it composes. The [CDN](../../guides/cdn.md) player bundle registers this skin together with its player:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.3/live-audio-minimal.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.5/live-audio-neutral.js"></script>
 ```
 
 ## Usage
@@ -22,9 +22,9 @@ The skin goes between the player and the media element. It renders its controls
 
 ```html
 <live-audio-player>
-  <live-audio-minimal-skin>
+  <live-audio-neutral-skin>
     <mux-audio src="live.m3u8"></mux-audio>
-  </live-audio-minimal-skin>
+  </live-audio-neutral-skin>
 </live-audio-player>
 ```
 
@@ -38,4 +38,4 @@ Packaged skins style themselves and expose a small set of public CSS custom prop
 
 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](../../guides/installation-shadcn.md): Add editable skin source and build a working React or HTML player
+- [Install Video.js with Shadcn](../../guides/installation-shadcn.md#choose-how-to-install): Add editable skin source and build a working React or HTML player

package/docs/reference/components/live-audio-skin.md

@@ -2,7 +2,7 @@
 
 The live audio preset's default skin, which swaps time controls for a Live button
 
-The default skin of the live audio preset: the audio layout with the time slider and time displays swapped for a Live button. [MinimalLiveAudioSkin](./live-audio-minimal-skin.md) is the same preset’s other variant. See [Skins](../../guides/skins.md) for how packaged skins work and [Presets](../../guides/presets.md) for what the live audio preset ships.
+The default skin of the live audio preset: the audio layout with the time slider and time displays swapped for a Live button. [NeutralLiveAudioSkin](./live-audio-neutral-skin.md) is the same preset’s other variant. See [Skins](../../guides/skins.md) for how packaged skins work and [Presets](../../guides/presets.md) for what the live audio preset ships.
 
 ## Import
 
@@ -13,7 +13,7 @@ import '@videojs/html/live-audio/skin';
 The import registers the skin and every UI element it composes. The [CDN](../../guides/cdn.md) player bundle registers this skin together with its player:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.3/live-audio.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.5/live-audio.js"></script>
 ```
 
 ## Usage
@@ -38,4 +38,4 @@ Packaged skins style themselves and expose a small set of public CSS custom prop
 
 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](../../guides/installation-shadcn.md): Add editable skin source and build a working React or HTML player
+- [Install Video.js with Shadcn](../../guides/installation-shadcn.md#choose-how-to-install): Add editable skin source and build a working React or HTML player

package/docs/reference/components/live-video-compat-skin.md

@@ -0,0 +1,41 @@
+# live-video-compat-skin
+
+A live video skin designed for broader browser compatibility
+
+The Compat skin of the live video preset provides basic controls and plain surfaces, with broader browser compatibility as its design goal. It shows a Live button in place of time controls. See [Customize skins](../../guides/customize-skins.md) to install and edit its source.
+
+## Import
+
+```ts
+import '@videojs/html/live-video/compat-skin';
+```
+
+## Usage
+
+The skin goes between the player and the media element. It renders its controls around the media.
+
+```html
+<live-video-player>
+  <live-video-compat-skin>
+    <hls-video src="live.m3u8"></hls-video>
+  </live-video-compat-skin>
+</live-video-player>
+```
+
+The examples use the lightweight [HLS video element](./hls-video.md) because most browsers can’t play HLS streams with a plain `<video>`. See [Play live streams](../../guides/live-streams.md).
+
+## Poster
+
+The skin renders a poster image before playback starts. An element with `slot="poster"` replaces it.
+
+See [Add a poster and loading placeholder](../../guides/poster.md) for complete examples.
+
+## Styling
+
+Packaged skins style themselves and expose a small set of public CSS custom properties. Everything else inside the skin is private and may change between releases. [Customize skins](../../guides/customize-skins.md#style-a-packaged-skin) documents the properties. For deeper changes, the Video.js registry provides the skin files.
+
+## Own the UI
+
+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](../../guides/installation-shadcn.md#choose-how-to-install): Add editable skin source and build a working React or HTML player

package/docs/reference/components/{live-video-minimal-skin.md → live-video-neutral-skin.md}

@@ -1,19 +1,19 @@
-# live-video-minimal-skin
+# live-video-neutral-skin
 
 The live video preset's visually lighter skin, closer to a classic control bar
 
-The minimal skin of the live video preset: the same player and the same controls in a visually lighter design, closer to a classic control bar. Like the default skin, it shows a Live button in place of time controls. [LiveVideoSkin](./live-video-skin.md) is the same preset’s other variant. See [Skins](../../guides/skins.md) for how packaged skins work and [Presets](../../guides/presets.md) for what the live video preset ships.
+The neutral skin of the live video preset: the same player and the same controls in a visually lighter design, closer to a classic control bar. Like the default skin, it shows a Live button in place of time controls. [LiveVideoSkin](./live-video-skin.md) is the same preset’s other variant. See [Skins](../../guides/skins.md) for how packaged skins work and [Presets](../../guides/presets.md) for what the live video preset ships.
 
 ## Import
 
 ```ts
-import '@videojs/html/live-video/minimal-skin';
+import '@videojs/html/live-video/neutral-skin';
 ```
 
 The import registers the skin and every UI element it composes. The [CDN](../../guides/cdn.md) player bundle registers this skin together with its player:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.3/live-video-minimal.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.5/live-video-neutral.js"></script>
 ```
 
 ## Usage
@@ -22,9 +22,9 @@ The skin goes between the player and the media element. It renders its controls
 
 ```html
 <live-video-player>
-  <live-video-minimal-skin>
+  <live-video-neutral-skin>
     <hls-video src="live.m3u8"></hls-video>
-  </live-video-minimal-skin>
+  </live-video-neutral-skin>
 </live-video-player>
 ```
 
@@ -44,4 +44,4 @@ Packaged skins style themselves and expose a small set of public CSS custom prop
 
 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](../../guides/installation-shadcn.md): Add editable skin source and build a working React or HTML player
+- [Install Video.js with Shadcn](../../guides/installation-shadcn.md#choose-how-to-install): Add editable skin source and build a working React or HTML player

package/docs/reference/components/live-video-skin.md

@@ -2,7 +2,7 @@
 
 The live video preset's default skin, which swaps time controls for a Live button
 
-The default skin of the live video preset: the video layout with the time slider and time displays swapped for a Live button. [MinimalLiveVideoSkin](./live-video-minimal-skin.md) is the same preset’s other variant. See [Skins](../../guides/skins.md) for how packaged skins work and [Presets](../../guides/presets.md) for what the live video preset ships.
+The default skin of the live video preset: the video layout with the time slider and time displays swapped for a Live button. [NeutralLiveVideoSkin](./live-video-neutral-skin.md) is the same preset’s other variant. See [Skins](../../guides/skins.md) for how packaged skins work and [Presets](../../guides/presets.md) for what the live video preset ships.
 
 ## Import
 
@@ -13,7 +13,7 @@ import '@videojs/html/live-video/skin';
 The import registers the skin and every UI element it composes. The [CDN](../../guides/cdn.md) player bundle registers this skin together with its player:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.3/live-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.5/live-video.js"></script>
 ```
 
 ## Usage
@@ -44,4 +44,4 @@ Packaged skins style themselves and expose a small set of public CSS custom prop
 
 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](../../guides/installation-shadcn.md): Add editable skin source and build a working React or HTML player
+- [Install Video.js with Shadcn](../../guides/installation-shadcn.md#choose-how-to-install): Add editable skin source and build a working React or HTML player

package/docs/reference/components/llms.txt

@@ -1,6 +1,6 @@
 # Video.js v10 — HTML Components
 
-> API reference for skins, media components, extensions, and interface components. Bundled with `@videojs/html` v10.0.0-rc.3. Links are relative paths to files in this directory.
+> API reference for skins, media components, extensions, and interface components. Bundled with `@videojs/html` v10.0.0-rc.5. Links are relative paths to files in this directory.
 
 ## Layout
 
@@ -15,13 +15,17 @@ API reference for the components that establish a player and lay out its interfa
 API reference for the packaged skins each preset ships.
 
 - [video-skin](./video-skin.md): The video preset's default skin with the modern, frosted look
-- [video-minimal-skin](./video-minimal-skin.md): The video preset's visually lighter skin, closer to a classic control bar
+- [video-neutral-skin](./video-neutral-skin.md): The video preset's visually lighter skin, closer to a classic control bar
+- [video-compat-skin](./video-compat-skin.md): A video skin designed for broader browser compatibility
 - [audio-skin](./audio-skin.md): The audio preset's default skin with the modern, frosted look
-- [audio-minimal-skin](./audio-minimal-skin.md): The audio preset's visually lighter skin, closer to a classic control bar
+- [audio-neutral-skin](./audio-neutral-skin.md): The audio preset's visually lighter skin, closer to a classic control bar
+- [audio-compat-skin](./audio-compat-skin.md): An audio skin designed for broader browser compatibility
 - [live-video-skin](./live-video-skin.md): The live video preset's default skin, which swaps time controls for a Live button
-- [live-video-minimal-skin](./live-video-minimal-skin.md): The live video preset's visually lighter skin, closer to a classic control bar
+- [live-video-neutral-skin](./live-video-neutral-skin.md): The live video preset's visually lighter skin, closer to a classic control bar
+- [live-video-compat-skin](./live-video-compat-skin.md): A live video skin designed for broader browser compatibility
 - [live-audio-skin](./live-audio-skin.md): The live audio preset's default skin, which swaps time controls for a Live button
-- [live-audio-minimal-skin](./live-audio-minimal-skin.md): The live audio preset's visually lighter skin, closer to a classic control bar
+- [live-audio-neutral-skin](./live-audio-neutral-skin.md): The live audio preset's visually lighter skin, closer to a classic control bar
+- [live-audio-compat-skin](./live-audio-compat-skin.md): A live audio skin designed for broader browser compatibility
 - [background-video-skin](./background-video-skin.md): The background preset's chrome-less skin for ambient video
 
 ## Media
@@ -119,4 +123,10 @@ API reference for the non-visual components that add gestures, hotkeys, and anno
 
 - [media-gesture](./gesture.md): Map tap and double-tap gestures to player actions
 - [media-hotkey](./hotkey.md): Register a keyboard shortcut that invokes a player action
-- [media-status-announcer](./status-announcer.md): Announce player state changes through a persistent status live region
+- [media-status-announcer](./status-announcer.md): Announce player state changes through a persistent status live region
+
+## Icons
+
+API reference for the icon sets the skins use, available for your own controls.
+
+- [Icons](./icons.md): The SVG icon sets used by the packaged skins, as React components, SVG strings, and the media-icon element

package/docs/reference/components/menu.md

@@ -450,10 +450,15 @@ State is reflected as data attributes for CSS styling.
 
 | Variable | Description |
 | --- | --- |
+| `--media-popover-side-offset` | Distance between the popup and the trigger along the side axis. |
+| `--media-popover-align-offset` | Distance between the popup and the trigger along the alignment axis. |
+| `--media-popover-boundary-offset` | Minimum distance between the popup and the positioning boundary. |
+| `--media-popover-anchor-width` | Width of the trigger, set by popup positioning. |
+| `--media-popover-anchor-height` | Height of the trigger, set by popup positioning. |
 | `--media-menu-width` | Width of the active menu panel (px). |
 | `--media-menu-height` | Height of the active menu panel (px). |
-| `--media-menu-available-width` | Viewport-constrained max width for the menu (px). |
-| `--media-menu-available-height` | Viewport-constrained max height for the menu (px). |
+| `--media-menu-available-width` | Width available within the positioning boundary (px). |
+| `--media-menu-available-height` | Height available within the positioning boundary (px). |
 
 #### Events
 

package/docs/reference/components/mux-audio.md

@@ -17,7 +17,7 @@ import '@videojs/html/media/mux-audio';
 Or load it from the [CDN](../../guides/cdn.md):
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.3/media/mux-audio.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.5/media/mux-audio.js"></script>
 ```
 
 ## Analytics and casting
@@ -90,7 +90,7 @@ These Video.js-specific attributes configure media behavior:
 | `error` | `MediaError \| null` | — | Read-only. |
 | `liveEdgeStart` | `number` | — | Read-only. Presentation time marking the start of the Live Edge Window. Derived from the delegate on every read; `NaN` when no delegate is attached or the stream is not live. |
 | `preload` | `MediaPreloadType` | `'metadata'` | Preload type (`'none'` / `'metadata'` / `'auto'`). |
-| `source` | `{ type?: 'application/vnd.apple.mpegurl' \| 'video/mp4'; preferPlayback?: 'mse' \| 'native'; maxAutoResolution?: '270p' \| '360p' \| '480p' \| '540p' \| '720p' \| '1080p' \| '1440p' \| '2160p'; capRenditionToPlayerSize?: boolean; minAutoResolution?: '270p' \| '360p' \| '480p' \| '540p' \| '720p' \| '1080p' \| '1440p' \| '2160p'; engine?: HlsEngineConfig; src?: string; playbackId?: string; customDomain?: string; playback?: MuxPlaybackParams; poster?: MuxPosterParams; storyboard?: MuxStoryboardParams; drm?: MuxDrmParams } \| null` | `null` | Structured Mux source. Setting it derives `src` from the playback ID, custom domain, and `playback` params (appended as `snake_case` query params). A `playback.token` replaces all other params — signed URLs bake them into the token. Engine options live under `engine`. A `drm.token` fills in `drm` itself: Mux's FairPlay, Widevine, and PlayReady license servers for this playback ID, so protected media plays whichever path the browser takes. License servers named alongside the token win, key by key, for content Mux does not license. `playback.maxResolution` and `playback.minResolution` are server-side: they decide which renditions Mux puts in the manifest at all. The inherited `maxAutoResolution` and `minAutoResolution` only look like their pair — those are client-side and bound which of the renditions that *do* arrive adaptive selection reaches for. The two halves are independent. |
+| `source` | `{ type?: 'application/vnd.apple.mpegurl' \| 'video/mp4' \| string & {}; preferPlayback?: 'mse' \| 'native' \| string & {}; maxAutoResolution?: '270p' \| '360p' \| '480p' \| '540p' \| '720p' \| '1080p' \| '1440p' \| '2160p'; capRenditionToPlayerSize?: boolean; minAutoResolution?: '270p' \| '360p' \| '480p' \| '540p' \| '720p' \| '1080p' \| '1440p' \| '2160p'; engine?: HlsEngineConfig; src?: string; playbackId?: string; customDomain?: string; playback?: MuxPlaybackParams; poster?: MuxPosterParams; storyboard?: MuxStoryboardParams; drm?: MuxDrmParams } \| null` | `null` | Structured Mux source. Setting it derives `src` from the playback ID, custom domain, and `playback` params (appended as `snake_case` query params). A `playback.token` replaces all other params — signed URLs bake them into the token. Engine options live under `engine`. A `drm.token` fills in `drm` itself: Mux's FairPlay, Widevine, and PlayReady license servers for this playback ID, so protected media plays whichever path the browser takes. License servers named alongside the token win, key by key, for content Mux does not license. `playback.maxResolution` and `playback.minResolution` are server-side: they decide which renditions Mux puts in the manifest at all. The inherited `maxAutoResolution` and `minAutoResolution` only look like their pair — those are client-side and bound which of the renditions that *do* arrive adaptive selection reaches for. The two halves are independent. |
 | `src` | `string` | `''` | Media source URL. Setting a Mux stream URL (`https://stream.mux.com/<playback-id>.m3u8?...`) extracts the playback ID and query params into `source`; other URLs are kept as a plain `source.src`. Only playback options carry over. Mux identity comes from the URL, and the signed `poster`, `storyboard`, and `drm` tokens are scoped to a playback ID, so carrying them onto a different source would build rejected URLs. |
 | `streamType` | `'on-demand' \| 'live' \| 'unknown'` | `'unknown'` | Current stream type (`'on-demand'` / `'live'` / `'unknown'`). |
 | `targetLiveWindow` | `number` | — | Read-only. Seekable range size for live content. `0` for standard live, `Infinity` for DVR, `NaN` for on-demand or unknown. Fires `targetlivewindowchange` when the value changes (bridged from the delegate). |

package/docs/reference/components/mux-background-video.md

@@ -15,7 +15,7 @@ import '@videojs/html/media/mux-background-video';
 Or load it from the [CDN](../../guides/cdn.md):
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.3/media/mux-background-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.5/media/mux-background-video.js"></script>
 ```
 
 ## Load a Mux source

package/docs/reference/components/mux-data.md

@@ -2,7 +2,7 @@
 
 Options for the Mux Data extension that monitors playback quality
 
-Adds the [Mux Data](https://data.mux.com) [extension](../../guides/architecture.md) to the player’s media. It renders nothing — place it inside the player as a sibling of the media element. See [Mux Data](../../guides/mux-data.md) for how monitoring works.
+Adds the [Mux Data](https://data.mux.com/?utm_source=videojs&utm_campaign=vjs10&utm_content=docs-content) [extension](../../guides/architecture.md) to the player. It renders nothing — place it anywhere inside the player, and it follows whatever media the player attaches. See [Mux Data](../../guides/mux-data.md) for how monitoring works.
 
 ## Import
 
@@ -17,7 +17,7 @@ import '@videojs/html/extensions/mux-data';
 Or load it from the [CDN](../../guides/cdn.md):
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.3/extensions/mux-data.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.5/extensions/mux-data.js"></script>
 ```
 
 ## Anatomy
@@ -34,13 +34,13 @@ Or load it from the [CDN](../../guides/cdn.md):
 | — | `metadata` | Mux Data metadata for the view |
 | `player-software-name` | `playerSoftwareName` | Player name reported to Mux Data |
 | `player-software-version` | `playerSoftwareVersion` | Player version reported to Mux Data. Defaults to the Video.js version |
-| `player-init-time` | `playerInitTime` | Epoch milliseconds the player was initialized. Defaults to when the element was created |
+| `player-init-time` | `playerInitTime` | Epoch milliseconds the player was initialized. Defaults to when the player was created |
 | `beacon-collection-domain` | `beaconCollectionDomain` | Custom domain the beacons are sent to |
 | `disable-cookies` | `disableCookies` | Stops the SDK from setting cookies |
 | `debug` | `debug` | Turns on SDK debug logging |
 | — | `MuxDataSdk` | SDK used for monitoring. Set it to `undefined` to switch monitoring off |
 
-`metadata` and `MuxDataSdk` take objects, so they’re properties only, with no matching attribute.
+`metadata` and `MuxDataSdk` take objects, so they’re properties only, with no matching attribute. Set them on the element, typed as the `MuxDataExtension` class that `@videojs/html/extensions/mux-data` exports.
 
 Changing `MuxDataSdk`, `beaconCollectionDomain`, `debug`, or `disableCookies` restarts monitoring, which ends the current view and starts a new one. The rest update the view in place.
 

package/docs/reference/components/mux-video.md

@@ -17,7 +17,7 @@ import '@videojs/html/media/mux-video';
 Or load it from the [CDN](../../guides/cdn.md):
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.3/media/mux-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.5/media/mux-video.js"></script>
 ```
 
 ## Load a source
@@ -28,7 +28,7 @@ Or load it from the [CDN](../../guides/cdn.md):
 <mux-video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"></mux-video>
 ```
 
-The `source` object builds the URL for you from a playback ID, an optional custom domain, and `playback` params. Playback params are just camelCased [Mux playback query params](https://www.mux.com/docs/api-reference/stream/streaming/get-hls-manifest); for example, `max_resolution` becomes `maxResolution`.
+The `source` object builds the URL for you from a playback ID, an optional custom domain, and `playback` params. Playback params are just camelCased [Mux playback query params](https://www.mux.com/docs/api-reference/stream/streaming/get-hls-manifest?utm_source=videojs&utm_campaign=vjs10&utm_content=docs-content); for example, `max_resolution` becomes `maxResolution`.
 
 ```ts
 const video = document.querySelector('mux-video')!;
@@ -71,7 +71,7 @@ The storyboard lives on a Mux domain, so the Mux video component has to be CORS-
 
 ## Signed playback
 
-For [signed playback](https://www.mux.com/docs/guides/secure-video-playback), put the playback token on `source.playback.token`. The token replaces every other playback param, so bake modifiers like resolution and time bounds into the token when you sign it.
+For [signed playback](https://www.mux.com/docs/guides/secure-video-playback?utm_source=videojs&utm_campaign=vjs10&utm_content=docs-content), put the playback token on `source.playback.token`. The token replaces every other playback param, so bake modifiers like resolution and time bounds into the token when you sign it.
 
 Signed playback needs a separate token for each image URL. Put the thumbnail token (`aud: 't'`) at `source.poster.token` and the storyboard token (`aud: 's'`) at `source.storyboard.token`. If either token is missing or has the wrong audience, the Mux video component does not generate the corresponding URL.
 
@@ -169,7 +169,7 @@ These Video.js-specific attributes configure media behavior:
 | `isPictureInPicture` | `boolean` | — | Read-only. |
 | `liveEdgeStart` | `number` | — | Read-only. Presentation time marking the start of the Live Edge Window. Derived from the delegate on every read; `NaN` when no delegate is attached or the stream is not live. |
 | `preload` | `MediaPreloadType` | `'metadata'` | Preload type (`'none'` / `'metadata'` / `'auto'`). |
-| `source` | `{ type?: 'application/vnd.apple.mpegurl' \| 'video/mp4'; preferPlayback?: 'mse' \| 'native'; maxAutoResolution?: '270p' \| '360p' \| '480p' \| '540p' \| '720p' \| '1080p' \| '1440p' \| '2160p'; capRenditionToPlayerSize?: boolean; minAutoResolution?: '270p' \| '360p' \| '480p' \| '540p' \| '720p' \| '1080p' \| '1440p' \| '2160p'; engine?: HlsEngineConfig; src?: string; playbackId?: string; customDomain?: string; playback?: MuxPlaybackParams; poster?: MuxPosterParams; storyboard?: MuxStoryboardParams; drm?: MuxDrmParams } \| null` | `null` | Structured Mux source. Setting it derives `src` from the playback ID, custom domain, and `playback` params (appended as `snake_case` query params). A `playback.token` replaces all other params — signed URLs bake them into the token. Engine options live under `engine`. A `drm.token` fills in `drm` itself: Mux's FairPlay, Widevine, and PlayReady license servers for this playback ID, so protected media plays whichever path the browser takes. License servers named alongside the token win, key by key, for content Mux does not license. `playback.maxResolution` and `playback.minResolution` are server-side: they decide which renditions Mux puts in the manifest at all. The inherited `maxAutoResolution` and `minAutoResolution` only look like their pair — those are client-side and bound which of the renditions that *do* arrive adaptive selection reaches for. The two halves are independent. |
+| `source` | `{ type?: 'application/vnd.apple.mpegurl' \| 'video/mp4' \| string & {}; preferPlayback?: 'mse' \| 'native' \| string & {}; maxAutoResolution?: '270p' \| '360p' \| '480p' \| '540p' \| '720p' \| '1080p' \| '1440p' \| '2160p'; capRenditionToPlayerSize?: boolean; minAutoResolution?: '270p' \| '360p' \| '480p' \| '540p' \| '720p' \| '1080p' \| '1440p' \| '2160p'; engine?: HlsEngineConfig; src?: string; playbackId?: string; customDomain?: string; playback?: MuxPlaybackParams; poster?: MuxPosterParams; storyboard?: MuxStoryboardParams; drm?: MuxDrmParams } \| null` | `null` | Structured Mux source. Setting it derives `src` from the playback ID, custom domain, and `playback` params (appended as `snake_case` query params). A `playback.token` replaces all other params — signed URLs bake them into the token. Engine options live under `engine`. A `drm.token` fills in `drm` itself: Mux's FairPlay, Widevine, and PlayReady license servers for this playback ID, so protected media plays whichever path the browser takes. License servers named alongside the token win, key by key, for content Mux does not license. `playback.maxResolution` and `playback.minResolution` are server-side: they decide which renditions Mux puts in the manifest at all. The inherited `maxAutoResolution` and `minAutoResolution` only look like their pair — those are client-side and bound which of the renditions that *do* arrive adaptive selection reaches for. The two halves are independent. |
 | `src` | `string` | `''` | Media source URL. Setting a Mux stream URL (`https://stream.mux.com/<playback-id>.m3u8?...`) extracts the playback ID and query params into `source`; other URLs are kept as a plain `source.src`. Only playback options carry over. Mux identity comes from the URL, and the signed `poster`, `storyboard`, and `drm` tokens are scoped to a playback ID, so carrying them onto a different source would build rejected URLs. |
 | `streamType` | `'on-demand' \| 'live' \| 'unknown'` | `'unknown'` | Current stream type (`'on-demand'` / `'live'` / `'unknown'`). |
 | `targetLiveWindow` | `number` | — | Read-only. Seekable range size for live content. `0` for standard live, `Infinity` for DVR, `NaN` for on-demand or unknown. Fires `targetlivewindowchange` when the value changes (bridged from the delegate). |

package/docs/reference/components/native-hls-video.md

@@ -13,7 +13,7 @@ import '@videojs/html/media/native-hls-video';
 Or load it from the [CDN](../../guides/cdn.md):
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.3/media/native-hls-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.5/media/native-hls-video.js"></script>
 ```
 
 ## Examples

package/docs/reference/components/pip-button.md

@@ -44,7 +44,7 @@ The element receives the native `hidden` attribute. No extra CSS is required.
 
 ## Accessibility
 
-Renders a `<button>` with an automatic `aria-label`: “Enter PiP” or “Exit PiP”. Override with the `label` prop. Keyboard activation: Enter / Space.
+The default English `aria-label` is “Enter picture-in-picture”, or “Exit picture-in-picture” while picture-in-picture is active. The `label` prop overrides it. The button supports keyboard activation with Enter or Space.
 
 ## Examples
 
@@ -127,8 +127,8 @@ State is reflected as data attributes for CSS styling.
 
 | Property | Type | Description |
 | --- | --- | --- |
-| `pip` | `boolean` | Whether picture-in-picture mode is currently active. |
 | `label` | `{ key: string; text: string } \| string` | |
+| `pip` | `boolean` | Whether picture-in-picture mode is currently active. |
 | `availability` | `MediaFeatureAvailability` | Whether picture-in-picture can be requested on this platform. |
 | `disabled` | `boolean` | Non-interactive but still focusable (mirrors `aria-disabled`). |
 | `hidden` | `boolean` | Whether the button is hidden until picture-in-picture is available. |

package/docs/reference/components/player.md

@@ -88,7 +88,12 @@ class PlayPauseButton extends UIElement {
     super.disconnectedCallback();
   }
 
-  readonly #togglePlayback = () => this.#playback.value?.togglePaused();
+  readonly #togglePlayback = () => {
+    const playback = this.#playback.value;
+    if (!playback) return;
+
+    playback.paused ? playback.play() : playback.pause();
+  };
 }
 
 customElements.define('play-pause-button', PlayPauseButton);
@@ -110,4 +115,23 @@ The player’s scope can extend beyond the fullscreen target. Playlists, transcr
   <media-transcript></media-transcript>     <!-- outside container — still has store access -->
   <playlist-sidebar></playlist-sidebar>     <!-- outside container — still has store access -->
 </video-player>
-```
+```
+
+## Lifecycle
+
+Video.js elements clean up after themselves when you remove them from the page:
+
+- `<video-player>` and the UI elements destroy themselves two animation frames after they’re removed. Destroying the player also destroys its store.
+- Media elements such as `<hlsjs-video>` tear down their playback engine in a microtask after they’re removed.
+
+Moving an element synchronously, removing it and inserting it elsewhere with no `await` in between, triggers neither. To keep an element through a longer move, add the `keep-alive` attribute:
+
+```html
+<video-player keep-alive>
+  <media-container keep-alive>
+    <hlsjs-video src="/stream.m3u8" keep-alive></hlsjs-video>
+  </media-container>
+</video-player>
+```
+
+`keep-alive` applies only to the element that carries it; descendants don’t inherit it. Set it on every Video.js element in the tree you move. Packaged skins don’t pass it to the controls inside them, so move a player that uses a packaged skin synchronously. An element with `keep-alive` is never destroyed automatically. When you’re finished with it, call `destroy()` on the player and UI elements, and `adapter.destroy()` on media elements, which release their engine that way. A destroyed element can’t be reconnected; create a new one instead.

package/docs/reference/components/popover.md

@@ -11,10 +11,8 @@ import '@videojs/html/ui/popover';
 ## Anatomy
 
 ```html
-<media-popover>
-  <button>Open</button>
-  <div>Content</div>
-</media-popover>
+<button type="button" commandfor="my-popover">Open</button>
+<media-popover id="my-popover">Content</media-popover>
 ```
 
 ## Behavior
@@ -27,7 +25,7 @@ Popovers inside a [player container](./player-container.md) join its popup group
 
 The `side` and `align` props control the preferred popup placement relative to the trigger. When the preferred side overflows the positioning boundary, the popup uses the opposite side if it has more space.
 
-The `media-popover` element wraps a trigger (first child button) and popup content (second child). The element manages open/close state and positioning automatically.
+`<media-popover>` is the popup. A trigger links to it through `commandfor` set to the popup’s `id`. If the popup has no `id`, it uses the element immediately before it as the trigger. It gives the popup a generated `id` and sets the trigger’s `commandfor` to that value. That element must not already target another popup through `commandfor`.
 
 ## Styling
 
@@ -44,13 +42,13 @@ media-popover {
 Style based on open state, rendered side, and transition phases. `data-side` reflects the rendered side and can differ from the preferred `side` prop after collision handling:
 
 ```css
-media-popover[data-open] .popup {
+media-popover[data-open] {
   display: block;
 }
-media-popover[data-starting-style] .popup {
+media-popover[data-starting-style] {
   opacity: 0;
 }
-media-popover[data-ending-style] .popup {
+media-popover[data-ending-style] {
   opacity: 0;
 }
 media-popover[data-side="top"] {