@videojs/html 10.0.1 → 10.1.0

package/docs/reference/api/error-codes.md

@@ -10,7 +10,7 @@ The `video.js` package throws these `VJS8_LEGACY_*` errors when code calls a Vid
 
 - [VJS8_LEGACY_INIT](./vjs8-legacy-init.md)
 
-  `videojs()` was the Video.js 8 API. Video.js 10 has no factory; players are components you compose.
+  `videojs()` was the Video.js 8 setup call. Video.js 10 does not set up a player from an element or id; players are components you compose.
 - [VJS8_LEGACY_PLUGIN](./vjs8-legacy-plugin.md)
 
   `videojs.registerPlugin()` was the Video.js 8 plugin system. Video.js 10 has no plugin registry.

package/docs/reference/api/llms.txt

@@ -1,6 +1,6 @@
 # Video.js v10 — HTML API
 
-> API reference for the player factory, presets, store controllers, features, translation tools, and utilities. Bundled with `@videojs/html` v10.0.1. Links are relative paths to files in this directory.
+> API reference for the player factory, presets, store controllers, features, translation tools, and utilities. Bundled with `@videojs/html` v10.1.0. Links are relative paths to files in this directory.
 
 ## Player
 

package/docs/reference/api/preset-audio.md

@@ -14,7 +14,7 @@ import '@videojs/html/audio/skin';
 Import `@videojs/html/audio/neutral-skin` instead for the neutral skin. Or load one [CDN](../../guides/cdn.md) bundle that registers the player and a skin together:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/audio.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/audio.js"></script>
 ```
 
 `audio-neutral.js` registers the neutral skin instead, and `audio-player.js` registers `<audio-player>` alone.

package/docs/reference/api/preset-background.md

@@ -15,7 +15,7 @@ import '@videojs/html/background/video';
 Or load the [CDN](../../guides/cdn.md) bundle that registers all three:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/background.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/background.js"></script>
 ```
 
 Unlike the other presets, the background preset has one bundle and no player-only bundle.

package/docs/reference/api/preset-live-audio.md

@@ -14,7 +14,7 @@ import '@videojs/html/live-audio/skin';
 Import `@videojs/html/live-audio/neutral-skin` instead for the neutral skin. Or load one [CDN](../../guides/cdn.md) bundle that registers the player and a skin together:
 
 ```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.1.0/live-audio.js"></script>
 ```
 
 `live-audio-neutral.js` registers the neutral skin instead, and `live-audio-player.js` registers `<live-audio-player>` alone.

package/docs/reference/api/preset-live-video.md

@@ -14,7 +14,7 @@ import '@videojs/html/live-video/skin';
 Import `@videojs/html/live-video/neutral-skin` instead for the neutral skin. Or load one [CDN](../../guides/cdn.md) bundle that registers the player and a skin together:
 
 ```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.1.0/live-video.js"></script>
 ```
 
 `live-video-neutral.js` registers the neutral skin instead, and `live-video-player.js` registers `<live-video-player>` alone.

package/docs/reference/api/preset-video.md

@@ -14,7 +14,7 @@ import '@videojs/html/video/skin';
 Import `@videojs/html/video/neutral-skin` instead for the neutral skin. Or load one [CDN](../../guides/cdn.md) bundle that registers the player and a skin together:
 
 ```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.1.0/video.js"></script>
 ```
 
 `video-neutral.js` registers the neutral skin instead, and `video-player.js` registers `<video-player>` alone.

package/docs/reference/api/vjs8-legacy-init.md

@@ -2,7 +2,7 @@
 
 Legacy Video.js 8 player initialization error
 
-`videojs()` was the Video.js 8 API. Video.js 10 has no factory; players are components you compose.
+`videojs()` was the Video.js 8 setup call. Video.js 10 does not set up a player from an element or id; players are components you compose.
 
 ## Trigger
 
@@ -12,7 +12,7 @@ const player = videojs('my-video', { controls: true });
 
 ## Video.js 10 equivalent
 
-Keep `import 'video.js'`, remove the factory call, and render `<video-player><video-skin><video src></video></video-skin></video-player>`.
+Install `@videojs/html`, `import '@videojs/html/video/player'` and `import '@videojs/html/video/skin'`, and render `<video-player><video-skin><video src></video></video-skin></video-player>`.
 
 See [Migrate from Video.js 8](../../guides/migrate-from-video-js-8.md) for the full setup.
 

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

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

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

@@ -0,0 +1,39 @@
+# audio-scaffold-skin
+
+An audio skin with minimal styling for custom skins
+
+The Scaffold skin of the audio 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/audio/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.1.0/audio-scaffold.js"></script>
+```
+
+## Usage
+
+The skin goes between the player and the media element. It renders its controls around the media.
+
+```html
+<audio-player>
+  <audio-scaffold-skin>
+    <audio src="audio.mp3"></audio>
+  </audio-scaffold-skin>
+</audio-player>
+```
+
+## 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/audio-skin.md

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

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

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

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

@@ -17,7 +17,7 @@ import '@videojs/html/media/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/background-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/media/background-video.js"></script>
 ```
 
 ## Examples

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

