@videojs/html 10.0.1 → 10.2.0

package/docs/guides/skins.md

@@ -8,7 +8,7 @@ Packaged player designs that include both UI components and their styles.
 
 A skin wraps the media component and provides the player’s complete interface. It combines a specific set of UI components with the styles that arrange and present them.
 
-The video, audio, live video, and live audio presets each provide Default, Neutral, and Compat skins. Compat uses plain surfaces and basic controls, with broader browser compatibility as its design goal.
+The video, audio, live video, and live audio presets each provide Default, Neutral, Compat, and Scaffold skins. Compat uses plain surfaces and basic controls, with broader browser compatibility as its design goal. Scaffold uses minimal styling as a starting point for a custom skin; its appearance is intended to be replaced.
 
 ## Packaged skins and skin source
 
@@ -51,6 +51,7 @@ The skin source contains the complete interface. You can add, remove, rearrange,
 
 You can also build an interface without starting from a skin. In that model, you choose and arrange individual [UI components](./ui-components.md) around the media. This takes more work, but it avoids inheriting a skin’s layout and interactions.
 
+- [Build your own skin](./build-your-own-skin.md)
 - [Build your own component](./build-your-own-component.md)
 
 ## Skins, features, and presets
@@ -61,10 +62,10 @@ You’ll find a preconfigured player, its typed controller, a skin, and the matc
 
 | Import | Description | Details |
 | --- | --- | --- |
-| `@videojs/html/video` | General-purpose video player preset with full playback controls. | **Feature bundle:** `videoFeatures`; **Features:** [playback](../reference/api/feature-playback.md), [playbackRate](../reference/api/feature-playback-rate.md), [quality](../reference/api/feature-quality.md), [audioTrack](../reference/api/feature-audio-track.md), [volume](../reference/api/feature-volume.md), [time](../reference/api/feature-time.md), [source](../reference/api/feature-source.md), [buffer](../reference/api/feature-buffer.md), [fullscreen](../reference/api/feature-fullscreen.md), [pip](../reference/api/feature-pip.md), [remotePlayback](../reference/api/feature-remote-playback.md), [controls](../reference/api/feature-controls.md), [textTrack](../reference/api/feature-text-tracks.md), [error](../reference/api/feature-error.md), [metadata](../reference/api/feature-metadata.md); **Skins:** `<video-compat-skin>`, `<video-neutral-skin>`, `<video-skin>`; **Default media component:** `<video>` |
-| `@videojs/html/audio` | Audio-only player preset with playback and volume controls. | **Feature bundle:** `audioFeatures`; **Features:** [playback](../reference/api/feature-playback.md), [playbackRate](../reference/api/feature-playback-rate.md), [volume](../reference/api/feature-volume.md), [time](../reference/api/feature-time.md), [source](../reference/api/feature-source.md), [buffer](../reference/api/feature-buffer.md), [error](../reference/api/feature-error.md), [metadata](../reference/api/feature-metadata.md); **Skins:** `<audio-compat-skin>`, `<audio-neutral-skin>`, `<audio-skin>`; **Default media component:** `<audio>` |
+| `@videojs/html/video` | General-purpose video player preset with full playback controls. | **Feature bundle:** `videoFeatures`; **Features:** [playback](../reference/api/feature-playback.md), [playbackRate](../reference/api/feature-playback-rate.md), [quality](../reference/api/feature-quality.md), [audioTrack](../reference/api/feature-audio-track.md), [volume](../reference/api/feature-volume.md), [time](../reference/api/feature-time.md), [source](../reference/api/feature-source.md), [buffer](../reference/api/feature-buffer.md), [fullscreen](../reference/api/feature-fullscreen.md), [pip](../reference/api/feature-pip.md), [remotePlayback](../reference/api/feature-remote-playback.md), [controls](../reference/api/feature-controls.md), [textTrack](../reference/api/feature-text-tracks.md), [error](../reference/api/feature-error.md), [metadata](../reference/api/feature-metadata.md); **Skins:** `<video-compat-skin>`, `<video-neutral-skin>`, `<video-scaffold-skin>`, `<video-skin>`; **Default media component:** `<video>` |
+| `@videojs/html/audio` | Audio-only player preset with playback and volume controls. | **Feature bundle:** `audioFeatures`; **Features:** [playback](../reference/api/feature-playback.md), [playbackRate](../reference/api/feature-playback-rate.md), [volume](../reference/api/feature-volume.md), [time](../reference/api/feature-time.md), [source](../reference/api/feature-source.md), [buffer](../reference/api/feature-buffer.md), [error](../reference/api/feature-error.md), [metadata](../reference/api/feature-metadata.md); **Skins:** `<audio-compat-skin>`, `<audio-neutral-skin>`, `<audio-scaffold-skin>`, `<audio-skin>`; **Default media component:** `<audio>` |
 | `@videojs/html/background` | Ambient background video preset with no user controls. | **Feature bundle:** `backgroundFeatures`; **Features:** –; **Skins:** `<background-video-skin>`; **Default media component:** `<background-video>` |
