@videojs/html 10.0.0 → 10.1.0

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,6 +1,6 @@
 # Video.js v10 — HTML Documentation
 
-> Bundled with `@videojs/html` v10.0.0. Links are relative paths to files in this directory.
+> Bundled with `@videojs/html` v10.1.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.
 
@@ -32,7 +32,7 @@ Install Video.js, customize a skin, understand its main pieces, check browser an
 - [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
 
@@ -57,10 +57,10 @@ Understanding-oriented pages that explain how and why things work. Read these to
 
 - [Features](./guides/features.md): The state and actions each feature adds to the player
 - [Skins](./guides/skins.md): Packaged player designs that include both UI components and their styles.
-- [Presets](./guides/presets.md): Pre-packaged player configurations that bundle state management, skins, and media elements for specific use cases.
+- [Presets](./guides/presets.md): Pre-packaged player configurations that bundle state management, skins, and media components for specific use cases.
 - [UI components](./guides/ui-components.md): How Video.js UI components use focused elements, data attributes for state, and compound composition.
 - [Accessibility](./guides/accessibility.md): How Video.js approaches accessibility, and what you should consider if you're deeply customizing your player
-- [Media sources](./guides/media-sources.md): Set what a media element plays and how its engine plays it with the structured source property
+- [Media sources](./guides/media-sources.md): Set what a media component plays and how its engine plays it with the structured source property
 
 ### Playback
 
@@ -87,6 +87,7 @@ Guides for one player capability each: the recommended setup, how it works, brow
 
 Guides for moving an existing player integration to Video.js v10, one per player you might be coming from.
 
+- [Migrate to Video.js v10](./guides/migrate.md): Understand how Video.js v10 differs from the players it brings together, and choose the migration guide for the player you use today.
 - [Migrate from Video.js 8](./guides/migrate-from-video-js-8.md): Move a Video.js 8 integration to v10, mapping the options object, techs, plugins, and player API onto composed components
 - [Migrate from Mux Player](./guides/migrate-from-mux-player.md): Move a Mux Player embed to Video.js v10 using a player, media component, skin, and analytics extension
 - [Migrate from Plyr](./guides/migrate-from-plyr.md): Move an existing Plyr integration to Video.js v10, mapping Plyr options and its instance API onto components and player state
@@ -114,15 +115,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
@@ -141,6 +146,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/feature-fullscreen.md

@@ -2,7 +2,7 @@
 
 Fullscreen state and actions for the player store
 
-Controls fullscreen mode. Tries the container element first, falls back to the media element.
+Controls fullscreen mode. Tries the container element first, falls back to the media component.
 
 ## Import
 
@@ -25,7 +25,7 @@ The `liveVideoFeatures` and `videoFeatures` [feature bundles](../../guides/prese
 
 | Action | Type | Description |
 | --- | --- | --- |
-| `requestFullscreen` | `() => Promise<void>` | Enter fullscreen mode. Tries container first, falls back to media element. |
+| `requestFullscreen` | `() => Promise<void>` | Enter fullscreen mode. Tries container first, falls back to media component. |
 | `exitFullscreen` | `() => Promise<void>` | Exit fullscreen mode. |
 
 ### Selector

package/docs/reference/api/feature-metadata.md

@@ -34,7 +34,7 @@ Attributes and matching properties the player element accepts. They exist only w
 | Property | Type | Description |
 | --- | --- | --- |
 | `title` | `string` | The resolved content title. Set it through the player, not through the store. |
-| `poster` | `string` | The resolved poster URL, independent of the media element's own `poster`. Set it through the player, not through the store. |
+| `poster` | `string` | The resolved poster URL, independent of the media component's own `poster`. Set it through the player, not through the store. |
 
 ### Selector
 
@@ -88,6 +88,6 @@ The flow between an attribute and its property runs one way: an attribute change
 
 The media tier comes from media that reports content data and announces changes to it, and it covers `title` and `poster`. A media reports only the keys it can vouch for, so either may be absent while the other arrives. A key that never arrives means that tier never contributes, and the resolved value is whatever you set. Detaching the media clears its values; the values you set survive and apply to the next source.
 
-`poster` is the feature’s own resolved value, not the media element’s `poster` attribute. Setting one does not set the other.
+`poster` is the feature’s own resolved value, not the media component’s `poster` attribute. Setting one does not set the other.
 
 A low-resolution stand-in to show while the poster loads is not part of this feature. The [poster](../components/poster.md) renders an `<img>` you control, so give it a `background-image` and that shows until the poster itself paints over it. [Add a poster and loading placeholder](../../guides/poster.md) walks through that technique for each framework.

package/docs/reference/api/feature-source.md

@@ -2,7 +2,7 @@
 
 Media source state and actions for the player store
 
-Tracks the loaded media resource and how much of it is ready. To change the source, set `src` or `source` on the media element, which also carries type and engine configuration.
+Tracks the loaded media resource and how much of it is ready. To change the source, set `src` or `source` on the media component, which also carries type and engine configuration.
 
 ## Import
 

package/docs/reference/api/feature-text-tracks.md

@@ -6,7 +6,7 @@ Manages subtitles, captions, chapters, and thumbnail tracks.
 
 A default `kind="chapters"` track can also divide the [time slider](../components/time-slider.md) into chapter ranges and label the chapter at the current interaction position.
 
-`thumbnailsTrack` is the first `kind="metadata"` track labeled `thumbnails`, or `null` when there is none. Its `crossOrigin` reports the media element’s CORS mode, or `null` when the media is not CORS-enabled. [Thumbnail](../components/thumbnail.md) reads it to fetch sprite sheets the same way the browser fetched the track.
+`thumbnailsTrack` is the first `kind="metadata"` track labeled `thumbnails`, or `null` when there is none. Its `crossOrigin` reports the media component’s CORS mode, or `null` when the media is not CORS-enabled. [Thumbnail](../components/thumbnail.md) reads it to fetch sprite sheets the same way the browser fetched the track.
 
 ## Import
 
@@ -22,7 +22,7 @@ The `liveVideoFeatures` and `videoFeatures` [feature bundles](../../guides/prese
 
 | Property | Type | Description |
 | --- | --- | --- |
-| `textTrackList` | `MediaTextTrack[]` | All text tracks available on the media element. |
+| `textTrackList` | `MediaTextTrack[]` | All text tracks available on the media component. |
 | `subtitlesShowing` | `boolean` | Whether a captions/subtitles track is showing. |
 | `chaptersCues` | `MediaTextCue[]` | Cues from the first `kind="chapters"` track, with cue ends clamped to a finite media duration. |
 | `thumbnailsTrack` | `{ cues: MediaTextCue[]; src: string \| null; crossOrigin: 'anonymous' \| 'use-credentials' \| null } \| null` | The first thumbnails track, or `null` when there is none. |

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.0. 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/media-capabilities.md

@@ -14,7 +14,7 @@ Every guard on this page is a named export of the same package.
 
 ## Usage
 
-The player element’s `store.target` holds the media the player attached. It’s `null` until a media element inside the player registers, so read it when you need it rather than once at startup:
+The player element’s `store.target` holds the media the player attached. It’s `null` until a media component inside the player registers, so read it when you need it rather than once at startup:
 
 **index.ts**
 

package/docs/reference/api/player-store.md

@@ -45,7 +45,7 @@ Each feature links to the same entry on its reference page.
 | `setMuted` | `(muted: boolean) => boolean` | [`volumeFeature`](./feature-volume.md#volume-action-setMuted) | Set the muted state, updating the store immediately. Unmuting at volume 0 restores volume to 0.25. Returns the new muted value. |
 | `isFullscreen` | `boolean` | [`fullscreenFeature`](./feature-fullscreen.md#fullscreen-state-isFullscreen) | Whether fullscreen mode is currently active. |
 | `fullscreenAvailability` | `'available' \| 'unavailable' \| 'unsupported'` | [`fullscreenFeature`](./feature-fullscreen.md#fullscreen-state-fullscreenAvailability) | Whether fullscreen can be requested on this platform. |
-| `requestFullscreen` | `() => Promise<void>` | [`fullscreenFeature`](./feature-fullscreen.md#fullscreen-action-requestFullscreen) | Enter fullscreen mode. Tries container first, falls back to media element. |
+| `requestFullscreen` | `() => Promise<void>` | [`fullscreenFeature`](./feature-fullscreen.md#fullscreen-action-requestFullscreen) | Enter fullscreen mode. Tries container first, falls back to media component. |
 | `exitFullscreen` | `() => Promise<void>` | [`fullscreenFeature`](./feature-fullscreen.md#fullscreen-action-exitFullscreen) | Exit fullscreen mode. |
 | `userActive` | `boolean` | [`controlsFeature`](./feature-controls.md#controls-state-userActive) | Whether the user has recently interacted with the player. |
 | `controlsVisible` | `boolean` | [`controlsFeature`](./feature-controls.md#controls-state-controlsVisible) | Whether controls should be visible. |
@@ -53,7 +53,7 @@ Each feature links to the same entry on its reference page.
 | `toggleControls` | `(forceShow?: boolean) => boolean` | [`controlsFeature`](./feature-controls.md#controls-action-toggleControls) | Toggle controls visibility, or force it with `forceShow`. Returns the new `controlsVisible` value. |
 | `buffered` | `[number, number][]` | [`bufferFeature`](./feature-buffer.md#buffer-state-buffered) | Buffered time ranges as \[start, end\] tuples. |
 | `seekable` | `[number, number][]` | [`bufferFeature`](./feature-buffer.md#buffer-state-seekable) | Seekable time ranges as \[start, end\] tuples. |
-| `textTrackList` | `MediaTextTrack[]` | [`textTrackFeature`](./feature-text-tracks.md#textTrack-state-textTrackList) | All text tracks available on the media element. |
+| `textTrackList` | `MediaTextTrack[]` | [`textTrackFeature`](./feature-text-tracks.md#textTrack-state-textTrackList) | All text tracks available on the media component. |
 | `subtitlesShowing` | `boolean` | [`textTrackFeature`](./feature-text-tracks.md#textTrack-state-subtitlesShowing) | Whether a captions/subtitles track is showing. |
 | `chaptersCues` | `MediaTextCue[]` | [`textTrackFeature`](./feature-text-tracks.md#textTrack-state-chaptersCues) | Cues from the first `kind="chapters"` track, with cue ends clamped to a finite media duration. |
 | `thumbnailsTrack` | `{ cues: MediaTextCue[]; src: string \| null; crossOrigin: 'anonymous' \| 'use-credentials' \| null } \| null` | [`textTrackFeature`](./feature-text-tracks.md#textTrack-state-thumbnailsTrack) | The first thumbnails track, or `null` when there is none. |
@@ -69,7 +69,7 @@ Each feature links to the same entry on its reference page.
 | `error` | `{ code: number; message: string } \| null` | [`errorFeature`](./feature-error.md#error-state-error) | The current media error, or null if none. |
 | `dismissError` | `() => void` | [`errorFeature`](./feature-error.md#error-action-dismissError) | Dismiss the current error by clearing it. |
 | `title` | `string` | [`metadataFeature`](./feature-metadata.md#metadata-state-title) | The resolved content title. Set it through the player, not through the store. |
-| `poster` | `string` | [`metadataFeature`](./feature-metadata.md#metadata-state-poster) | The resolved poster URL, independent of the media element's own `poster`. Set it through the player, not through the store. |
+| `poster` | `string` | [`metadataFeature`](./feature-metadata.md#metadata-state-poster) | The resolved poster URL, independent of the media component's own `poster`. Set it through the player, not through the store. |
 | `currentSrc` | `string` | [`sourceFeature`](./feature-source.md#source-state-currentSrc) | Current media source URL (empty string if none). |
 | `canPlay` | `boolean` | [`sourceFeature`](./feature-source.md#source-state-canPlay) | Whether enough data is loaded to begin playback. |
 | `videoRenditionList` | `MediaVideoRendition[]` | [`qualityFeature`](./feature-quality.md#quality-state-videoRenditionList) | Video renditions available for manual quality selection. |

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.0/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.
@@ -91,7 +91,7 @@ customElements.define('my-audio-player', PlayerElement);
 
 ## Media
 
-The preset plays through a native [`<audio>`](../components/audio.md), so it registers no media element of its own. Swap it for any compatible [media element](../../guides/media-sources.md), such as [`<hls-audio>`](../components/hls-audio.md) for HLS.
+The preset plays through a native [`<audio>`](../components/audio.md), so it registers no media component of its own. Swap it for any compatible [media component](../../guides/media-sources.md), such as [`<hls-audio>`](../components/hls-audio.md) for HLS.
 
 ## Exports
 

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

@@ -2,7 +2,7 @@
 
 The background video preset — a player, feature bundle, skin, and media for ambient video with no controls
 
-`@videojs/html/background` is the preset for ambient background video with no user controls. It bundles the `<background-video-player>` element, the `backgroundFeatures` bundle it is configured with, one chrome-less skin, and the `<background-video>` media element, which autoplays, mutes, and loops. See [Presets](../../guides/presets.md) for how presets fit together and [Background video](../../guides/background-video.md) for building one.
+`@videojs/html/background` is the preset for ambient background video with no user controls. It bundles the `<background-video-player>` element, the `backgroundFeatures` bundle it is configured with, one chrome-less skin, and the `<background-video>` media component, which autoplays, mutes, and loops. See [Presets](../../guides/presets.md) for how presets fit together and [Background video](../../guides/background-video.md) for building one.
 
 ## Import
 
@@ -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.0/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.
@@ -52,7 +52,7 @@ The preset root also exports a `PlayerController` bound to the background player
 
 ## Feature bundle
 
-`backgroundFeatures` is the array of [features](../../guides/features.md) the player is configured with. The background media element handles autoplay, muting, and looping on its own:
+`backgroundFeatures` is the array of [features](../../guides/features.md) the player is configured with. The background media component handles autoplay, muting, and looping on its own:
 
 `backgroundFeatures` is currently empty, so the player's store holds no feature state or actions.
 

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

@@ -14,14 +14,14 @@ 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.0/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.
 
 ## Usage
 
-Live streams are usually HLS, so this example plays through an HLS media element instead of the preset’s native audio.
+Live streams are usually HLS, so this example plays through an HLS media component instead of the preset’s native audio.
 
 **index.html**
 
@@ -94,7 +94,7 @@ customElements.define('my-live-audio-player', PlayerElement);
 
 ## Media
 
-The preset plays through a native [`<audio>`](../components/audio.md), so it registers no media element of its own. Most browsers need a streaming [media element](../../guides/media-sources.md) to play a live source, such as [`<hls-audio>`](../components/hls-audio.md) for HLS.
+The preset plays through a native [`<audio>`](../components/audio.md), so it registers no media component of its own. Most browsers need a streaming [media component](../../guides/media-sources.md) to play a live source, such as [`<hls-audio>`](../components/hls-audio.md) for HLS.
 
 ## Exports
 

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

@@ -14,14 +14,14 @@ 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.0/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.
 
 ## Usage
 
-Live streams are usually HLS, so this example plays through an HLS media element instead of the preset’s native video.
+Live streams are usually HLS, so this example plays through an HLS media component instead of the preset’s native video.
 
 **index.html**
 
@@ -99,7 +99,7 @@ customElements.define('my-live-video-player', PlayerElement);
 
 ## Media
 
-The preset plays through a native [`<video>`](../components/video.md), so it registers no media element of its own. Most browsers need a streaming [media element](../../guides/media-sources.md) to play a live source, such as [`<hlsjs-video>`](../components/hlsjs-video.md) for HLS.
+The preset plays through a native [`<video>`](../components/video.md), so it registers no media component of its own. Most browsers need a streaming [media component](../../guides/media-sources.md) to play a live source, such as [`<hlsjs-video>`](../components/hlsjs-video.md) for HLS.
 
 ## Exports
 

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.0/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.
@@ -98,7 +98,7 @@ customElements.define('my-video-player', PlayerElement);
 
 ## Media
 
-The preset plays through a native [`<video>`](../components/video.md), so it registers no media element of its own. Swap it for any compatible [media element](../../guides/media-sources.md), such as [`<hlsjs-video>`](../components/hlsjs-video.md) for HLS.
+The preset plays through a native [`<video>`](../components/video.md), so it registers no media component of its own. Swap it for any compatible [media component](../../guides/media-sources.md), such as [`<hlsjs-video>`](../components/hlsjs-video.md) for HLS.
 
 ## Exports
 

package/docs/reference/api/resolve-adapter-type.md

@@ -14,7 +14,7 @@ Resolution is a pure string check. It doesn’t fetch the source, load an engine
 
 ## Usage
 
-Look up the media element for the result and give it the same `src`:
+Look up the media component for the result and give it the same `src`:
 
 ```ts
 import { resolveAdapterType } from '@videojs/html';
@@ -39,7 +39,7 @@ Each media module you import adds its engine to your bundle, so import the rarel
 
 ### Adapter types
 
-| Adapter type | Recognized sources | Media element |
+| Adapter type | Recognized sources | Media component |
 | --- | --- | --- |
 | `youtube` | `youtube.com`, `youtu.be`, and `youtube-nocookie.com` video and playlist URLs | `<youtube-video>` |
 | `vimeo` | `vimeo.com` and `player.vimeo.com` URLs | `<vimeo-video>` |

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/api/vjs8-legacy-options.md

@@ -12,7 +12,7 @@ videojs.options.autoplay = true;
 
 ## Video.js 10 equivalent
 
-Set attributes on `<video-player>`, `<video-skin>`, and the media element.
+Set attributes on `<video-player>`, `<video-skin>`, and the media component.
 
 See [Migrate from Video.js 8](../../guides/migrate-from-video-js-8.md) for the full setup.
 

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

@@ -10,14 +10,14 @@ The Compat skin of the audio preset provides basic controls and plain surfaces,
 import '@videojs/html/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
 <audio-player>
   <audio-compat-skin>
-    <audio src="audio.mp3"></audio>
+    <audio></audio>
   </audio-compat-skin>
 </audio-player>
 ```
@@ -26,6 +26,36 @@ The skin goes between the player and the media element. It renders its controls
 
 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
+<audio-player>
+  <audio-compat-skin class="html-audio-compat-skin-basic">
+    <audio src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/audio.m4a" crossorigin="anonymous"></audio>
+  </audio-compat-skin>
+</audio-player>
+```
+
+**index.css**
+
+```css
+.html-audio-compat-skin-basic {
+  display: block;
+  width: 100%;
+}
+```
+
+**index.ts**
+
+```ts
+import '@videojs/html/audio/player';
+import '@videojs/html/audio/compat-skin';
+```
+
 ## 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/audio-neutral-skin.md

@@ -13,17 +13,17 @@ 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.0/audio-neutral.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/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
 <audio-player>
   <audio-neutral-skin>
-    <audio src="audio.mp3"></audio>
+    <audio></audio>
   </audio-neutral-skin>
 </audio-player>
 ```
@@ -32,6 +32,36 @@ The skin goes between the player and the media element. It renders its controls
 
 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
+<audio-player>
+  <audio-neutral-skin class="html-audio-neutral-skin-basic">
+    <audio src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/audio.m4a" crossorigin="anonymous"></audio>
+  </audio-neutral-skin>
+</audio-player>
+```
+
+**index.css**
+
+```css
+.html-audio-neutral-skin-basic {
+  display: block;
+  width: 100%;
+}
+```
+
+**index.ts**
+
+```ts
+import '@videojs/html/audio/player';
+import '@videojs/html/audio/neutral-skin';
+```
+
 ## 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/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,17 +13,17 @@ 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.0/audio.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/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
 <audio-player>
   <audio-skin>
-    <audio src="audio.mp3"></audio>
+    <audio></audio>
   </audio-skin>
 </audio-player>
 ```
@@ -32,6 +32,36 @@ The skin goes between the player and the media element. It renders its controls
 
 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
+<audio-player>
+  <audio-skin class="html-audio-skin-basic">
+    <audio src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/audio.m4a" crossorigin="anonymous"></audio>
+  </audio-skin>
+</audio-player>
+```
+
+**index.css**
+
+```css
+.html-audio-skin-basic {
+  display: block;
+  width: 100%;
+}
+```
+
+**index.ts**
+
+```ts
+import '@videojs/html/audio/player';
+import '@videojs/html/audio/skin';
+```
+
 ## 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/audio.md

@@ -4,7 +4,7 @@ Native audio playback that can provide media to a Video.js player
 
 ## Import
 
-The media element is the browser’s native `<audio>`. Import the audio player registration when it should provide media to Video.js:
+The media component is the browser’s native `<audio>`. Import the audio player registration when it should provide media to Video.js:
 
 ```ts
 import '@videojs/html/audio/player';