@videojs/html 10.0.0 → 10.1.0

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

@@ -13,17 +13,17 @@ 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.0/background.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/background.js"></script>
 ```
 
-## Usage
+## Anatomy
 
-The skin goes between the player and the media element. It sizes the ambient video and renders no visible controls.
+The skin goes between the player and the media component. It sizes the ambient video and renders no visible controls.
 
 ```html
 <background-video-player>
   <background-video-skin>
-    <background-video src="video.mp4"></background-video>
+    <background-video></background-video>
   </background-video-skin>
 </background-video-player>
 ```
@@ -32,6 +32,38 @@ The skin goes between the player and the media element. It sizes the ambient vid
 
 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.
 
+## Examples
+
+### Basic Usage
+
+**index.html**
+
+```html
+<background-video-player>
+  <background-video-skin class="html-background-video-skin-basic">
+    <background-video src="https://stream.mux.com/601n4w1fq88NJiVpzvrQQeQfNnnjjfKMIN7dCGAEarTs/highest.mp4"></background-video>
+  </background-video-skin>
+</background-video-player>
+```
+
+**index.css**
+
+```css
+.html-background-video-skin-basic {
+  display: block;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+}
+```
+
+**index.ts**
+
+```ts
+import '@videojs/html/background/player';
+import '@videojs/html/background/skin';
+import '@videojs/html/background/video';
+```
+
 ## Own the UI
 
 Owning the UI means keeping its components, layout, styles, and interactions as local files you can change. The [Shadcn installation guide](../../guides/installation-shadcn.md) adds that source for supported skins. The registry does not provide background video skin source because it has no control UI. Follow [Add a background video](../../guides/background-video.md) to compose the media directly, then add only the UI your use case needs.

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.0/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/cast-button.md

@@ -24,7 +24,7 @@ The button derives its presentation from `availability`:
 - **`"unavailable"`** — the button remains visible and focusable with `aria-disabled="true"` and `data-disabled`, but does not open the picker. This lets a tooltip explain that no Cast device is reachable.
 - **`"available"`** — the button is fully interactive unless the `disabled` prop is set.
 
-Configurable Cast sessions come from the [Google Cast extension](./google-cast.md). Add it to the player next to your media element; without it the button drives the browser’s native Remote Playback API instead, which offers no receiver or load-request configuration. See [Cast to AirPlay and Chromecast](../../guides/casting.md) for the complete setup.
+Configurable Cast sessions come from the [Google Cast extension](./google-cast.md). Add it to the player next to your media component; without it the button drives the browser’s native Remote Playback API instead, which offers no receiver or load-request configuration. See [Cast to AirPlay and Chromecast](../../guides/casting.md) for the complete setup.
 
 ## Styling
 

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.0/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.0/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.0/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.0/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.0/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.0/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.0/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-compat-skin.md

@@ -10,24 +10,55 @@ The Compat skin of the live audio preset provides basic controls and plain surfa
 import '@videojs/html/live-audio/compat-skin';
 ```
 
-## Usage
+## Anatomy
 
-The skin goes between the player and the media element. It renders its controls around the media.
+The skin goes between the player and the media component. It renders its controls around the media.
 
 ```html
 <live-audio-player>
   <live-audio-compat-skin>
-    <mux-audio src="live.m3u8"></mux-audio>
+    <mux-audio></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).
+This uses 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.
 
+## Examples
+
+### Basic Usage
+
+**index.html**
+
+```html
+<live-audio-player>
+  <live-audio-compat-skin class="html-live-audio-compat-skin-basic">
+    <mux-audio src="https://stream.mux.com/v69RSHhFelSm4701snP22dYz2jICy4E4FUyk02rW4gxRM.m3u8" crossorigin="anonymous"></mux-audio>
+  </live-audio-compat-skin>
+</live-audio-player>
+```
+
+**index.css**
+
+```css
+.html-live-audio-compat-skin-basic {
+  display: block;
+  width: 100%;
+}
+```
+
+**index.ts**
+
+```ts
+import '@videojs/html/live-audio/player';
+import '@videojs/html/live-audio/compat-skin';
+import '@videojs/html/media/mux-audio';
+```
+
 ## 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.

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

@@ -13,27 +13,58 @@ 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/live-audio-neutral.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/live-audio-neutral.js"></script>
 ```
 
-## Usage
+## Anatomy
 