-| `@videojs/html/live-audio` | Live audio player preset — `audio` minus playback rate, plus the live feature, with a skin that swaps the time slider and time displays for a Live button. | **Feature bundle:** `liveAudioFeatures`; **Features:** [playback](../reference/api/feature-playback.md), [volume](../reference/api/feature-volume.md), [time](../reference/api/feature-time.md), [source](../reference/api/feature-source.md), [buffer](../reference/api/feature-buffer.md), [error](../reference/api/feature-error.md), [live](../reference/api/feature-live.md), [metadata](../reference/api/feature-metadata.md); **Skins:** `<live-audio-compat-skin>`, `<live-audio-neutral-skin>`, `<live-audio-skin>`; **Default media component:** `<audio>` |
-| `@videojs/html/live-video` | Live video player preset — `video` minus playback rate, quality selection, and audio-track selection, plus the live feature, with a skin that swaps the time slider and time displays for a Live button. | **Feature bundle:** `liveVideoFeatures`; **Features:** [playback](../reference/api/feature-playback.md), [volume](../reference/api/feature-volume.md), [time](../reference/api/feature-time.md), [source](../reference/api/feature-source.md), [buffer](../reference/api/feature-buffer.md), [fullscreen](../reference/api/feature-fullscreen.md), [pip](../reference/api/feature-pip.md), [remotePlayback](../reference/api/feature-remote-playback.md), [controls](../reference/api/feature-controls.md), [textTrack](../reference/api/feature-text-tracks.md), [error](../reference/api/feature-error.md), [live](../reference/api/feature-live.md), [metadata](../reference/api/feature-metadata.md); **Skins:** `<live-video-compat-skin>`, `<live-video-neutral-skin>`, `<live-video-skin>`; **Default media component:** `<video>` |
+| `@videojs/html/live-audio` | Live audio player preset — `audio` minus playback rate, plus the live feature, with a skin that swaps the time slider and time displays for a Live button. | **Feature bundle:** `liveAudioFeatures`; **Features:** [playback](../reference/api/feature-playback.md), [volume](../reference/api/feature-volume.md), [time](../reference/api/feature-time.md), [source](../reference/api/feature-source.md), [buffer](../reference/api/feature-buffer.md), [error](../reference/api/feature-error.md), [live](../reference/api/feature-live.md), [metadata](../reference/api/feature-metadata.md); **Skins:** `<live-audio-compat-skin>`, `<live-audio-neutral-skin>`, `<live-audio-scaffold-skin>`, `<live-audio-skin>`; **Default media component:** `<audio>` |
+| `@videojs/html/live-video` | Live video player preset — `video` minus playback rate, quality selection, and audio-track selection, plus the live feature, with a skin that swaps the time slider and time displays for a Live button. | **Feature bundle:** `liveVideoFeatures`; **Features:** [playback](../reference/api/feature-playback.md), [volume](../reference/api/feature-volume.md), [time](../reference/api/feature-time.md), [source](../reference/api/feature-source.md), [buffer](../reference/api/feature-buffer.md), [fullscreen](../reference/api/feature-fullscreen.md), [pip](../reference/api/feature-pip.md), [remotePlayback](../reference/api/feature-remote-playback.md), [controls](../reference/api/feature-controls.md), [textTrack](../reference/api/feature-text-tracks.md), [error](../reference/api/feature-error.md), [live](../reference/api/feature-live.md), [metadata](../reference/api/feature-metadata.md); **Skins:** `<live-video-compat-skin>`, `<live-video-neutral-skin>`, `<live-video-scaffold-skin>`, `<live-video-skin>`; **Default media component:** `<video>` |
 
 - [Read about presets](./presets.md)