@@ -17,7 +17,7 @@ import '@videojs/html/media/cloudflare-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/cloudflare-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/media/cloudflare-video.js"></script>
 ```
 
 ## Load a source

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

@@ -21,7 +21,7 @@ import '@videojs/html/media/dash-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/dash-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/media/dash-video.js"></script>
 ```
 
 ## Examples

package/docs/reference/components/google-cast.md

@@ -17,7 +17,7 @@ import '@videojs/html/extensions/google-cast';
 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/google-cast.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/extensions/google-cast.js"></script>
 ```
 
 ## Anatomy

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

@@ -13,7 +13,7 @@ import '@videojs/html/media/hls-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/hls-audio.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/media/hls-audio.js"></script>
 ```
 
 ## Examples
@@ -59,6 +59,7 @@ These Video.js-specific attributes configure media behavior:
 | --- | --- | --- | --- |
 | `alternativeMediaSuggestion` | `string \| undefined` | — | Read-only. A complete sentence naming the Media to reach for when this one can't play a source. Appended to the copy this adapter logs. Empty here, and overridden the same way as on the video adapter — see its note. `hls-audio` has no better-equipped sibling of its own; the Mux audio Media built on this engine does, and points at the hls.js-backed one. |
 | `contentData` | `MediaContentData \| undefined` | — | Read-only. |
+| `crossOrigin` | `'anonymous' \| 'use-credentials' \| null` | `null` | |
 | `disableRemotePlayback` | `boolean` | `false` | |
 | `engine` | `{ state: { [K in keyof S]-?: Signal<S[K]> }; context: { [K in keyof C]-?: Signal<C[K]> }; destroy(): Promise<void> }` | — | Read-only. Underlying playback engine — the low-level SPF reactive composition that drives playback. An advanced escape hatch for direct engine access; normal playback is driven through this element's own properties and methods. |
 | `error` | `{ code: number; message: string; data?: unknown } \| null` | — | Read-only. The current fatal error, or `null`. Only *fatal* conditions appear here — the engine reports non-fatal ones too, which stay in `engine.state.errors`. Resets per source. Fires `'error'` when set. |
@@ -69,7 +70,7 @@ These Video.js-specific attributes configure media behavior:
 | `streamType` | `MediaStreamType` | — | Current stream type (`'on-demand'`, `'live'`, or `'unknown'`). Defaults to `'unknown'`; detecting hosts update it automatically, and consumers can set it to override detection. |
 | `targetLiveWindow` | `number` | — | Read-only. |
 
-Also exposes these properties from the native media API. See [HTMLAudioElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement) for details: `autoplay`, `buffered`, `controls`, `crossOrigin`, `currentSrc`, `currentTime`, `defaultMuted`, `defaultPlaybackRate`, `duration`, `ended`, `loop`, `muted`, `paused`, `playbackRate`, `played`, `readyState`, `remote`, `seekable`, `seeking`, `textTracks`, `title`, `volume`.
+Also exposes these properties from the native media API. See [HTMLAudioElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement) for details: `autoplay`, `buffered`, `controls`, `currentSrc`, `currentTime`, `defaultMuted`, `defaultPlaybackRate`, `duration`, `ended`, `loop`, `muted`, `paused`, `playbackRate`, `played`, `readyState`, `remote`, `seekable`, `seeking`, `textTracks`, `title`, `volume`.
 
 ### Methods
 

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

@@ -15,7 +15,7 @@ import '@videojs/html/media/hls-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/hls-background-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/media/hls-background-video.js"></script>
 ```
 
 ## Source behavior

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

@@ -13,7 +13,7 @@ import '@videojs/html/media/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/hls-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/media/hls-video.js"></script>
 ```
 
 ## Examples
