@videojs/html 10.0.0-rc.5 → 10.0.1

package/docs/guides/v10-roadmap.md

@@ -1,11 +1,18 @@
 # v10 Roadmap
 
-Timeline and milestones for Video.js v10 rebuild and the future of v8
+Where Video.js v10 stands, what comes after 10.0, and the support plan for Video.js 8
 
 Video.js v10 is a complete rebuild from the ground up, designed to be more modular, framework-flexible, and aligned with modern web development practices.
 
 ## Current versions
 
+### Version 10
+
+- 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
+
 ### Version 8
 
 - Maintained with bug fixes and critical security patches only
@@ -17,72 +24,30 @@ Video.js v10 is a complete rebuild from the ground up, designed to be more modul
 
 - Reserved only for urgent API-breaking changes that cannot be avoided
 
-## March 2026: v10 Beta Release
-
-Wider testing release to the community.
-
-### Core feature parity target
-
-- Basic control set (play, pause, seek, volume, fullscreen)
-- Adaptive streaming support via existing community engines
-- No plugin migrations yet, without plugin author contribution
-
-### What to expect
-
-- Close to stable, but API changes are still possible
-- Intended for experimental adoption in real-world projects
-- Developers encouraged to follow the [installation guide](./installation.md), try it out, and report issues
-
-## September 2026: v10 Release Candidate
-
-Feature-complete release ahead of GA.
-
-### What to expect
-
-- Close to stable. Remaining API changes are driven by feedback on the release candidate
-- Intended for adoption in real-world projects
-- Migration guides and reference documentation ready for review
+## After 10.0
 
-## Fall 2026: v10 GA Release
+These land in 10.x minor releases as they’re ready.
 
-**Stable release** of Video.js v10
+### Feature parity with Video.js 8 contrib
 
-### Feature targets
-
-- Core feature parity with v8 in terms of fundamentals
-- Feature parity with Media Chrome, Vidstack, Plyr, and Mux Player
-- Community encouraged to begin full reintegration projects, following the 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)
-- Plugin ecosystem migration begins in earnest
+- Ads integration
+- Analytics support
+- Plugin ecosystem migration, dependent on community contributions
 
 ### Engine development focus
 
 - Lightweight adaptive streaming
 - MoQ (Media over QUIC) support
 
-## Late-2026: Feature parity with v8 Contrib
-
-**Extended feature parity** with Video.js “contrib” plugins:
-
-- Ads integration
-- Analytics support
-- Further community plugin migration dependent on contributions
-
-## End-of-life plan for Video.js v8
-
-### Mid-2026
-
-- v8/v9 moved to “video.js-legacy” repository and package
-- Documentation preserved at [legacy.videojs.org](https://legacy.videojs.org)
-- Hosted CDN copies will remain available
-
-### 2027 and beyond
+## Support plan for Video.js 8
 
-- Security patches only
-- Community contributions de-prioritized
+- Documentation stays at [legacy.videojs.org](https://legacy.videojs.org)
+- Hosted CDN copies remain available
+- From 2027, security patches only, and community contributions are de-prioritized
 
 ---
 
-**Want to contribute?** Check out the [v10 repository on GitHub](https://github.com/videojs/v10) to get involved in the rebuild
+**Want to contribute?** Check out the [v10 repository on GitHub](https://github.com/videojs/v10) to get involved.
 
 ## Related pages
 

package/docs/llms.txt

@@ -1,6 +1,6 @@
 # Video.js v10 — HTML Documentation
 
-> Bundled with `@videojs/html` v10.0.0-rc.5. Links are relative paths to files in this directory.
+> Bundled with `@videojs/html` v10.0.1. 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.
 
@@ -31,7 +31,7 @@ Install Video.js, customize a skin, understand its main pieces, check browser an
 - [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): Timeline and milestones for Video.js v10 rebuild and the future of v8
+- [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)
 
 ### 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

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-rc.5. 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.0.1. 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-rc.5/audio.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/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-rc.5/background.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/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-rc.5/live-audio.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/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-rc.5/live-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/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-rc.5/video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/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-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-rc.5/audio-neutral.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/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-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-rc.5/audio.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/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';