package/docs/guides/v10-roadmap.md

@@ -11,7 +11,7 @@ Video.js v10 is a complete rebuild from the ground up, designed to be more modul
 - Stable and recommended for new projects. Start with the [installation guide](./installation.md)
 - Follows semantic versioning: breaking changes wait for a new major version
 - Covers the fundamentals of Video.js 8
-- Migration guides for [Video.js 8](./migrate-from-video-js-8.md), [Mux Player](./migrate-from-mux-player.md), [Plyr](./migrate-from-plyr.md), [Media Chrome](./migrate-from-media-chrome.md), and [Vidstack](./migrate-from-vidstack.md), each listing its known gaps
+- Migration guides for [Video.js 8](./migrate-from-video-js-8.md), [Mux Player](./migrate-from-mux-player.md), [Plyr](./migrate-from-plyr.md), [Media Chrome](./migrate-from-media-chrome.md), [Vidstack](./migrate-from-vidstack.md), and [Video-React](https://videojs.org/docs/framework/react/guides/migrate-from-video-react), each listing its known gaps
 
 ### Version 8
 
@@ -47,7 +47,7 @@ These land in 10.x minor releases as they’re ready.
 
 ---
 
-**Want to contribute?** Check out the [v10 repository on GitHub](https://github.com/videojs/v10) to get involved.
+**Want to contribute?** Check out the [Video.js repository on GitHub](https://github.com/videojs/video.js) to get involved.
 
 ## Related pages
 

package/docs/guides/why-videojs.md

@@ -14,15 +14,15 @@ The native `<video>` tag is enough for a short clip that plays without controls.
 
 Chrome, Safari, and Firefox each render the default `<video>` controls differently. You can hide them, but you can’t deeply style or rearrange them. Building UI that matches your product means starting from scratch.
 
-![Chrome's default video controls](https://videojs.org/_astro/chrome-default-controls.D2ybhMTL.png)
+![Chrome's default video controls](https://videojs.org/.netlify/images?url=_astro%2Fchrome-default-controls.CxhoIIj0.webp&w=246&h=246&q=90&fit=cover)
 
 Chrome
 
-![Safari's default video controls](https://videojs.org/_astro/safari-default-controls.CPUt6ekS.png)
+![Safari's default video controls](https://videojs.org/.netlify/images?url=_astro%2Fsafari-default-controls.6qOhrHdG.webp&w=246&h=246&q=90&fit=cover)
 
 Safari
 
-![Firefox's default video controls](https://videojs.org/_astro/firefox-default-controls.CYiJeU98.png)
+![Firefox's default video controls](https://videojs.org/.netlify/images?url=_astro%2Ffirefox-default-controls.BVyAWtAA.webp&w=246&h=246&q=90&fit=cover)
 
 Firefox
 

package/docs/llms.txt

@@ -1,10 +1,10 @@
 # Video.js v10 — HTML Documentation
 
-> Bundled with `@videojs/html` v10.0.1. Links are relative paths to files in this directory.
+> Bundled with `@videojs/html` v10.2.0. Links are relative paths to files in this directory.
 
 > Install the [Video.js skill](https://github.com/videojs/skills) to help AI coding agents find version-matched pages from this index.
 
-> The `video.js` package on npm is still Video.js 8. Video.js 10 ships as `@videojs/html`; to move existing Video.js 8 code, read https://videojs.org/docs/framework/html/guides/migrate-from-video-js-8.md
+> The `video.js` package on npm contains no player; install `video.js@8` to stay on Video.js 8. Video.js 10 ships as `@videojs/html`; to move existing Video.js 8 code, read https://videojs.org/docs/framework/html/guides/migrate-from-video-js-8.md
 
 > Vidstack Player is in security-only maintenance. To move existing `vidstack` code, read https://videojs.org/docs/framework/html/guides/migrate-from-vidstack.md
 
@@ -28,11 +28,12 @@ Install Video.js, customize a skin, understand its main pieces, check browser an
 - [Build your own UI component](./guides/build-your-own-component.md): Create custom player controls that read state, dispatch actions, and stay accessible.
 - [Architecture](./guides/architecture.md): How Video.js players are structured — state, UI, media, and extensions
 - [Customize skins](./guides/customize-skins.md): Style a packaged Video.js skin or add its source to change controls, layout, styles, and interactions
+- [Build your own skin](./guides/build-your-own-skin.md): Create a skin project, preview it locally, and compose your own player interface from Video.js UI components
 - [Why Video.js?](./guides/why-videojs.md): The open-source video player for React and HTML. Lightweight, accessible components built for performance and streaming.
 - [Browser support](./guides/browser-support.md): Browsers and rendering environments supported by Video.js 10, and how the packaged skins reach them
 - [Build with AI](./guides/build-with-ai.md): Install the Video.js skill and give AI coding agents version-matched docs for building and migrating players
 - [v10 Roadmap](./guides/v10-roadmap.md): Where Video.js v10 stands, what comes after 10.0, and the support plan for Video.js 8
-- [Contribute to Video.js](https://github.com/videojs/v10/blob/main/CONTRIBUTING.md)
+- [Contribute to Video.js](https://github.com/videojs/video.js/blob/main/CONTRIBUTING.md)
 
 ### Frameworks
 
@@ -115,15 +116,19 @@ API reference for the packaged skins each preset ships.
 - [video-skin](./reference/components/video-skin.md): The video preset's default skin with the modern, frosted look
 - [video-neutral-skin](./reference/components/video-neutral-skin.md): The video preset's visually lighter skin, closer to a classic control bar
 - [video-compat-skin](./reference/components/video-compat-skin.md): A video skin designed for broader browser compatibility
+- [video-scaffold-skin](./reference/components/video-scaffold-skin.md): A video skin with minimal styling for custom skins
 - [audio-skin](./reference/components/audio-skin.md): The audio preset's default skin with the modern, frosted look
 - [audio-neutral-skin](./reference/components/audio-neutral-skin.md): The audio preset's visually lighter skin, closer to a classic control bar
 - [audio-compat-skin](./reference/components/audio-compat-skin.md): An audio skin designed for broader browser compatibility
+- [audio-scaffold-skin](./reference/components/audio-scaffold-skin.md): An audio skin with minimal styling for custom skins
 - [live-video-skin](./reference/components/live-video-skin.md): The live video preset's default skin, which swaps time controls for a Live button
 - [live-video-neutral-skin](./reference/components/live-video-neutral-skin.md): The live video preset's visually lighter skin, closer to a classic control bar
 - [live-video-compat-skin](./reference/components/live-video-compat-skin.md): A live video skin designed for broader browser compatibility
+- [live-video-scaffold-skin](./reference/components/live-video-scaffold-skin.md): A live video skin with minimal styling for custom skins
 - [live-audio-skin](./reference/components/live-audio-skin.md): The live audio preset's default skin, which swaps time controls for a Live button
 - [live-audio-neutral-skin](./reference/components/live-audio-neutral-skin.md): The live audio preset's visually lighter skin, closer to a classic control bar
 - [live-audio-compat-skin](./reference/components/live-audio-compat-skin.md): A live audio skin designed for broader browser compatibility
+- [live-audio-scaffold-skin](./reference/components/live-audio-scaffold-skin.md): A live audio skin with minimal styling for custom skins
 - [background-video-skin](./reference/components/background-video-skin.md): The background preset's chrome-less skin for ambient video
 
 ### Media
@@ -142,6 +147,7 @@ API reference for media components that handle streaming protocols and playback.
 - [mux-background-video](./reference/components/mux-background-video.md): Mux-specific name for the HLS background video component
 - [mux-video](./reference/components/mux-video.md): Video element for Mux-hosted HLS streams
 - [native-hls-video](./reference/components/native-hls-video.md): HLS video element using the browser's built-in HLS support
+- [playerjs-video](./reference/components/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](./reference/components/shaka-video.md): Video element powered by Shaka Player for DASH, HLS, and progressive playback with DRM
 - [spotify-audio](./reference/components/spotify-audio.md): Audio component that plays Spotify tracks, episodes, playlists, and shows through the Spotify embed
 - [tiktok-video](./reference/components/tiktok-video.md): Video component that plays TikTok videos through the TikTok embed player

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.2.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.2.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.2.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.2.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.2.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.2.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.2.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.2.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.2.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.2.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.2.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.2.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.2.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.2.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.2.0/media/hls-audio.js"></script>
 ```
 
 ## Examples
@@ -39,49 +39,4 @@ Or load it from the [CDN](../../guides/cdn.md):
 
 ```ts
 import '@videojs/html/media/hls-audio';
-```
-
-## API Reference
-
-### Attributes
-
-Forwards these standard media attributes to the internal `<audio>`. See the [MDN media element reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio): `autopictureinpicture`, `autoplay`, `controls`, `controlslist`, `crossorigin`, `disablepictureinpicture`, `disableremoteplayback`, `loading`, `loop`, `muted`, `playsinline`, `poster`, `preload`, `src`.
-
-These Video.js-specific attributes configure media behavior:
-
-| Attribute | Type | Default | Description |
-| --- | --- | --- | --- |
-| `stream-type` | `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. |
-
-### Properties
-
-| Property | Type | Default | Description |
-| --- | --- | --- | --- |
-| `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. |
-| `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. |
-| `liveEdgeStart` | `number` | — | Read-only. |
-| `preload` | `'' \| 'none' \| 'metadata' \| 'auto'` | `''` | Preload type (`'none'` / `'metadata'` / `'auto'`). |
-| `source` | `{ src?: string; type?: string; drm?: Partial<Record<string, DrmSystemConfig>> } \| null` | `null` | Structured source, the same shape the video flavor takes so one object serves either. `drm` is accepted and inert: this engine composes no EME. It is kept in the shape rather than removed so a source can be handed to both flavors — and because Mux encrypts video renditions and leaves audio clear, so a protected playback ID plays here regardless. |
-| `src` | `string` | `''` | |
-| `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`.
-
-### Methods
-
-Supports these media methods. See [HTMLAudioElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement) for details: `addTextTrack`, `canPlayType`, `load`, `pause`, `play`.
-
-### Events
-
-Re-dispatches these standard media events from the internal media element: `abort`, `addtrack`, `canplay`, `canplaythrough`, `change`, `contentdatachange`, `durationchange`, `emptied`, `ended`, `loadeddata`, `loadedmetadata`, `loadstart`, `pause`, `play`, `playing`, `progress`, `ratechange`, `removetrack`, `seeked`, `seeking`, `stalled`, `suspend`, `timeupdate`, `volumechange`, `waiting`.
-
-Also emits these Video.js-specific events:
-
-| Event | Description |
-| --- | --- |
-| `error` | Fired when a fatal condition is reported. Read `error` for it. |
-| `sourcechange` | Fired when `source` changes. Read `source` for the new value. |
+```

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.2.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.2.0/media/hls-video.js"></script>
 ```
 
 ## Examples
@@ -46,65 +46,12 @@ import '@videojs/html/ui/container';
 import '@videojs/html/media/hls-video';
 ```
 
-## API Reference
+## Cookie-gated streams
 
-### Attributes
+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.
 
-Forwards these standard media attributes to the internal `<video>`. See the [MDN media element reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video): `autopictureinpicture`, `autoplay`, `controls`, `controlslist`, `crossorigin`, `disablepictureinpicture`, `disableremoteplayback`, `loading`, `loop`, `muted`, `playsinline`, `poster`, `preload`, `src`.
+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.
 
-These Video.js-specific attributes configure media behavior:
-
-| Attribute | Type | Default | Description |
-| --- | --- | --- | --- |
-| `stream-type` | `'on-demand' \| 'live' \| 'unknown'` | `'unknown'` | The source's stream type — `'live'`, `'on-demand'`, or `'unknown'` until a media playlist has been parsed. Setting a non-`'unknown'` value pins a user override (detection stops updating it); setting `'unknown'` reverts to the engine's detected value. |
-
-### Properties
-
-| Property | Type | Default | Description |
-| --- | --- | --- | --- |
-| `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. |
-| `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. |
-| `isFullscreen` | `boolean` | — | Read-only. |
-| `isPictureInPicture` | `boolean` | — | Read-only. |
-| `liveEdgeStart` | `number` | — | Read-only. Presentation time marking the start of the live-edge window — playback at `currentTime >= liveEdgeStart` counts as "at the live edge" (the same target the engine's `seekToLiveEdge` seeks to: window end − HOLD-BACK). `NaN` when the stream isn't live or nothing is resolved yet. Derived at read time from the engine's live window — no change event; re-read on `timeupdate`/`progress` (as the store's live feature does). |
-| `preload` | `'' \| 'none' \| 'metadata' \| 'auto'` | `''` | Preload type (`'none'` / `'metadata'` / `'auto'`). |
-| `source` | `{ src?: string; type?: string; drm?: Partial<Record<string, DrmSystemConfig>> } \| null` | `null` | Structured source: the manifest URL plus what a URL cannot carry, which today is the license servers for protected content. Setting it derives `src`. Assigning the same object back costs nothing — changing anything takes a new one. |
-| `src` | `string` | `''` | |
-| `streamType` | `'on-demand' \| 'live' \| 'unknown'` | `'unknown'` | The source's stream type — `'live'`, `'on-demand'`, or `'unknown'` until a media playlist has been parsed. Setting a non-`'unknown'` value pins a user override (detection stops updating it); setting `'unknown'` reverts to the engine's detected value. |
-| `targetLiveWindow` | `number` | — | Read-only. The target live window: `NaN` for on-demand (or unknown), `0` for standard sliding-window live, `Infinity` for DVR (`#EXT-X-PLAYLIST-TYPE:EVENT`). Fires `targetlivewindowchange` on change. |
-| `webkitCurrentPlaybackTargetIsWireless` | `boolean \| undefined` | — | Read-only. |
-| `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`.
-
-### Methods
-
-Supports these media methods. See [HTMLVideoElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement) for details: `addTextTrack`, `canPlayType`, `exitFullscreen`, `exitPictureInPicture`, `load`, `pause`, `play`, `requestFullscreen`, `requestPictureInPicture`.
-
-### Events
-
-Re-dispatches these standard media events from the internal media element: `abort`, `addtrack`, `canplay`, `canplaythrough`, `change`, `contentdatachange`, `durationchange`, `emptied`, `ended`, `enterpictureinpicture`, `leavepictureinpicture`, `loadeddata`, `loadedmetadata`, `loadstart`, `pause`, `play`, `playing`, `progress`, `ratechange`, `removetrack`, `resize`, `seeked`, `seeking`, `stalled`, `suspend`, `timeupdate`, `volumechange`, `waiting`.
-
-Also emits these Video.js-specific events:
-
-| Event | Description |
-| --- | --- |
-| `error` | Fired when a fatal condition is reported. Read `error` for it. |
-| `sourcechange` | Fired when `source` changes. Read `source` for the new value. |
-| `streamtypechange` | Fired when the detected stream type changes. Read `streamType` for the new value. |
-| `targetlivewindowchange` | Fired when the target live window changes. Read `targetLiveWindow` for the new value. |
-
-### CSS custom properties
-
-| Variable | Description |
-| --- | --- |
-| `--media-video-border-radius` | Border radius of the video element. |
-| `--media-object-fit` | Object fit for the video. |
-| `--media-object-position` | Object position for the video. |
-| `--media-caption-track-duration` | Duration of the caption track transition. |
-| `--media-caption-track-delay` | Delay before the caption track transition. |
-| `--media-caption-track-y` | Vertical offset of the caption track. |
+```html
+<hls-video src="https://cdn.example.com/stream.m3u8" crossorigin="use-credentials"></hls-video>
+```

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.2.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.2.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.2.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