@videojs/html 10.1.0 → 10.3.0

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.1.0/media/hlsjs-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.3.0/media/hlsjs-video.js"></script>
 ```
 
 ## Examples
@@ -81,10 +81,12 @@ These Video.js-specific attributes configure media behavior:
 | `contentData` | `MediaContentData \| undefined` | — | Read-only. |
 | `disableRemotePlayback` | `unknown` | `false` | Whether remote playback (AirPlay, Google Cast) is disabled for this media. |
 | `engine` | `Hls \| null` | — | Read-only. Underlying playback engine — the hls.js `Hls` instance when playing via MSE, otherwise `null`. An advanced escape hatch for direct engine access; normal playback is driven through this element's own properties and methods. |
+| `engineName` | `string \| undefined` | — | Read-only. Engine this media is playing through, reported to analytics such as Mux Data: `hlsjs` via MSE, `browser` for native HLS, or `undefined` until a source loads. Read from the instance because the engine is picked per source. |
 | `error` | `MediaError \| null` | — | Read-only. |
 | `isFullscreen` | `boolean` | — | Read-only. |
 | `isPictureInPicture` | `boolean` | — | Read-only. |
 | `liveEdgeStart` | `number` | — | Read-only. Presentation time marking the start of the Live Edge Window. Derived from the delegate on every read; `NaN` when no delegate is attached or the stream is not live. |
+| `playbackRateRange` | `{ min: number; max: number } \| undefined` | — | Read-only. The target's narrower rate range, when it reports one; native media accept the browser's range. |
 | `preload` | `MediaPreloadType` | `'metadata'` | Preload type (`'none'` / `'metadata'` / `'auto'`). |
 | `source` | `{ src?: string; type?: 'application/vnd.apple.mpegurl' \| 'video/mp4' \| string & {}; preferPlayback?: 'mse' \| 'native' \| string & {}; drm?: Partial<Record<KeySystem, DrmSystemConfig>>; maxAutoResolution?: '270p' \| '360p' \| '480p' \| '540p' \| '720p' \| '1080p' \| '1440p' \| '2160p'; capRenditionToPlayerSize?: boolean; minAutoResolution?: '270p' \| '360p' \| '480p' \| '540p' \| '720p' \| '1080p' \| '1440p' \| '2160p'; engine?: HlsEngineConfig } \| null` | `null` | Structured source: what to play (`src`, an optional `type`) plus how to play it (`preferPlayback`, `engine`). Assigning it derives `src`. Sources are compared structurally, so reassigning an equivalent object is a no-op. Only a change to the engine options (or to the resolved content type) recreates the playback engine. |
 | `src` | `string` | `''` | Media source URL. Assigning it replaces the identity half of `source` and leaves `type` and the engine options intact, so changing the URL never disturbs engine configuration. |

package/docs/reference/components/hotkey.md

@@ -27,7 +27,7 @@ Key patterns are case-insensitive and may use:
 - `Mod` for `Meta` on macOS and `Ctrl` elsewhere.
 - The special `0-9` range for digit-based seeking.
 
-Choose an `action` from the API reference below. Pass `value` as seconds for `seekStep`, a volume delta such as `0.05` or `-0.05` for `volumeStep`, or a percentage from 0 to 100 for `seekToPercent`. When omitted, `seekStep` defaults to 10 seconds and `volumeStep` defaults to five percentage points; `ArrowLeft`, `j`, and `ArrowDown` use the negative step. When `value` is omitted from `seekToPercent` with `keys="0-9"`, the pressed digit supplies the percentage.
+Choose an `action` from the API reference below. Pass `value` as seconds for `seekStep`, a volume delta such as `0.05` or `-0.05` for `volumeStep`, a percentage from 0 to 100 for `seekToPercent`, or a rate change such as `0.1` for `speedUp` and `speedDown`. When omitted, `seekStep` defaults to 10 seconds and `volumeStep` defaults to five percentage points; `ArrowLeft`, `j`, and `ArrowDown` use the negative step. When `value` is omitted from `seekToPercent` with `keys="0-9"`, the pressed digit supplies the percentage. When it is omitted from `speedUp` and `speedDown`, they move to the next faster or slower of the player’s playback rates.
 
 Toggle actions ignore held-key repeats. Step, rate, and percentage actions may repeat. A matched shortcut prevents the browser’s default behavior. Unmodified shortcuts are ignored in editable fields, and Space or Enter still activates focused buttons, links, and sliders normally.
 
@@ -127,4 +127,4 @@ import '@videojs/html/ui/play-button';
 | `keys` (required) | `string` | — | Key pattern to match, such as `Space`, `ArrowRight`, or `Mod+k`. |
 | `disabled` | `boolean` | — | Whether the hotkey is disabled. |
 | `target` | `'player' \| 'document'` | — | Whether to listen on the player container or the document. |
-| `value` | `number` | — | Numeric value passed to actions such as `seekStep`, `volumeStep`, and `seekToPercent`. Arrow-key seek and volume actions use their shared input-action step when omitted. |
+| `value` | `number` | — | Numeric value passed to actions such as `seekStep`, `volumeStep`, `seekToPercent`, `speedUp`, and `speedDown`. Arrow-key seek and volume actions use their shared input-action step when omitted, and the speed actions move through the player's playback rates. |

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

@@ -1,8 +1,8 @@
 # live-audio-compat-skin
 
-A live audio skin designed for broader browser compatibility
+The live audio preset's plain, unbranded skin, a polished step above native controls
 
-The Compat skin of the live audio preset provides basic controls and plain surfaces, with broader browser compatibility as its design goal. It shows a Live button in place of time controls. See [Customize skins](../../guides/customize-skins.md) to install and edit its source.
+The Compat skin of the live audio preset: the same core controls with plain, unbranded surfaces that avoid newer visual effects such as backdrop blur. It shows a Live button in place of time controls and adds captions and AirPlay buttons that the default live audio skin leaves out. The preset also provides [LiveAudioSkin](./live-audio-skin.md), [NeutralLiveAudioSkin](./live-audio-neutral-skin.md), and [ScaffoldLiveAudioSkin](./live-audio-scaffold-skin.md). See [Skins](../../guides/skins.md#choose-a-skin) to choose between them and [Customize skins](../../guides/customize-skins.md) to install and edit its source.
 
 ## Import
 
@@ -10,6 +10,12 @@ The Compat skin of the live audio preset provides basic controls and plain surfa
 import '@videojs/html/live-audio/compat-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.3.0/live-audio-compat.js"></script>
+```
+
 ## Anatomy
 
 The skin goes between the player and the media component. It renders its controls around the media.

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