-The skin goes between the player and the media element. It renders its controls around the media.
+The skin goes between the player and the media component. It renders its controls around the media.
 
 ```html
 <live-audio-player>
   <live-audio-neutral-skin>
-    <mux-audio src="live.m3u8"></mux-audio>
+    <mux-audio></mux-audio>
   </live-audio-neutral-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).
+This uses 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.
 
+## Examples
+
+### Basic Usage
+
+**index.html**
+
+```html
+<live-audio-player>
+  <live-audio-neutral-skin class="html-live-audio-neutral-skin-basic">
+    <mux-audio src="https://stream.mux.com/v69RSHhFelSm4701snP22dYz2jICy4E4FUyk02rW4gxRM.m3u8" crossorigin="anonymous"></mux-audio>
+  </live-audio-neutral-skin>
+</live-audio-player>
+```
+
+**index.css**
+
+```css
+.html-live-audio-neutral-skin-basic {
+  display: block;
+  width: 100%;
+}
+```
+
+**index.ts**
+
+```ts
+import '@videojs/html/live-audio/player';
+import '@videojs/html/live-audio/neutral-skin';
+import '@videojs/html/media/mux-audio';
+```
+
 ## 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.

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,27 +13,58 @@ 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/live-audio.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/live-audio.js"></script>
 ```
 
-## Usage
+## Anatomy
 
-The skin goes between the player and the media element. It renders its controls around the media.
+The skin goes between the player and the media component. It renders its controls around the media.
 
 ```html
 <live-audio-player>
   <live-audio-skin>
-    <mux-audio src="live.m3u8"></mux-audio>
+    <mux-audio></mux-audio>
   </live-audio-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).
+This uses 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.
 
+## Examples
+
+### Basic Usage
+
+**index.html**
+
+```html
+<live-audio-player>
+  <live-audio-skin class="html-live-audio-skin-basic">
+    <mux-audio src="https://stream.mux.com/v69RSHhFelSm4701snP22dYz2jICy4E4FUyk02rW4gxRM.m3u8" crossorigin="anonymous"></mux-audio>
+  </live-audio-skin>
+</live-audio-player>
+```
+
+**index.css**
+
+```css
+.html-live-audio-skin-basic {
+  display: block;
+  width: 100%;
+}
+```
+
+**index.ts**
+
+```ts
+import '@videojs/html/live-audio/player';
+import '@videojs/html/live-audio/skin';
+import '@videojs/html/media/mux-audio';
+```
+
 ## 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.

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

@@ -10,19 +10,19 @@ The Compat skin of the live video preset provides basic controls and plain surfa
 import '@videojs/html/live-video/compat-skin';
 ```
 
-## Usage
+## Anatomy
 
-The skin goes between the player and the media element. It renders its controls around the media.
+The skin goes between the player and the media component. It renders its controls around the media.
 
 ```html
 <live-video-player>
   <live-video-compat-skin>
-    <hls-video src="live.m3u8"></hls-video>
+    <hls-video></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).
+This uses 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
 
@@ -34,6 +34,38 @@ See [Add a poster and loading placeholder](../../guides/poster.md) for complete
 
 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.
 
+## Examples
+
+### Basic Usage
+
+**index.html**
+
+```html
+<live-video-player>
+  <live-video-compat-skin class="html-live-video-compat-skin-basic">
+    <hls-video src="https://stream.mux.com/v69RSHhFelSm4701snP22dYz2jICy4E4FUyk02rW4gxRM.m3u8" playsinline crossorigin="anonymous"></hls-video>
+  </live-video-compat-skin>
+</live-video-player>
+```
+
+**index.css**
+
+```css
+.html-live-video-compat-skin-basic {
+  display: block;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+}
+```
+
+**index.ts**
+
+```ts
+import '@videojs/html/live-video/player';
+import '@videojs/html/live-video/compat-skin';
+import '@videojs/html/media/hls-video';
+```
+
 ## 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.

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

@@ -13,22 +13,22 @@ 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/live-video-neutral.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/live-video-neutral.js"></script>
 ```
 
-## Usage
+## Anatomy
 
-The skin goes between the player and the media element. It renders its controls around the media.
+The skin goes between the player and the media component. It renders its controls around the media.
 
 ```html
 <live-video-player>
   <live-video-neutral-skin>
-    <hls-video src="live.m3u8"></hls-video>
+    <hls-video></hls-video>
   </live-video-neutral-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).
+This uses 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
 
@@ -40,6 +40,38 @@ See [Add a poster and loading placeholder](../../guides/poster.md) for complete
 
 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.
 
+## Examples
+
+### Basic Usage
+
+**index.html**
+
+```html
+<live-video-player>
+  <live-video-neutral-skin class="html-live-video-neutral-skin-basic">
+    <hls-video src="https://stream.mux.com/v69RSHhFelSm4701snP22dYz2jICy4E4FUyk02rW4gxRM.m3u8" playsinline crossorigin="anonymous"></hls-video>
+  </live-video-neutral-skin>
+</live-video-player>
+```
+
+**index.css**
+
+```css
+.html-live-video-neutral-skin-basic {
+  display: block;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+}
+```
+
+**index.ts**
+
+```ts
+import '@videojs/html/live-video/player';
+import '@videojs/html/live-video/neutral-skin';
+import '@videojs/html/media/hls-video';
+```
+
 ## 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.

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