@videojs/html 10.0.1 → 10.2.0

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

@@ -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.1/live-audio.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/live-audio.js"></script>
 ```
 
 ## Anatomy

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

@@ -13,7 +13,7 @@ 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.1/live-video-neutral.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/live-video-neutral.js"></script>
 ```
 
 ## Anatomy

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

@@ -0,0 +1,47 @@
+# live-video-scaffold-skin
+
+A live video skin with minimal styling for custom skins
+
+The Scaffold skin of the live video preset provides functional controls with minimal styling and no transitions. It is a starting point for a custom skin, intended to be restyled before use. 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/scaffold-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.2.0/live-video-scaffold.js"></script>
+```
+
+## Usage
+
+The skin goes between the player and the media element. It renders its controls around the media.
+
+```html
+<live-video-player>
+  <live-video-scaffold-skin>
+    <hls-video src="live.m3u8"></hls-video>
+  </live-video-scaffold-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-skin.md

@@ -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.1/live-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/live-video.js"></script>
 ```
 
 ## Anatomy

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.1. Links are relative paths to files in this directory.
+> API reference for skins, media components, extensions, and interface components. Bundled with `@videojs/html` v10.2.0. Links are relative paths to files in this directory.
 
 ## Layout
 
@@ -17,15 +17,19 @@ 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-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
+- [video-scaffold-skin](./video-scaffold-skin.md): A video skin with minimal styling for custom skins
 - [audio-skin](./audio-skin.md): The audio preset's default skin with the modern, frosted look
 - [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
+- [audio-scaffold-skin](./audio-scaffold-skin.md): An audio skin with minimal styling for custom skins
 - [live-video-skin](./live-video-skin.md): The live video preset's default skin, which swaps time controls for a Live button
 - [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-video-scaffold-skin](./live-video-scaffold-skin.md): A live video skin with minimal styling for custom skins
 - [live-audio-skin](./live-audio-skin.md): The live audio preset's default skin, which swaps time controls for a Live button
 - [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
+- [live-audio-scaffold-skin](./live-audio-scaffold-skin.md): A live audio skin with minimal styling for custom skins
 - [background-video-skin](./background-video-skin.md): The background preset's chrome-less skin for ambient video
 
 ## Media
@@ -44,6 +48,7 @@ API reference for media components that handle streaming protocols and playback.
 - [mux-background-video](./mux-background-video.md): Mux-specific name for the HLS background video component
 - [mux-video](./mux-video.md): Video element for Mux-hosted HLS streams
 - [native-hls-video](./native-hls-video.md): HLS video element using the browser's built-in HLS support
+- [playerjs-video](./playerjs-video.md): Video component that plays any embed implementing the player.js protocol, such as Mux Player, Gumlet, FrameRate, Livid, Bunny Stream, and Streamable
 - [shaka-video](./shaka-video.md): Video element powered by Shaka Player for DASH, HLS, and progressive playback with DRM
 - [spotify-audio](./spotify-audio.md): Audio component that plays Spotify tracks, episodes, playlists, and shows through the Spotify embed
 - [tiktok-video](./tiktok-video.md): Video component that plays TikTok videos through the TikTok embed player

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.1/media/mux-audio.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/media/mux-audio.js"></script>
 ```
 
 ## Analytics and casting

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.1/media/mux-background-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/media/mux-background-video.js"></script>
 ```
 
 ## Load a Mux source

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

@@ -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.1/extensions/mux-data.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/extensions/mux-data.js"></script>
 ```
 
 ## Anatomy
@@ -32,7 +32,7 @@ Or load it from the [CDN](../../guides/cdn.md):
 | --- | --- | --- |
 | `env-key` | `envKey` | Mux Data environment key the beacons are sent to. Optional for Mux-hosted playback |
 | — | `metadata` | Mux Data metadata for the view |
-| `player-software-name` | `playerSoftwareName` | Player name reported to Mux Data |
+| `player-software-name` | `playerSoftwareName` | Player name reported to Mux Data. Defaults to `Video.js` |
 | `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 player was created |
 | `beacon-collection-domain` | `beaconCollectionDomain` | Custom domain the beacons are sent to |
@@ -42,6 +42,8 @@ Or load it from the [CDN](../../guides/cdn.md):
 
 `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.
 
