@videojs/html 10.0.0 → 10.0.1

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.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/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/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/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/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/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/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';

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

@@ -13,17 +13,17 @@ import '@videojs/html/background/skin';
 The import registers the skin and every UI element it composes. The [CDN](../../guides/cdn.md) player bundle registers this skin together with its player:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0/background.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/background.js"></script>
 ```
 
-## Usage
+## Anatomy
 
-The skin goes between the player and the media element. It sizes the ambient video and renders no visible controls.
+The skin goes between the player and the media component. It sizes the ambient video and renders no visible controls.
 
 ```html
 <background-video-player>
   <background-video-skin>
-    <background-video src="video.mp4"></background-video>
+    <background-video></background-video>
   </background-video-skin>
 </background-video-player>
 ```
@@ -32,6 +32,38 @@ The skin goes between the player and the media element. It sizes the ambient vid
 
 Packaged skins style themselves and expose a small set of public CSS custom properties. Everything else inside the skin is private and may change between releases. [Customize skins](../../guides/customize-skins.md#style-a-packaged-skin) documents the properties.
 
+## Examples
+
+### Basic Usage
+
+**index.html**
+
+```html
+<background-video-player>
+  <background-video-skin class="html-background-video-skin-basic">
+    <background-video src="https://stream.mux.com/601n4w1fq88NJiVpzvrQQeQfNnnjjfKMIN7dCGAEarTs/highest.mp4"></background-video>
+  </background-video-skin>
+</background-video-player>
+```
+
+**index.css**
+
+```css
+.html-background-video-skin-basic {
+  display: block;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+}
+```
+
+**index.ts**
+
+```ts
+import '@videojs/html/background/player';
+import '@videojs/html/background/skin';
+import '@videojs/html/background/video';
+```
+
 ## Own the UI
 
 Owning the UI means keeping its components, layout, styles, and interactions as local files you can change. The [Shadcn installation guide](../../guides/installation-shadcn.md) adds that source for supported skins. The registry does not provide background video skin source because it has no control UI. Follow [Add a background video](../../guides/background-video.md) to compose the media directly, then add only the UI your use case needs.

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

@@ -17,7 +17,7 @@ import '@videojs/html/media/background-video';
 Or load it from the [CDN](../../guides/cdn.md):
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0/media/background-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/media/background-video.js"></script>
 ```
 
 ## Examples

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

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

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

@@ -17,7 +17,7 @@ import '@videojs/html/media/cloudflare-video';
 Or load it from the [CDN](../../guides/cdn.md):
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0/media/cloudflare-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/media/cloudflare-video.js"></script>
 ```
 
 ## Load a source

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

@@ -21,7 +21,7 @@ import '@videojs/html/media/dash-video';
 Or load it from the [CDN](../../guides/cdn.md):
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0/media/dash-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/media/dash-video.js"></script>
 ```
 
 ## Examples

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

@@ -17,7 +17,7 @@ import '@videojs/html/extensions/google-cast';
 Or load it from the [CDN](../../guides/cdn.md):
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0/extensions/google-cast.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/extensions/google-cast.js"></script>
 ```
 
 ## Anatomy

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

@@ -13,7 +13,7 @@ import '@videojs/html/media/hls-audio';
 Or load it from the [CDN](../../guides/cdn.md):
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0/media/hls-audio.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/media/hls-audio.js"></script>
 ```
 
 ## Examples

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

@@ -15,7 +15,7 @@ import '@videojs/html/media/hls-background-video';
 Or load it from the [CDN](../../guides/cdn.md):
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0/media/hls-background-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/media/hls-background-video.js"></script>
 ```
 
 ## Source behavior

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

@@ -13,7 +13,7 @@ import '@videojs/html/media/hls-video';
 Or load it from the [CDN](../../guides/cdn.md):
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0/media/hls-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/media/hls-video.js"></script>
 ```
 
 ## Examples

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

@@ -17,7 +17,7 @@ import '@videojs/html/media/hlsjs-video';
 Or load it from the [CDN](../../guides/cdn.md):
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0/media/hlsjs-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/media/hlsjs-video.js"></script>
 ```
 
 ## Examples

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

@@ -10,24 +10,55 @@ The Compat skin of the live audio preset provides basic controls and plain surfa
 import '@videojs/html/live-audio/compat-skin';
 ```
 
-## Usage
+## Anatomy
 
-The skin goes between the player and the media element. It renders its controls around the media.
+The skin goes between the player and the media component. It renders its controls around the media.
 
 ```html
 <live-audio-player>
   <live-audio-compat-skin>
-    <mux-audio src="live.m3u8"></mux-audio>
+    <mux-audio></mux-audio>
   </live-audio-compat-skin>
 </live-audio-player>
 ```
 
-The examples use the [Mux audio element](./mux-audio.md): a plain `<audio>` can’t play HLS in most browsers, and this element reports the live playback state the skin’s Live button needs. See [Play live streams](../../guides/live-streams.md).
+This uses the [Mux audio element](./mux-audio.md): a plain `<audio>` can’t play HLS in most browsers, and this element reports the live playback state the skin’s Live button needs. See [Play live streams](../../guides/live-streams.md).
 
 ## Styling
 
 Packaged skins style themselves and expose a small set of public CSS custom properties. Everything else inside the skin is private and may change between releases. [Customize skins](../../guides/customize-skins.md#style-a-packaged-skin) documents the properties. For deeper changes, the Video.js registry provides the skin files.
 
+## Examples
+
+### Basic Usage
+
+**index.html**
+
+```html
+<live-audio-player>
+  <live-audio-compat-skin class="html-live-audio-compat-skin-basic">
+    <mux-audio src="https://stream.mux.com/v69RSHhFelSm4701snP22dYz2jICy4E4FUyk02rW4gxRM.m3u8" crossorigin="anonymous"></mux-audio>
+  </live-audio-compat-skin>
+</live-audio-player>
+```
+
+**index.css**
+
+```css
+.html-live-audio-compat-skin-basic {
+  display: block;
+  width: 100%;
+}
+```
+
+**index.ts**
+
+```ts
+import '@videojs/html/live-audio/player';
+import '@videojs/html/live-audio/compat-skin';
+import '@videojs/html/media/mux-audio';
+```
+
 ## Own the UI
 
 Packaged skins keep their controls and layout inside Video.js. When you need to add, remove, rearrange, or deeply restyle controls, use Shadcn to add the skin source to your project. Its components, layout, styles, and interactions become local files you can change.