@@ -46,6 +46,16 @@ import '@videojs/html/ui/container';
 import '@videojs/html/media/hls-video';
 ```
 
+## Cookie-gated streams
+
+A stream on another origin that is gated by cookies — CloudFront signed cookies, for example — needs those cookies on every manifest and segment request, or the CDN answers 403. Set the standard `crossorigin="use-credentials"` on the element and the engine sends them, the same way the browser does under native playback. Any other value, or no attribute, leaves requests at the platform default and sends no cross-origin cookies.
+
+The CDN must answer with `Access-Control-Allow-Credentials: true` and a specific `Access-Control-Allow-Origin`, not `*`, or the browser refuses the credentialed response.
+
+```html
+<hls-video src="https://cdn.example.com/stream.m3u8" crossorigin="use-credentials"></hls-video>
+```
+
 ## API Reference
 
 ### Attributes
@@ -64,6 +74,7 @@ These Video.js-specific attributes configure media behavior:
 | --- | --- | --- | --- |
 | `alternativeMediaSuggestion` | `string \| undefined` | — | Read-only. A complete sentence naming the Media to reach for when this one can't play a source — `Try the hls.js-backed Mux media instead: import the hls-js flavor in place of the spf one.` Appended to the copy this adapter surfaces, and to the notices it logs. Name the flavor, not an import path: a Media is reached through several packages, each with its own counterpart. Empty here: `hls-video` has no better-equipped sibling to point at. A Media that does (a Mux Video built on this engine, whose hls.js-backed counterpart plays MPEG-TS and DRM) overrides this static, and its copy gains the second sentence with no other change. |
 | `contentData` | `MediaContentData \| undefined` | — | Read-only. |
+| `crossOrigin` | `'anonymous' \| 'use-credentials' \| null` | `null` | |
 | `disableRemotePlayback` | `boolean` | `false` | |
 | `engine` | `{ state: { [K in keyof S]-?: Signal<S[K]> }; context: { [K in keyof C]-?: Signal<C[K]> }; destroy(): Promise<void> }` | — | Read-only. Underlying playback engine — the low-level SPF reactive composition that drives playback. An advanced escape hatch for direct engine access; normal playback is driven through this element's own properties and methods. |
 | `error` | `{ code: number; message: string; data?: unknown } \| null` | — | Read-only. The current fatal error, or `null`. Only *fatal* conditions appear here — the engine reports non-fatal ones too (they stay in `engine.state.errors`), and promoting them would tell a consumer playback had failed when it hadn't. Resets per source. Fires `'error'` when set. |
@@ -79,7 +90,7 @@ These Video.js-specific attributes configure media behavior:
 | `webkitPresentationMode` | `WebKitPresentationMode \| undefined` | — | Read-only. |
 | `webkitSetPresentationMode` | `((mode: WebKitPresentationMode) => void) \| undefined` | — | Read-only. |
 
-Also exposes these properties from the native media API. See [HTMLVideoElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement) for details: `autoplay`, `buffered`, `controls`, `crossOrigin`, `currentSrc`, `currentTime`, `defaultMuted`, `defaultPlaybackRate`, `disablePictureInPicture`, `duration`, `ended`, `loop`, `muted`, `paused`, `playbackRate`, `played`, `playsInline`, `poster`, `readyState`, `remote`, `seekable`, `seeking`, `textTracks`, `title`, `videoHeight`, `videoWidth`, `volume`.
+Also exposes these properties from the native media API. See [HTMLVideoElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement) for details: `autoplay`, `buffered`, `controls`, `currentSrc`, `currentTime`, `defaultMuted`, `defaultPlaybackRate`, `disablePictureInPicture`, `duration`, `ended`, `loop`, `muted`, `paused`, `playbackRate`, `played`, `playsInline`, `poster`, `readyState`, `remote`, `seekable`, `seeking`, `textTracks`, `title`, `videoHeight`, `videoWidth`, `volume`.
 
 ### Methods
 

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

@@ -17,7 +17,7 @@ import '@videojs/html/media/hlsjs-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/hlsjs-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/media/hlsjs-video.js"></script>
 ```
 
 ## Examples
@@ -50,6 +50,16 @@ import '@videojs/html/ui/container';
 import '@videojs/html/media/hlsjs-video';
 ```
 
+## Cookie-gated streams
+
+A stream on another origin that is gated by cookies — CloudFront signed cookies, for example — needs those cookies on every manifest and segment request, or the CDN answers 403. Set the standard `crossorigin="use-credentials"` on the element and hls.js sends them (`withCredentials` on its XHR loader, `credentials: 'include'` on its fetch loader), the same way the browser does under native playback. Any other value, or no attribute, leaves hls.js’s default and sends no cross-origin cookies. An `xhrSetup` or `fetchSetup` you pass through `source.engine.hlsJs` still runs, after this, on the same request.
+
+The CDN must answer with `Access-Control-Allow-Credentials: true` and a specific `Access-Control-Allow-Origin`, not `*`, or the browser refuses the credentialed response.
+
+```html
+<hlsjs-video src="https://cdn.example.com/stream.m3u8" crossorigin="use-credentials"></hlsjs-video>
+```
+
 ## API Reference
 
 ### Attributes

package/docs/reference/components/icons.md

@@ -22,13 +22,14 @@ import { playIcon } from "@videojs/html/icons";
 
 ## Icon sets
 
-Three sets ship with the same icon names and different designs.
+Four 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) |
+| Scaffold | `scaffold` | `@videojs/html/icons/scaffold` | The scaffold skins, such as [`<video-scaffold-skin>`](./video-scaffold-skin.md) |
 
 ## Available icons
 

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

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

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

@@ -0,0 +1,41 @@
+# live-audio-scaffold-skin
+
+A live audio skin with minimal styling for custom skins
+
+The Scaffold skin of the live audio 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-audio/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.1.0/live-audio-scaffold.js"></script>
+```
+
+## Usage
+
+The skin goes between the player and the media element. It renders its controls around the media.
+
+```html
+<live-audio-player>
+  <live-audio-scaffold-skin>
+    <mux-audio src="live.m3u8"></mux-audio>
+  </live-audio-scaffold-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-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.1.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.1.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.1.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.1.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.1.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.1.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.1.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.1.0/extensions/mux-data.js"></script>
 ```
 
 ## Anatomy

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.1.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.1.0/media/native-hls-video.js"></script>
 ```
 
 ## Examples