+Views also report the extension itself as the Mux plugin, so they can be told apart from other Video.js integrations such as `videojs-mux`.
+
 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.
 
 ## See also

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.1/media/mux-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/media/mux-video.js"></script>
 ```
 
 ## Load a source

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.1/media/native-hls-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/media/native-hls-video.js"></script>
 ```
 
 ## Examples

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

@@ -0,0 +1,197 @@
+# playerjs-video
+
+Video component that plays any embed implementing the player.js protocol, such as Mux Player, Gumlet, FrameRate, Livid, Bunny Stream, and Streamable
+
+[player.js](https://github.com/embedly/player.js/blob/master/SPEC.rst) is a `postMessage` protocol for controlling embedded players, not a video host. Any embed that implements its receiver side plays through this one component: Mux Player’s iframe embed, Gumlet, FrameRate, Livid, Bunny Stream, Streamable, and others. Commands are posted to the embed directly, so no third-party script loads.
+
+## Import
+
+```bash
+pnpm add @videojs/playerjs-video
+```
+
+```ts
+import '@videojs/html/media/playerjs-video';
+```
+
+Or load it from the [CDN](../../guides/cdn.md):
+
+```html
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/media/playerjs-video.js"></script>
+```
+
+## Load a source
+
+`src` takes the embed URL of any player.js receiver: an absolute `http` or `https` URL, with protocol-relative URLs (`//host/…`) read as `https`. Nothing inspects the URL to decide whether it speaks player.js; choosing this component is the opt-in. A `src` that isn’t an `http(s)` URL fails with `MEDIA_ERR_SRC_NOT_SUPPORTED`, and an embed that doesn’t implement the protocol never reports ready, so the element stays at `readyState` 0.
+
+```html
+<playerjs-video src="https://play.gumlet.io/embed/64bfb0913ed6e5096d66dc1e"></playerjs-video>
+```
+
+## Feature detection
+
+Embeds implement the spec to different degrees. Each one lists the methods and events it supports in its `ready` message, and every command is checked against that list:
+
+- A missing getter leaves its value at the default, such as a `duration` of `NaN`. Some embeds implement a getter but can’t answer it yet: Streamable reports no duration until playback starts.
+- A missing setter is a no-op; the value stays wherever the embed has it.
+
+`supports(type, name)` reports whether the embed advertised a method or event. `type` is `'method'` or `'event'`, and `name` is one player.js name or an array of names that must all be supported. It returns `false` until the embed reports ready.
+
+The `loadcomplete` event marks the point where the answer is meaningful:
+
+```ts
+const video = document.querySelector('playerjs-video');
+
+video.addEventListener('loadcomplete', () => {
+  const canSeek = video.supports('method', 'setCurrentTime');
+});
+```
+
+## Controls
+
+Without `controls`, the element ignores pointer events, so a [player skin](../../guides/skins.md) above it receives every click. With `controls`, the embed’s own chrome takes pointer input.
+
+player.js itself can’t hide an embed’s chrome, but for the services it recognizes, the element does it through the embed URL, as far as each service allows:
+
+| Service | Without `controls` |
+| --- | --- |
+| [Mux Player](https://www.mux.com/docs/guides/player?utm_source=videojs&utm_campaign=vjs10&utm_content=docs-content) (`player.mux.com`) | Nothing: its controls are hidden with the `--controls` CSS property, which the iframe doesn’t expose. Under a skin its control bar still stays out of sight, since the frame never gets the hover that reveals it, but its center play button shows while paused |
+| [Gumlet](https://docs.gumlet.com/video/embed-stream) | `disable_player_controls=true`: only the large center play button stays |
+| FrameRate | `show_controls=0` and `initial_play_btn=0`: no control bar and no large start button |
+| [Livid](https://support.livid.com/article/46-advanced-embedding-parameters) | `controls=0`: no chrome at all, the play button included. Livid applies it to videos on Pro and Premium accounts only |
+| [Bunny Stream](https://bunny.net/docs/stream/embedding) | No parameter hides the control bar, so it’s shrunk instead: `compactControls=true`, `showSpeed=false`, `showHeatmap=false`, `chromecast=false`, `disableAirPlay=true` |
+| Streamable | `nocontrols=1`: no chrome at all |
+
+Other services get their URL untouched; pass whatever they offer under [`source.engine.playerJs`](#sourceengineplayerjs).
+
+## URL parameters
+
+For the recognized services, `autoplay`, `muted` (either `muted` or `defaultMuted`), `loop`, and `preload` are written onto the embed URL in the service’s own spelling, and turned off explicitly where the service defaults to on: Gumlet and Streamable loop, and Bunny Stream autoplays. Livid and Mux Player also take `preload` as the element’s own value. The embed reads its URL once, so changing these later reaches the embed over the protocol (`autoplay`, `muted`, `loop`) or not until the next source (`controls`, `preload`); rebuilding the frame for them would restart the video.
+
+Every other parameter a service documents works too, in either of two places. Written into `src`, a parameter is kept as written, even over one the element would derive. Under `source.engine.playerJs`, it overrides both. A parameter a service reads from the URL hash, like Livid’s start time `#t=25`, goes in `src`.
+
+```html
+<playerjs-video src="https://player.mediadelivery.net/embed/759/eb1c4f77-0cda-46be-b47d-1118ad7c2ffe?t=30s&captions=en"></playerjs-video>
+```
+
+## Behavior
+
+- `autoplay`, `muted` (seeded by `defaultMuted`), and `loop` are also applied over the protocol once the embed reports ready, which is how they reach services the element doesn’t recognize. An embed without `setLoop` is looped by replaying it on `ended`.
+- `volume` (0 to 1, sent as the spec’s 0 to 100), `muted`, and seeking through `currentTime` use the spec’s methods.
+- `playbackRate` reaches only embeds that advertise `setPlaybackRate`, an extension to the spec that Gumlet implements.
+- player.js reports no buffering, so a started embed counts as playing.
+- No text tracks: `textTracks` stays empty.
+- The protocol has no fullscreen command, so the element’s own `requestFullscreen()` fullscreens the iframe.
+- `poster` and `playsInline` are stored but have no effect on the embed. `preload` reaches Livid and Mux Player as is and Bunny Stream as `preload=false` when it’s `"none"`, and no other service.
+- An embed `error` with code 1 surfaces as `MEDIA_ERR_SRC_NOT_SUPPORTED`. Codes 2 and 3 mean a command wasn’t supported; they’re ignored, with a warning in development. Any other code is a fatal error carrying the embed’s message.
+
+## Examples
+
+### Basic Usage
+
+**index.html**
+
+```html
+<playerjs-video class="playerjs-video" src="https://play.gumlet.io/embed/64bfb0913ed6e5096d66dc1e" controls></playerjs-video>
+```
+
+**index.css**
+
+```css
+.playerjs-video {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+}
+```
+
+**index.ts**
+
+```ts
+import '@videojs/html/media/playerjs-video';
+```
+
+## API Reference
+
+### Attributes
+
+These attributes configure the embedded media adapter:
+
+| Attribute | Type | Default |
+| --- | --- | --- |
+| `autoplay` | `boolean` | `false` |
+| `controls` | `boolean` | `false` |
+| `loop` | `boolean` | `false` |
+| `muted` | `boolean` | `false` |
+| `playsinline` | `boolean` | `true` |
+| `poster` | `string` | `''` |
+| `preload` | `MediaPreloadType` | `'metadata'` |
+| `src` | `string` | `''` |
+
+### Properties
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `autoplay` | `boolean` | `false` | |
+| `buffered` | `TimeRangeLike` | — | Read-only. |
+| `controls` | `boolean` | `false` | |
+| `currentSrc` | `string` | — | Read-only. |
+| `currentTime` | `number` | — | |
+| `defaultMuted` | `boolean` | `false` | |
+| `duration` | `number` | — | Read-only. |
+| `ended` | `boolean` | — | Read-only. |
+| `engine` | `Window \| null` | — | Read-only. The embed's window. player.js publishes no player object; commands are posted to the frame. Null until rendered. |
+| `error` | `MediaError \| null` | — | Read-only. |
+| `isFullscreen` | `boolean` | — | Read-only. |
+| `loop` | `boolean` | `false` | |
+| `muted` | `boolean` | `false` | |
+| `paused` | `boolean` | — | Read-only. |
+| `playbackRate` | `number` | — | Reaches the embed only where it advertises `setPlaybackRate`, an extension to the spec. |
+| `played` | `{ length: number; start(index: number): number; end(index: number): number }` | — | Read-only. |
+| `playsInline` | `boolean` | `true` | |
+| `poster` | `string` | `''` | |
+| `preload` | `MediaPreloadType` | `'metadata'` | |
+| `readyState` | `number` | — | Read-only. |
+| `seekable` | `TimeRangeLike` | — | Read-only. |
+| `seeking` | `boolean` | — | Read-only. |
+| `source` | `{ src?: string; engine?: PlayerJsSourceEngineConfig } \| null` | `null` | Embed URL in `src`, extra URL parameters under `engine.playerJs`. Re-derives `src`; equal sources skip reload. |
+| `src` | `string` | `''` | |
+| `textTracks` | `TextTrackListLike` | — | Read-only. Always empty: player.js has no text track surface. |
+| `volume` | `number` | — | |
+
+### Engine options
+
+#### `source.engine.playerJs`
+
+player.js standardizes the messages an embed answers, not its URL, so there are no shared parameters. Every key under `source.engine.playerJs` is written onto the embed URL’s query as given, for whichever service serves it — anything in [Gumlet’s](https://docs.gumlet.com/video/embed-stream), [Bunny Stream’s](https://bunny.net/docs/stream/embedding), or [Livid’s](https://support.livid.com/article/46-advanced-embedding-parameters) parameter lists, for example. Values are stringified (`true` becomes `'true'`), an array repeats the parameter once per value, and `null` removes a parameter the URL would otherwise carry. These override both `src` and the parameters the element derives from its props. Changing them reloads the embed. [Media Sources](../../guides/media-sources.md) covers how engine options fit into a structured source.
+
+`referrerPolicy` never reaches the URL, and `<playerjs-video>` doesn’t apply it to its iframe either; it takes effect only in the React component.
+
+Prefer the `autoplay`, `loop`, `muted`, `controls`, and `preload` props over their URL spellings: the props also reach the embed over the protocol and keep the element’s state in step with it.
+
+```ts
+const video = document.querySelector('playerjs-video');
+video.controls = true;
+video.source = {
+  src: 'https://play.gumlet.io/embed/64bfb0913ed6e5096d66dc1e',
+  engine: { playerJs: { player_color: '#ff0000', disabled_player_control: ['cast', 'pip'] } },
+};
+```
+
+| Option | Type | Description |
+| --- | --- | --- |
+| `referrerPolicy` | `ReferrerPolicy \| undefined` | `referrerpolicy` for the embed iframe. Not written to the URL. |
+
+### Methods
+
+Supports these media methods: `exitFullscreen`, `load`, `pause`, `play`, `requestFullscreen`, `supports`.
+
+### Events
+
+Implements these standard media events through the embedded player: `durationchange`, `emptied`, `ended`, `error`, `loadedmetadata`, `loadstart`, `pause`, `play`, `playing`, `progress`, `ratechange`, `seeked`, `seeking`, `timeupdate`, `volumechange`.
+
+Also emits these Video.js-specific events:
+
+| Event | Description |
+| --- | --- |
+| `loadcomplete` | |
+| `sourcechange` | Fired when `source` changes, either directly or by resolving a new `src`. Read `source` for the new value. |

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

@@ -21,7 +21,7 @@ import '@videojs/html/media/shaka-video';
 Or load it from the [CDN](../../guides/cdn.md):
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/media/shaka-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/media/shaka-video.js"></script>
 ```
 
 ## Load a source

package/docs/reference/components/slider.md

@@ -73,6 +73,8 @@ Renders with `role="slider"` and automatic ARIA attributes (`aria-valuemin`, `ar
 - Home: jump to minimum
 - End: jump to maximum
 
+Before each keyboard step, the value snaps to the nearest multiple of `step`.
+
 ## Examples
 
 ### Basic

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

@@ -17,7 +17,7 @@ import '@videojs/html/media/spotify-audio';
 Or load it from the [CDN](../../guides/cdn.md):
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/media/spotify-audio.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/media/spotify-audio.js"></script>
 ```
 
 ## Load a source

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

@@ -17,7 +17,7 @@ import '@videojs/html/media/tiktok-video';
 Or load it from the [CDN](../../guides/cdn.md):
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/media/tiktok-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/media/tiktok-video.js"></script>
 ```
 
 ## Load a source

package/docs/reference/components/time-slider.md

@@ -95,6 +95,8 @@ Renders with `role="slider"` and an automatic `aria-label` that resolves to “S
 - Home: seek to start
 - End: seek to end
 
+Before each keyboard seek, the current time snaps to the nearest multiple of `step`. With the default `step` of `1`, pressing Arrow Right at 12.4 seconds seeks to 13 seconds.
+
 `<media-time-slider-chapter-title>` follows the pointer during pointer interaction. While the slider has keyboard focus, it follows the current playback position and announces chapter changes.
 
 ## Examples
@@ -422,13 +424,13 @@ import '@videojs/html/ui/slider-value';
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
 | `changeThrottle` (attribute `change-throttle`) | `number` | `100` | Leading+trailing throttle (ms) for `onValueChange` during drag. |
-| `disabled` | `boolean` | — | Whether the slider is non-interactive. |
+| `disabled` | `boolean` | `false` | Whether the slider is non-interactive. |
 | `label` | `{ key: string; text: string } \| string \| ((state: SliderState) => Text \| string)` | `''` | Custom label for the slider. |
-| `largeStep` (attribute `large-step`) | `number` | — | Large step increment (Page Up/Down keys). |
-| `orientation` | `'horizontal' \| 'vertical'` | — | Axis of slider movement. |
+| `largeStep` (attribute `large-step`) | `number` | `10` | Large step increment in seconds (Page Up/Down keys). |
+| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Axis of slider movement. |
 | `pauseOnDrag` (attribute `pause-on-drag`) | `boolean` | `false` | When true, pause playback while the user is dragging the thumb, resuming on release if it was playing before. |
-| `step` | `number` | — | Step increment for value changes (arrow keys). |
-| `thumbAlignment` (attribute `thumb-alignment`) | `'center' \| 'edge'` | — | How the thumb aligns at the track edges. `edge` constrains the thumb within track bounds. |
+| `step` | `number` | `1` | Step increment in seconds for value changes (arrow keys). |
+| `thumbAlignment` (attribute `thumb-alignment`) | `'center' \| 'edge'` | `'center'` | How the thumb aligns at the track edges. `edge` constrains the thumb within track bounds. |
 
 #### State
 

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

@@ -17,7 +17,7 @@ import '@videojs/html/media/twitch-video';
 Or load it from the [CDN](../../guides/cdn.md):
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/media/twitch-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/media/twitch-video.js"></script>
 ```
 
 ## Load a source

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

@@ -13,7 +13,7 @@ import '@videojs/html/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.1/video-neutral.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/video-neutral.js"></script>
 ```
 
 ## Anatomy

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

@@ -0,0 +1,51 @@
+# video-scaffold-skin
+
+A video skin with minimal styling for custom skins
+
+The Scaffold skin of the video preset provides functional controls with minimal styling and no transitions. It is a starting point for a custom skin, intended to be restyled before use. Its time slider supports chapter segments and thumbnail previews. See [Customize skins](../../guides/customize-skins.md) to install and edit its source.
+
+## Import
+
+```ts
+import '@videojs/html/video/scaffold-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.2.0/video-scaffold.js"></script>
+```
+
+## Usage
+
+The skin goes between the player and the media element. It renders its controls around the media.
+
+```html
+<video-player>
+  <video-scaffold-skin>
+    <video src="video.mp4"></video>
+  </video-scaffold-skin>
+</video-player>
+```
+
+## 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.
+
+## Thumbnail
+
+The skin renders a storyboard preview image while scrubbing the time slider. An `<img slot="thumbnail">` replaces it, so image attributes such as `crossorigin`, `loading`, and `fetchpriority` go on it.
+
+See [Show timeline thumbnail previews](../../guides/thumbnails.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/video-skin.md

@@ -13,7 +13,7 @@ import '@videojs/html/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.1/video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/video.js"></script>
 ```
 
 ## Anatomy

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

@@ -17,7 +17,7 @@ import '@videojs/html/media/vimeo-video';
 Or load it from the [CDN](../../guides/cdn.md):
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/media/vimeo-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/media/vimeo-video.js"></script>
 ```
 
 ## Load a source

package/docs/reference/components/volume-slider.md

@@ -52,6 +52,8 @@ Renders with `role="slider"` and an automatic `aria-label` that resolves to “V
 - Home: set volume to 0
 - End: set volume to max
 
+Before each keyboard step, the volume snaps to the nearest multiple of `step`.
+
 Scroll wheel support:
 
 - **Mouse wheel / trackpad scroll**: adjusts volume by `wheelStep` increment (default `5`)
@@ -219,13 +221,13 @@ import '@videojs/html/ui/slider-value';
 
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
-| `disabled` | `boolean` | — | Whether the slider is non-interactive. |
+| `disabled` | `boolean` | `false` | Whether the slider is non-interactive. |
 | `label` | `{ key: string; text: string } \| string \| ((state: SliderState) => Text \| string)` | `''` | Custom label for the slider. |
-| `largeStep` (attribute `large-step`) | `number` | — | Large step increment (Page Up/Down keys). |
-| `orientation` | `'horizontal' \| 'vertical'` | — | Axis of slider movement. |
-| `step` | `number` | `DEFAULT_VOLUME_STEP` | Step increment for value changes (arrow keys). |
-| `thumbAlignment` (attribute `thumb-alignment`) | `'center' \| 'edge'` | — | How the thumb aligns at the track edges. `edge` constrains the thumb within track bounds. |
-| `wheelStep` (attribute `wheel-step`) | `number` | `DEFAULT_VOLUME_STEP` | Step increment for wheel scrolling. |
+| `largeStep` (attribute `large-step`) | `number` | `10` | Large step increment (Page Up/Down keys). |
+| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Axis of slider movement. |
+| `step` | `number` | `5` | Step increment for value changes (arrow keys). |
+| `thumbAlignment` (attribute `thumb-alignment`) | `'center' \| 'edge'` | `'center'` | How the thumb aligns at the track edges. `edge` constrains the thumb within track bounds. |
+| `wheelStep` (attribute `wheel-step`) | `number` | `5` | Step increment for wheel scrolling. |
 
 #### State
 

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

@@ -4,6 +4,10 @@ Video component that plays Wistia-hosted videos through Wistia's web component
 
 `<wistia-video>` adapts Wistia’s own `<wistia-player>` web component to the Video.js media contract. Wistia’s chrome stays hidden by default so a Video.js player skin can control playback; set `controls` to use Wistia’s UI.
 
+> **Caution: Wistia loads Sentry when playback fails**
+>
+> Wistia’s player loads the Sentry error-reporting SDK from `browser.sentry-cdn.com` the first time playback errors, then sends the error to a Wistia-owned Sentry project. Video.js has no setting that changes this. Wistia’s [consent API](https://docs.wistia.com/docs/player-privacy-mode) turns it off.
+
 ## Import
 
 ```bash
@@ -17,7 +21,7 @@ import '@videojs/html/media/wistia-video';
 Or load it from the [CDN](../../guides/cdn.md):
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/media/wistia-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/media/wistia-video.js"></script>
 ```
 
 ## Load a source

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

@@ -17,7 +17,7 @@ import '@videojs/html/media/youtube-video';
 Or load it from the [CDN](../../guides/cdn.md):
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/media/youtube-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/media/youtube-video.js"></script>
 ```
 
 ## Load a source
@@ -107,7 +107,7 @@ These attributes configure the embedded media adapter:
 | `seeking` | `boolean` | — | Read-only. |
 | `source` | `{ src?: string; engine?: YouTubeSourceEngineConfig } \| null` | `null` | YouTube URL or id in `src`, plus player parameters under `engine.youtube`. Replacing it re-derives `src`. |
 | `src` | `string` | `''` | |
-| `textTracks` | `TextTrackListLike` | — | Read-only. |
+| `textTracks` | `{ addEventListener(type: K, listener: ((event: Events[K]) => void), options?: { signal?: AbortSignal }): void; removeEventListener(type: K, listener: ((event: Events[K]) => void)): void; dispatchEvent(event: EventLike): boolean; length: number; readonly [index: number]: TextTrackLike; getTrackById?(id: string): TextTrackLike \| null }` | — | Read-only. |
 | `volume` | `number` | — | |
 
 ### Engine options