@@ -2,7 +2,7 @@
 
 The live audio preset's visually lighter skin, closer to a classic control bar
 
-The neutral skin of the live audio preset: the same player and the same controls in a visually lighter design, closer to a classic control bar. Like the default skin, it shows a Live button in place of time controls. [LiveAudioSkin](./live-audio-skin.md) is the same preset’s other variant. See [Skins](../../guides/skins.md) for how packaged skins work and [Presets](../../guides/presets.md) for what the live audio preset ships.
+The neutral skin of the live audio preset: the same player and the same controls in a visually lighter design, closer to a classic control bar. Like the default skin, it shows a Live button in place of time controls. The preset also provides [LiveAudioSkin](./live-audio-skin.md), [CompatLiveAudioSkin](./live-audio-compat-skin.md), and [ScaffoldLiveAudioSkin](./live-audio-scaffold-skin.md). See [Skins](../../guides/skins.md#choose-a-skin) to choose between them and [Presets](../../guides/presets.md) for what the live audio preset ships.
 
 ## Import
 
@@ -13,7 +13,7 @@ import '@videojs/html/live-audio/neutral-skin';
 The import registers the skin and every UI element it composes. The [CDN](../../guides/cdn.md) player bundle registers this skin together with its player:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/live-audio-neutral.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.3.0/live-audio-neutral.js"></script>
 ```
 
 ## Anatomy

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

@@ -2,7 +2,7 @@
 
 A live audio skin with minimal styling for custom skins
 
-The Scaffold skin of the live audio preset provides functional controls with minimal styling and no transitions. It is a starting point for a custom skin, intended to be restyled before use. It shows a Live button in place of time controls. See [Customize skins](../../guides/customize-skins.md) to install and edit its source.
+The Scaffold skin of the live audio preset provides functional controls with minimal styling and no transitions. It is a starting point for a custom skin, intended to be restyled before use. It shows a Live button in place of time controls. The preset also provides [LiveAudioSkin](./live-audio-skin.md), [NeutralLiveAudioSkin](./live-audio-neutral-skin.md), and [CompatLiveAudioSkin](./live-audio-compat-skin.md). See [Skins](../../guides/skins.md#choose-a-skin) to choose between them and [Customize skins](../../guides/customize-skins.md) to install and edit its source.
 
 ## Import
 
@@ -13,7 +13,7 @@ import '@videojs/html/live-audio/scaffold-skin';
 The import registers the skin and every UI element it composes. The [CDN](../../guides/cdn.md) player bundle registers this skin together with its player:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/live-audio-scaffold.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.3.0/live-audio-scaffold.js"></script>
 ```
 
 ## Usage

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

@@ -2,7 +2,7 @@
 
 The live audio preset's default skin, which swaps time controls for a Live button
 
-The default skin of the live audio preset: the audio layout with the time slider and time displays swapped for a Live button. [NeutralLiveAudioSkin](./live-audio-neutral-skin.md) is the same preset’s other variant. See [Skins](../../guides/skins.md) for how packaged skins work and [Presets](../../guides/presets.md) for what the live audio preset ships.
+The default skin of the live audio preset: the audio layout with the time slider and time displays swapped for a Live button. The preset also provides [NeutralLiveAudioSkin](./live-audio-neutral-skin.md), [CompatLiveAudioSkin](./live-audio-compat-skin.md), and [ScaffoldLiveAudioSkin](./live-audio-scaffold-skin.md). See [Skins](../../guides/skins.md#choose-a-skin) to choose between them and [Presets](../../guides/presets.md) for what the live audio preset ships.
 
 ## Import
 
@@ -13,7 +13,7 @@ import '@videojs/html/live-audio/skin';
 The import registers the skin and every UI element it composes. The [CDN](../../guides/cdn.md) player bundle registers this skin together with its player:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/live-audio.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.3.0/live-audio.js"></script>
 ```
 
 ## Anatomy

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

@@ -1,8 +1,8 @@
 # live-video-compat-skin
 
-A live video skin designed for broader browser compatibility
+The live video preset's plain, unbranded skin, a polished step above native controls
 
-The Compat skin of the live video preset provides basic controls and plain surfaces, with broader browser compatibility as its design goal. It shows a Live button in place of time controls. See [Customize skins](../../guides/customize-skins.md) to install and edit its source.
+The Compat skin of the live video preset: the same core controls with plain, unbranded surfaces that avoid newer visual effects such as backdrop blur. It puts a large play button in the center, fullscreen, picture-in-picture, Cast, and AirPlay in a top corner, and a Live button in place of time controls. The preset also provides [LiveVideoSkin](./live-video-skin.md), [NeutralLiveVideoSkin](./live-video-neutral-skin.md), and [ScaffoldLiveVideoSkin](./live-video-scaffold-skin.md). See [Skins](../../guides/skins.md#choose-a-skin) to choose between them and [Customize skins](../../guides/customize-skins.md) to install and edit its source.
 
 ## Import
 
@@ -10,6 +10,12 @@ The Compat skin of the live video preset provides basic controls and plain surfa
 import '@videojs/html/live-video/compat-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.3.0/live-video-compat.js"></script>
+```
+
 ## Anatomy
 
 The skin goes between the player and the media component. It renders its controls around the media.

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

@@ -2,7 +2,7 @@
 
 The live video preset's visually lighter skin, closer to a classic control bar
 
-The neutral skin of the live video preset: the same player and the same controls in a visually lighter design, closer to a classic control bar. Like the default skin, it shows a Live button in place of time controls. [LiveVideoSkin](./live-video-skin.md) is the same preset’s other variant. See [Skins](../../guides/skins.md) for how packaged skins work and [Presets](../../guides/presets.md) for what the live video preset ships.
+The neutral skin of the live video preset: the same player and the same controls in a visually lighter design, closer to a classic control bar. Like the default skin, it shows a Live button in place of time controls. The preset also provides [LiveVideoSkin](./live-video-skin.md), [CompatLiveVideoSkin](./live-video-compat-skin.md), and [ScaffoldLiveVideoSkin](./live-video-scaffold-skin.md). See [Skins](../../guides/skins.md#choose-a-skin) to choose between them and [Presets](../../guides/presets.md) for what the live video preset ships.
 
 ## Import
 
@@ -13,7 +13,7 @@ import '@videojs/html/live-video/neutral-skin';
 The import registers the skin and every UI element it composes. The [CDN](../../guides/cdn.md) player bundle registers this skin together with its player:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/live-video-neutral.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.3.0/live-video-neutral.js"></script>
 ```
 
 ## Anatomy

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

@@ -2,7 +2,7 @@
 
 A live video skin with minimal styling for custom skins
 
-The Scaffold skin of the live video preset provides functional controls with minimal styling and no transitions. It is a starting point for a custom skin, intended to be restyled before use. It shows a Live button in place of time controls. See [Customize skins](../../guides/customize-skins.md) to install and edit its source.
+The Scaffold skin of the live video preset provides functional controls with minimal styling and no transitions. It is a starting point for a custom skin, intended to be restyled before use. It shows a Live button in place of time controls. The preset also provides [LiveVideoSkin](./live-video-skin.md), [NeutralLiveVideoSkin](./live-video-neutral-skin.md), and [CompatLiveVideoSkin](./live-video-compat-skin.md). See [Skins](../../guides/skins.md#choose-a-skin) to choose between them and [Customize skins](../../guides/customize-skins.md) to install and edit its source.
 
 ## Import
 
@@ -13,7 +13,7 @@ import '@videojs/html/live-video/scaffold-skin';
 The import registers the skin and every UI element it composes. The [CDN](../../guides/cdn.md) player bundle registers this skin together with its player:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/live-video-scaffold.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.3.0/live-video-scaffold.js"></script>
 ```
 
 ## Usage

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

@@ -2,7 +2,7 @@
 
 The live video preset's default skin, which swaps time controls for a Live button
 
-The default skin of the live video preset: the video layout with the time slider and time displays swapped for a Live button. [NeutralLiveVideoSkin](./live-video-neutral-skin.md) is the same preset’s other variant. See [Skins](../../guides/skins.md) for how packaged skins work and [Presets](../../guides/presets.md) for what the live video preset ships.
+The default skin of the live video preset: the video layout with the time slider and time displays swapped for a Live button. The preset also provides [NeutralLiveVideoSkin](./live-video-neutral-skin.md), [CompatLiveVideoSkin](./live-video-compat-skin.md), and [ScaffoldLiveVideoSkin](./live-video-scaffold-skin.md). See [Skins](../../guides/skins.md#choose-a-skin) to choose between them and [Presets](../../guides/presets.md) for what the live video preset ships.
 
 ## Import
 
@@ -13,7 +13,7 @@ import '@videojs/html/live-video/skin';
 The import registers the skin and every UI element it composes. The [CDN](../../guides/cdn.md) player bundle registers this skin together with its player:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/live-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.3.0/live-video.js"></script>
 ```
 
 ## Anatomy

package/docs/reference/components/llms.txt

@@ -1,6 +1,6 @@
 # Video.js v10 — HTML Components
 
-> API reference for skins, media components, extensions, and interface components. Bundled with `@videojs/html` v10.1.0. Links are relative paths to files in this directory.
+> API reference for skins, media components, extensions, and interface components. Bundled with `@videojs/html` v10.3.0. Links are relative paths to files in this directory.
 
 ## Layout
 
@@ -16,19 +16,19 @@ API reference for the packaged skins each preset ships.
 
 - [video-skin](./video-skin.md): The video preset's default skin with the modern, frosted look
 - [video-neutral-skin](./video-neutral-skin.md): The video preset's visually lighter skin, closer to a classic control bar
-- [video-compat-skin](./video-compat-skin.md): A video skin designed for broader browser compatibility
+- [video-compat-skin](./video-compat-skin.md): The video preset's plain, unbranded skin, a polished step above native controls
 - [video-scaffold-skin](./video-scaffold-skin.md): A video skin with minimal styling for custom skins
 - [audio-skin](./audio-skin.md): The audio preset's default skin with the modern, frosted look
 - [audio-neutral-skin](./audio-neutral-skin.md): The audio preset's visually lighter skin, closer to a classic control bar
-- [audio-compat-skin](./audio-compat-skin.md): An audio skin designed for broader browser compatibility
+- [audio-compat-skin](./audio-compat-skin.md): The audio preset's plain, unbranded skin, a polished step above native controls
 - [audio-scaffold-skin](./audio-scaffold-skin.md): An audio skin with minimal styling for custom skins
 - [live-video-skin](./live-video-skin.md): The live video preset's default skin, which swaps time controls for a Live button
 - [live-video-neutral-skin](./live-video-neutral-skin.md): The live video preset's visually lighter skin, closer to a classic control bar
-- [live-video-compat-skin](./live-video-compat-skin.md): A live video skin designed for broader browser compatibility
+- [live-video-compat-skin](./live-video-compat-skin.md): The live video preset's plain, unbranded skin, a polished step above native controls
 - [live-video-scaffold-skin](./live-video-scaffold-skin.md): A live video skin with minimal styling for custom skins
 - [live-audio-skin](./live-audio-skin.md): The live audio preset's default skin, which swaps time controls for a Live button
 - [live-audio-neutral-skin](./live-audio-neutral-skin.md): The live audio preset's visually lighter skin, closer to a classic control bar
-- [live-audio-compat-skin](./live-audio-compat-skin.md): A live audio skin designed for broader browser compatibility
+- [live-audio-compat-skin](./live-audio-compat-skin.md): The live audio preset's plain, unbranded skin, a polished step above native controls
 - [live-audio-scaffold-skin](./live-audio-scaffold-skin.md): A live audio skin with minimal styling for custom skins
 - [background-video-skin](./background-video-skin.md): The background preset's chrome-less skin for ambient video
 
@@ -39,17 +39,20 @@ API reference for media components that handle streaming protocols and playback.
 - [audio](./audio.md): Native audio playback that can provide media to a Video.js player
 - [background-video](./background-video.md): Decorative background video element with automatic muting and looping
 - [cloudflare-video](./cloudflare-video.md): Video component that plays Cloudflare Stream videos through the Stream player
+- [dailymotion-video](./dailymotion-video.md): Video component that plays Dailymotion videos through a Dailymotion player configuration
 - [dash-video](./dash-video.md): DASH video element powered by dash.js for adaptive bitrate streaming
 - [hls-audio](./hls-audio.md): Audio-only HLS element that plays the audio rendition of an HLS stream
 - [hls-background-video](./hls-background-video.md): HLS background video without controls, audio, captions, or adaptive quality
 - [hls-video](./hls-video.md): Lightweight HLS video element with minimal bundle size
 - [hlsjs-video](./hlsjs-video.md): HLS video element powered by hls.js for adaptive bitrate streaming
+- [mixcloud-audio](./mixcloud-audio.md): Audio component that plays Mixcloud shows through the Mixcloud Widget
 - [mux-audio](./mux-audio.md): Audio element for Mux-hosted HLS streams
 - [mux-background-video](./mux-background-video.md): Mux-specific name for the HLS background video component
 - [mux-video](./mux-video.md): Video element for Mux-hosted HLS streams
 - [native-hls-video](./native-hls-video.md): HLS video element using the browser's built-in HLS support
 - [playerjs-video](./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](./shaka-video.md): Video element powered by Shaka Player for DASH, HLS, and progressive playback with DRM
+- [soundcloud-audio](./soundcloud-audio.md): Audio component that plays SoundCloud tracks and sets through the SoundCloud Widget
 - [spotify-audio](./spotify-audio.md): Audio component that plays Spotify tracks, episodes, playlists, and shows through the Spotify embed
 - [tiktok-video](./tiktok-video.md): Video component that plays TikTok videos through the TikTok embed player
 - [twitch-video](./twitch-video.md): Video component that plays Twitch videos and live channels through the Twitch embed player
@@ -62,6 +65,7 @@ API reference for media components that handle streaming protocols and playback.
 
 API reference for extensions that connect external services to the player.
 
+- [google-analytics](./google-analytics.md): Options for the Google Analytics 4 extension that tracks video engagement and playback events
 - [google-cast](./google-cast.md): Options for the Google Cast extension that configures the receiver and load request
 - [mux-data](./mux-data.md): Options for the Mux Data extension that monitors playback quality
 

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

@@ -0,0 +1,203 @@
+# mixcloud-audio
+
+Audio component that plays Mixcloud shows through the Mixcloud Widget
+
+The [Mixcloud Widget](https://www.mixcloud.com/developers/widget/) plays Mixcloud shows. This component drives the widget and reports its state like a native `<audio>` element, so a [player skin](../../guides/skins.md) can control it.
+
+## Import
+
+```bash
+pnpm add @videojs/mixcloud-audio
+```
+
+```ts
+import '@videojs/html/media/mixcloud-audio';
+```
+
+Or load it from the [CDN](../../guides/cdn.md):
+
+```html
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.3.0/media/mixcloud-audio.js"></script>
+```
+
+## Load a source
+
+`src` takes either of these Mixcloud URLs:
+
+- A show: `mixcloud.com/<user>/<show>/`
+- A widget embed URL with its widget parameters, as Mixcloud’s embed code gives it: `www.mixcloud.com/widget/iframe/?feed=...`
+
+`www.` and `m.` links work too. Profiles, playlists, and other pages that list shows are not supported.
+
+```html
+<mixcloud-audio src="https://www.mixcloud.com/spartacus/lambiance/"></mixcloud-audio>
+```
+
+## Controls
+
+The widget is the only UI Mixcloud offers, so `controls` decides whether the component is visible at all. Without `controls`, the component hides itself and plays as an invisible transport: a hidden iframe still loads and plays, so a [player skin](../../guides/skins.md) drives playback while the widget takes no room on the page.
+
+```html
+<audio-player>
+  <audio-skin>
+    <mixcloud-audio src="https://www.mixcloud.com/spartacus/lambiance/"></mixcloud-audio>
+  </audio-skin>
+</audio-player>
+```
+
+With `controls`, the component shows the widget, and the audio skin draws its controls below it, so the two do not overlap. Anything the listener does in the widget shows in the skin: play, pause, and seek. The widget is also the part of the page that credits the show and links back to it on Mixcloud (see [Mixcloud’s terms of use](#mixclouds-terms-of-use)).
+
+```html
+<mixcloud-audio src="https://www.mixcloud.com/spartacus/lambiance/" controls></mixcloud-audio>
+```
+
+With `controls`, the component is 120 pixels tall by default, Mixcloud’s classic layout. Set a height to change it. With [widget parameters](#widget-parameters), `mini: true` selects the mini layout, which needs 60 pixels, and `hide_cover: false` selects the picture layout, a large cover that needs about 400 pixels. The widget hides the Mixcloud logo when it is narrower than 560 pixels.
+
+## Widget parameters
+
+By default, the component sets `hide_cover`, so the widget does not use its picture layout. Change it, or set `mini`, `hide_artwork`, `hide_tracklist`, or `light`, under `source.engine.mixcloud`, spelled as Mixcloud spells them:
+
+```ts
+const audio = document.querySelector('mixcloud-audio');
+audio.source = {
+  src: 'https://www.mixcloud.com/spartacus/lambiance/',
+  engine: { mixcloud: { light: true, hide_artwork: true } },
+};
+```
+
+Without JavaScript, put the parameters on a widget embed URL instead:
+
+```html
+<mixcloud-audio
+  src="https://www.mixcloud.com/widget/iframe/?feed=%2Fspartacus%2Flambiance%2F&light=1&hide_artwork=1"
+></mixcloud-audio>
+```
+
+Engine options win over the parameters of a widget embed URL, which win over the defaults. Set an option to `null` to drop a default. The widget applies `mini`, `hide_cover`, `hide_artwork`, `hide_tracklist`, and `light` without reloading the show. Other options reload it.
+
+`light` is the only theme option: Mixcloud offers no other colors. The widget has no start time parameter, so it ignores `start_time`. Set `currentTime` instead.
+
+## Behavior
+
+- `play()` asks the widget to play. Browsers apply their autoplay policy to the widget as they do to any embed, so a play without a user gesture can be refused. Then the widget reports nothing, and the media stays paused.
+- `autoplay` starts playback once the widget is ready, after the volume applies. The widget’s own `autoplay` parameter does the same and is never written to the widget URL.
+- The widget loads from `player-widget.mixcloud.com`, the host that Mixcloud’s embed URL redirects to. A frame that redirects to another host loses the `autoplay` permission of the page, and then the widget cannot start playback from the skin.
+- Seeking uses whole seconds, as the widget does. The widget ignores a seek before the show first plays, so the component keeps that seek and applies it when playback starts.
+- Mixcloud limits seeks and replays for listeners without a Mixcloud subscription: 6 fast-forwards and 6 rewinds per show in a rolling 60-minute period, and 4 replays of a show in a rolling 14-day period (see [Mixcloud’s help center](https://help.mixcloud.com/hc/en-us/articles/360004054059-Why-are-there-limits-for-rewinds-and-fast-forwards)). When the widget refuses a seek, `currentTime` goes back to the position of the widget, and `seeked` fires.
+- `loop` plays the show again from the start when it ends.
+- Volume and mute both work. The widget has no separate mute, so muting sets its volume to `0`, and unmuting restores the previous level.
+- `buffered` is always empty, because the widget does not report how much of the show it has loaded.
+- The widget does not support playback rate, picture-in-picture, fullscreen, or text tracks, so the component offers none of them, and a player skin hides those controls.
+- `preload`, `playsinline`, and `poster` are accepted for parity with `<audio>` but have no effect.
+- A URL that is not a Mixcloud show reports a `MEDIA_ERR_SRC_NOT_SUPPORTED` error, and so does a show the widget cannot find, such as a private or removed show. A show whose audio the widget does not load within 15 seconds reports a `MEDIA_ERR_NETWORK` error. An error the widget reports before playback starts is a `MEDIA_ERR_SRC_NOT_SUPPORTED` error, and an error during playback is a `MEDIA_ERR_NETWORK` error.
+
+## Mixcloud’s terms of use
+
+The Mixcloud widget is subject to Mixcloud’s own terms. Before you use this component, read the [Mixcloud Terms of Use](https://www.mixcloud.com/terms/) and the [Widget documentation](https://www.mixcloud.com/developers/widget/) to learn where and how you can use the widget. To keep the widget visible on the page, set `controls`.
+
+## Privacy
+
+The widget is subject to Mixcloud’s own privacy policy. Read the [Mixcloud Privacy Policy](https://www.mixcloud.com/privacy/) to learn what the widget collects from visitors and what you must do when you embed it. The widget loads from Mixcloud as soon as the component renders, so to wait for a visitor’s consent, render the component only after the visitor agrees.
+
+## Examples
+
+### Basic Usage
+
+**index.html**
+
+```html
+<mixcloud-audio class="mixcloud-audio" src="https://www.mixcloud.com/spartacus/lambiance/" controls></mixcloud-audio>
+```
+
+**index.css**
+
+```css
+.mixcloud-audio {
+  width: 100%;
+}
+```
+
+**index.ts**
+
+```ts
+import '@videojs/html/media/mixcloud-audio';
+```
+
+## API Reference
+
+### Attributes
+
+These attributes configure the embedded media adapter:
+
+| Attribute | Type | Default | Description |
+| --- | --- | --- | --- |
+| `autoplay` | `boolean` | `false` | Starts playback once the widget is ready, after the volume applies. Browsers may refuse it. |
+| `controls` | `boolean` | `false` | |
+| `loop` | `boolean` | `false` | Plays the show again from the start when it ends. |
+| `muted` | `boolean` | `false` | |
+| `playsinline` | `boolean` | `true` | |
+| `poster` | `string` | `''` | |
+| `preload` | `MediaPreloadType` | `'metadata'` | |
+| `src` | `string` | `''` | |
+
+### Properties
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `autoplay` | `boolean` | `false` | Starts playback once the widget is ready, after the volume applies. Browsers may refuse it. |
+| `buffered` | `TimeRangeLike` | — | Read-only. Always empty: the widget does not report how much of the show it has loaded. |
+| `controls` | `boolean` | `false` | |
+| `currentSrc` | `string` | — | Read-only. |
+| `currentTime` | `number` | — | |
+| `defaultMuted` | `boolean` | `false` | |
+| `duration` | `number` | — | Read-only. |
+| `ended` | `boolean` | — | Read-only. |
+| `engine` | `Window \| null` | — | Read-only. The widget's window, which commands are posted to. Null until rendered. |
+| `error` | `MediaError \| null` | — | Read-only. |
+| `loop` | `boolean` | `false` | Plays the show again from the start when it ends. |
+| `muted` | `boolean` | `false` | |
+| `paused` | `boolean` | — | Read-only. |
+| `played` | `{ length: number; start(index: number): number; end(index: number): number }` | — | Read-only. |
+| `playsInline` | `boolean` | `true` | |
+| `poster` | `string` | `''` | |
+| `preload` | `MediaPreloadType` | `'metadata'` | |
+| `readyState` | `number` | — | Read-only. |
+| `seekable` | `TimeRangeLike` | — | Read-only. |
+| `seeking` | `boolean` | — | Read-only. |
+| `source` | `{ src?: string; engine?: MixcloudSourceEngineConfig } \| null` | `null` | Mixcloud show URL in `src`, widget parameters under `engine.mixcloud`. Replacing it re-derives `src`. |
+| `src` | `string` | `''` | |
+| `textTracks` | `TextTrackListLike` | — | Read-only. Always empty: Mixcloud has no captions or other text tracks. |
+| `volume` | `number` | — | |
+
+### Engine options
+
+#### `source.engine.mixcloud`
+
+Pass Mixcloud Widget options under `source.engine.mixcloud`, spelled exactly as Mixcloud spells them, plus anything Mixcloud adds next. [Media Sources](../../guides/media-sources.md) covers how engine options fit into a structured source.
+
+The show comes from `src`, so `feed` has no `engine.mixcloud` spelling. `referrerPolicy` sets the `referrerpolicy` of the widget iframe rather than a widget parameter.
+
+| Option | Type | Description |
+| --- | --- | --- |
+| `autoplay` | `boolean \| null \| undefined` | Start playback once the widget is ready, as `autoplay` does. Never written to the URL. |
+| `hide_artwork` | `boolean \| null \| undefined` | Hide the show's artwork. |
+| `hide_cover` | `boolean \| null \| undefined` | Hide the picture layout, a large cover that needs about 400 pixels of height. Defaults to `true`. |
+| `hide_tracklist` | `boolean \| null \| undefined` | Hide the tracklist. |
+| `light` | `boolean \| null \| undefined` | The light theme. Mixcloud offers no other colors. |
+| `mini` | `boolean \| null \| undefined` | The mini layout, 60 pixels tall, without the repost, favorite, and share buttons. |
+| `referrerPolicy` | `ReferrerPolicy \| undefined` | `referrerpolicy` for the widget iframe. Not a widget parameter. |
+
+### Methods
+
+Supports these media methods: `load`, `pause`, `play`.
+
+### Events
+
+Implements these standard media events through the embedded player: `canplay`, `canplaythrough`, `durationchange`, `emptied`, `ended`, `error`, `loadeddata`, `loadedmetadata`, `loadstart`, `pause`, `play`, `playing`, `seeked`, `seeking`, `timeupdate`, `volumechange`, `waiting`.
+
+Also emits these Video.js-specific events:
+
+| Event | Description |
+| --- | --- |
+| `loadcomplete` | |
+| `sourcechange` | Fired when `source` changes, either directly or by resolving a new `src`. Read `source` for the new value. |

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

@@ -17,7 +17,7 @@ import '@videojs/html/media/mux-audio';
 Or load it from the [CDN](../../guides/cdn.md):
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/media/mux-audio.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.3.0/media/mux-audio.js"></script>
 ```
 
 ## Analytics and casting
@@ -87,8 +87,10 @@ These Video.js-specific attributes configure media behavior:
 | `contentData` | `{ readonly [key: string]: MediaContentValue; title?: string; poster?: string; storyboard?: string }` | — | Read-only. What `source` says about its content. `poster` and `storyboard` are image URLs it describes rather than plays, from its `poster` and `storyboard` params; a key is absent when the URL can't be built — no playback ID, or signed playback without a matching image token. `title` and the rest come from the metadata Mux publishes for the asset, which loads with the source, so they arrive later than the URLs and are absent until then. The same object is handed back until something in it changes, and `contentdatachange` announces it when it does. Nothing here is applied for you, apart from the thumbnail track `<mux-video>` adds from `storyboard` (and drops for live streams). |
 | `disableRemotePlayback` | `unknown` | `false` | Whether remote playback (AirPlay, Google Cast) is disabled for this media. |
 | `engine` | `Hls \| null` | — | Read-only. Underlying playback engine — the hls.js `Hls` instance when playing via MSE, otherwise `null`. An advanced escape hatch for direct engine access; normal playback is driven through this element's own properties and methods. |
+| `engineName` | `string \| undefined` | — | Read-only. Engine this media is playing through, reported to analytics such as Mux Data: `hlsjs` via MSE, `browser` for native HLS, or `undefined` until a source loads. Read from the instance because the engine is picked per source. |
 | `error` | `MediaError \| null` | — | Read-only. |
 | `liveEdgeStart` | `number` | — | Read-only. Presentation time marking the start of the Live Edge Window. Derived from the delegate on every read; `NaN` when no delegate is attached or the stream is not live. |
+| `playbackRateRange` | `{ min: number; max: number } \| undefined` | — | Read-only. The target's narrower rate range, when it reports one; native media accept the browser's range. |
 | `preload` | `MediaPreloadType` | `'metadata'` | Preload type (`'none'` / `'metadata'` / `'auto'`). |
 | `source` | `{ type?: 'application/vnd.apple.mpegurl' \| 'video/mp4' \| string & {}; preferPlayback?: 'mse' \| 'native' \| string & {}; maxAutoResolution?: '270p' \| '360p' \| '480p' \| '540p' \| '720p' \| '1080p' \| '1440p' \| '2160p'; capRenditionToPlayerSize?: boolean; minAutoResolution?: '270p' \| '360p' \| '480p' \| '540p' \| '720p' \| '1080p' \| '1440p' \| '2160p'; engine?: HlsEngineConfig; src?: string; playbackId?: string; customDomain?: string; playback?: MuxPlaybackParams; poster?: MuxPosterParams; storyboard?: MuxStoryboardParams; drm?: MuxDrmParams } \| null` | `null` | Structured Mux source. Setting it derives `src` from the playback ID, custom domain, and `playback` params (appended as `snake_case` query params). A `playback.token` replaces all other params — signed URLs bake them into the token. Engine options live under `engine`. A `drm.token` fills in `drm` itself: Mux's FairPlay, Widevine, and PlayReady license servers for this playback ID, so protected media plays whichever path the browser takes. License servers named alongside the token win, key by key, for content Mux does not license. `playback.maxResolution` and `playback.minResolution` are server-side: they decide which renditions Mux puts in the manifest at all. The inherited `maxAutoResolution` and `minAutoResolution` only look like their pair — those are client-side and bound which of the renditions that *do* arrive adaptive selection reaches for. The two halves are independent. |
 | `src` | `string` | `''` | Media source URL. Setting a Mux stream URL (`https://stream.mux.com/<playback-id>.m3u8?...`, with or without the `.m3u8` extension) extracts the playback ID and query params into `source`; other URLs are kept as a plain `source.src`. Only playback options carry over. Mux identity comes from the URL, and the signed `poster`, `storyboard`, and `drm` tokens are scoped to a playback ID, so carrying them onto a different source would build rejected URLs. |

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

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

package/docs/reference/components/mux-data.md

@@ -17,7 +17,7 @@ import '@videojs/html/extensions/mux-data';
 Or load it from the [CDN](../../guides/cdn.md):
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/extensions/mux-data.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.3.0/extensions/mux-data.js"></script>
 ```
 
 ## Anatomy
@@ -32,7 +32,7 @@ Or load it from the [CDN](../../guides/cdn.md):
 | --- | --- | --- |
 | `env-key` | `envKey` | Mux Data environment key the beacons are sent to. Optional for Mux-hosted playback |
 | — | `metadata` | Mux Data metadata for the view |
-| `player-software-name` | `playerSoftwareName` | Player name reported to Mux Data |
+| `player-software-name` | `playerSoftwareName` | Player name reported to Mux Data. Defaults to `videojs-html-<engine>`; see [Player software name](#player-software-name) |
 | `player-software-version` | `playerSoftwareVersion` | Player version reported to Mux Data. Defaults to the Video.js version |
 | `player-init-time` | `playerInitTime` | Epoch milliseconds the player was initialized. Defaults to when the player was created |
 | `beacon-collection-domain` | `beaconCollectionDomain` | Custom domain the beacons are sent to |
@@ -42,6 +42,26 @@ Or load it from the [CDN](../../guides/cdn.md):
 
 `metadata` and `MuxDataSdk` take objects, so they’re properties only, with no matching attribute. Set them on the element, typed as the `MuxDataExtension` class that `@videojs/html/extensions/mux-data` exports.
 
+Views also report the extension itself as the Mux plugin, so they can be told apart from other Video.js integrations such as `videojs-mux`.
+
+## Player software name
+
+When no player software name is set, views report `videojs-<framework>-<engine>`, where the framework is `html` or `react` and the engine is the one playing the current source:
+
+| Engine | Played by |
+| --- | --- |
+| `hlsjs` | hls.js |
+| `spf-hls-video` | The SPF video engine |
+| `spf-hls-audio` | The audio-only SPF engine |
+| `spf-hls-background-video` | The SPF background video engine |
+| `shaka` | Shaka Player |
+| `dashjs` | dash.js |
+| `browser` | The browser itself, like native HLS in Safari or an MP4 file |
+
+The framework is always one word, so everything after the second hyphen is the engine. The name updates on the current view when a source change switches engines. Media that doesn’t declare an engine name leaves it out, as in `videojs-html`. A player software name you set always takes precedence.
+
+The player software version defaults to the Video.js version, and the Mux plugin is reported as `@videojs/mux-data` at the same version.
+
 Changing `MuxDataSdk`, `beaconCollectionDomain`, `debug`, or `disableCookies` restarts monitoring, which ends the current view and starts a new one. The rest update the view in place.
 
 ## See also

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

@@ -17,7 +17,7 @@ import '@videojs/html/media/mux-video';
 Or load it from the [CDN](../../guides/cdn.md):
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/media/mux-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.3.0/media/mux-video.js"></script>
 ```
 
 ## Load a source
@@ -164,10 +164,12 @@ These Video.js-specific attributes configure media behavior:
 | `contentData` | `{ readonly [key: string]: MediaContentValue; title?: string; poster?: string; storyboard?: string }` | — | Read-only. What `source` says about its content. `poster` and `storyboard` are image URLs it describes rather than plays, from its `poster` and `storyboard` params; a key is absent when the URL can't be built — no playback ID, or signed playback without a matching image token. `title` and the rest come from the metadata Mux publishes for the asset, which loads with the source, so they arrive later than the URLs and are absent until then. The same object is handed back until something in it changes, and `contentdatachange` announces it when it does. Nothing here is applied for you, apart from the thumbnail track `<mux-video>` adds from `storyboard` (and drops for live streams). |
 | `disableRemotePlayback` | `unknown` | `false` | Whether remote playback (AirPlay, Google Cast) is disabled for this media. |
 | `engine` | `Hls \| null` | — | Read-only. Underlying playback engine — the hls.js `Hls` instance when playing via MSE, otherwise `null`. An advanced escape hatch for direct engine access; normal playback is driven through this element's own properties and methods. |
+| `engineName` | `string \| undefined` | — | Read-only. Engine this media is playing through, reported to analytics such as Mux Data: `hlsjs` via MSE, `browser` for native HLS, or `undefined` until a source loads. Read from the instance because the engine is picked per source. |
 | `error` | `MediaError \| null` | — | Read-only. |
 | `isFullscreen` | `boolean` | — | Read-only. |
 | `isPictureInPicture` | `boolean` | — | Read-only. |
 | `liveEdgeStart` | `number` | — | Read-only. Presentation time marking the start of the Live Edge Window. Derived from the delegate on every read; `NaN` when no delegate is attached or the stream is not live. |
+| `playbackRateRange` | `{ min: number; max: number } \| undefined` | — | Read-only. The target's narrower rate range, when it reports one; native media accept the browser's range. |
 | `preload` | `MediaPreloadType` | `'metadata'` | Preload type (`'none'` / `'metadata'` / `'auto'`). |
 | `source` | `{ type?: 'application/vnd.apple.mpegurl' \| 'video/mp4' \| string & {}; preferPlayback?: 'mse' \| 'native' \| string & {}; maxAutoResolution?: '270p' \| '360p' \| '480p' \| '540p' \| '720p' \| '1080p' \| '1440p' \| '2160p'; capRenditionToPlayerSize?: boolean; minAutoResolution?: '270p' \| '360p' \| '480p' \| '540p' \| '720p' \| '1080p' \| '1440p' \| '2160p'; engine?: HlsEngineConfig; src?: string; playbackId?: string; customDomain?: string; playback?: MuxPlaybackParams; poster?: MuxPosterParams; storyboard?: MuxStoryboardParams; drm?: MuxDrmParams } \| null` | `null` | Structured Mux source. Setting it derives `src` from the playback ID, custom domain, and `playback` params (appended as `snake_case` query params). A `playback.token` replaces all other params — signed URLs bake them into the token. Engine options live under `engine`. A `drm.token` fills in `drm` itself: Mux's FairPlay, Widevine, and PlayReady license servers for this playback ID, so protected media plays whichever path the browser takes. License servers named alongside the token win, key by key, for content Mux does not license. `playback.maxResolution` and `playback.minResolution` are server-side: they decide which renditions Mux puts in the manifest at all. The inherited `maxAutoResolution` and `minAutoResolution` only look like their pair — those are client-side and bound which of the renditions that *do* arrive adaptive selection reaches for. The two halves are independent. |
 | `src` | `string` | `''` | Media source URL. Setting a Mux stream URL (`https://stream.mux.com/<playback-id>.m3u8?...`, with or without the `.m3u8` extension) extracts the playback ID and query params into `source`; other URLs are kept as a plain `source.src`. Only playback options carry over. Mux identity comes from the URL, and the signed `poster`, `storyboard`, and `drm` tokens are scoped to a playback ID, so carrying them onto a different source would build rejected URLs. |

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

@@ -13,7 +13,7 @@ import '@videojs/html/media/native-hls-video';
 Or load it from the [CDN](../../guides/cdn.md):
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/media/native-hls-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.3.0/media/native-hls-video.js"></script>
 ```
 
 ## Examples
@@ -68,6 +68,7 @@ These Video.js-specific attributes configure media behavior:
 | `isFullscreen` | `boolean` | — | Read-only. |
 | `isPictureInPicture` | `boolean` | — | Read-only. |
 | `liveEdgeStart` | `number` | — | Read-only. Playback time where the live edge begins. Calculated from the newest available time and the playlist's live-edge offset. `NaN` when the stream is not live or the offset is unavailable. |
+| `playbackRateRange` | `{ min: number; max: number } \| undefined` | — | Read-only. The target's narrower rate range, when it reports one; native media accept the browser's range. |
 | `preload` | `MediaPreloadType` | `'metadata'` | Preload type (`'none'` / `'metadata'` / `'auto'`). |
 | `source` | `{ src?: string; drm?: Partial<Record<KeySystem, DrmSystemConfig>>; engine?: NativeHlsEngineConfig } \| null` | `null` | Structured source: what to play (`src`) plus how to play it (`engine.nativeHls`). Assigning it derives `src`. Only a new URL reaches the element, so reassigning an equivalent source neither reloads nor disturbs key exchange. Use `src` or `load()` to reload what is already playing. Changing this source does not emit `sourcechange`. When the hls.js media component uses native HLS playback, it emits its own `sourcechange` and forwards the native playback events. |
 | `src` | `string` | `''` | Media source URL. Assigning it replaces the identity half of `source` and leaves `engine` intact, so changing the URL never disturbs key exchange. Like the element's own `src`, assigning it always loads — including the URL already playing. |