@videojs/html 10.2.0 → 10.4.0

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.2.0/live-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.4.0/live-video.js"></script>
 ```
 
 ## Anatomy
@@ -36,6 +36,10 @@ The skin renders a poster image before playback starts. An element with `slot="p
 
 See [Add a poster and loading placeholder](../../guides/poster.md) for complete examples.
 
+## Controls before playback
+
+Before playback starts, the skin shows only the large center play button. The other controls appear once playback starts or the media begins to autoplay. Set `--media-controls-before-start: visible` to show them from the start. See [Customize skins](../../guides/customize-skins.md#set-the-skins-styles).
+
 ## 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.

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.2.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.4.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
 
@@ -86,6 +90,7 @@ API reference for the slider components that scrub time and adjust volume.
 
 - [media-slider](./slider.md): A composable slider component with track, fill, thumb, preview, and value parts
 - [media-time-slider](./time-slider.md): A slider component for seeking through media playback time
+- [media-time-slider-markers](./time-slider-markers.md): Draws a marker on the time slider for each cue on the text tracks a filter matches, such as ad breaks
 - [media-volume-slider](./volume-slider.md): A slider component for controlling media playback volume
 
 ## Menus

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.4.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. Unsupported: 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,39 @@ 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.2.0/media/mux-audio.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.4.0/media/mux-audio.js"></script>
+```
+
+## Load a source
+
+`<mux-audio>` takes Mux content two ways: a stream URL through `src`, or a structured `source` object.
+
+```html
+<mux-audio src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"></mux-audio>
+```
+
+The `source` object builds the URL for you from a playback ID, an optional custom domain, and `playback` params. Playback params are camelCased [Mux playback query params](https://www.mux.com/docs/api-reference/stream/streaming/get-hls-manifest?utm_source=videojs&utm_campaign=vjs10&utm_content=docs-content); for example, `max_resolution` becomes `maxResolution`.
+
+```ts
+const audio = document.querySelector('mux-audio')!;
+audio.source = {
+  playbackId: 'BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM',
+  customDomain: 'media.example.com',
+};
+```
+
+`<mux-audio>` ignores the same source object when it is assigned again. A new object fires `sourcechange` even when its values are equal, although an equivalent playback source does not reload.
+
+## Signed playback
+
+For [signed playback](https://www.mux.com/docs/guides/secure-video-playback?utm_source=videojs&utm_campaign=vjs10&utm_content=docs-content), put the playback token on `source.playback.token`. The token replaces every other playback param, so bake modifiers like time bounds into the token when you sign it.
+
+```ts
+const audio = document.querySelector('mux-audio')!;
+audio.source = {
+  playbackId: 'BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM',
+  playback: { token: playbackToken },
+};
 ```
 
 ## Analytics and casting
@@ -87,6 +119,7 @@ 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. |
 | `preload` | `MediaPreloadType` | `'metadata'` | Preload type (`'none'` / `'metadata'` / `'auto'`). |
@@ -111,7 +144,7 @@ Options passed under `source.engine.nativeHls`.
 
 ### Methods
 
-Supports these media methods. See [HTMLAudioElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement) for details: `addTextTrack`, `canPlayType`, `load`, `pause`, `play`.
+Supports these media methods. See [HTMLAudioElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement) for details: `addTextTrack`, `canPlayType`, `load`, `pause`, `play`, `removeTextTrack`.
 
 ### Events
 

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.2.0/media/mux-background-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.4.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.2.0/extensions/mux-data.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.4.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. Defaults to `Video.js` |
+| `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 |
@@ -44,6 +44,24 @@ Or load it from the [CDN](../../guides/cdn.md):
 
 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.2.0/media/mux-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.4.0/media/mux-video.js"></script>
 ```
 
 ## Load a source
@@ -85,6 +85,21 @@ video.source = {
 };
 ```
 
+## Protected content
+
+For [DRM-protected](https://www.mux.com/docs/guides/protect-videos-with-drm?utm_source=videojs&utm_campaign=vjs10&utm_content=docs-content) playback, put the DRM license token on `source.drm.token`. The Mux video component derives the FairPlay, Widevine, and PlayReady license servers from it. DRM playback is always signed, so a `playback.token` belongs alongside it.
+
+```ts
+const video = document.querySelector('mux-video')!;
+video.source = {
+  playbackId: 'BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM',
+  playback: { token: playbackToken },
+  drm: { token: drmToken },
+};
+```
+
+[Media sources](../../guides/media-sources.md#mux-signs-drm-with-a-token) covers mixing Mux’s license servers with your own.
+
 ## Analytics and casting
 
 The Mux video component plays Mux streams. It doesn’t monitor them or cast them — [Mux Data](../../guides/mux-data.md) and [Google Cast](../../guides/casting.md) are separate extensions you add to the player alongside it. Mux Data needs no environment key here, since Mux attributes the views to the environment that owns the playback ID:
@@ -164,6 +179,7 @@ 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. |
@@ -193,7 +209,7 @@ Options passed under `source.engine.nativeHls`.
 
 ### Methods
 
-Supports these media methods. See [HTMLVideoElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement) for details: `addTextTrack`, `canPlayType`, `exitFullscreen`, `exitPictureInPicture`, `load`, `pause`, `play`, `requestFullscreen`, `requestPictureInPicture`.
+Supports these media methods. See [HTMLVideoElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement) for details: `addTextTrack`, `canPlayType`, `exitFullscreen`, `exitPictureInPicture`, `load`, `pause`, `play`, `removeTextTrack`, `requestFullscreen`, `requestPictureInPicture`.
 
 ### Events
 

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

@@ -13,9 +13,39 @@ 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.2.0/media/native-hls-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.4.0/media/native-hls-video.js"></script>
 ```
 
+## Load a source
+
+`src` takes an HLS manifest URL, which the browser plays with its own HLS support.
+
+```html
+<native-hls-video src="https://example.com/playlist.m3u8"></native-hls-video>
+```
+
+The structured `source` object adds `drm` and engine options to the URL. Setting `source` derives `src`.
+
+## Protected content
+
+`source.drm` names your license servers, keyed by [EME key system id](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/requestMediaKeySystemAccess).
+
+```ts
+const video = document.querySelector('native-hls-video')!;
+video.source = {
+  src: 'https://example.com/protected.m3u8',
+  drm: {
+    'com.apple.fps': {
+      licenseUrl: 'https://example.com/fairplay',
+      serverCertificateUrl: 'https://example.com/fairplay.cer',
+    },
+    'com.widevine.alpha': { licenseUrl: 'https://example.com/widevine' },
+  },
+};
+```
+
+The browser’s own HLS licenses FairPlay only, so the `com.apple.fps` entry is the one this component uses. [Media sources](../../guides/media-sources.md#drm-protected-sources) covers DRM in more depth.
+
 ## Examples
 
 ### Basic Usage
@@ -103,7 +133,7 @@ video.source = {
 
 ### Methods
 
-Supports these media methods. See [HTMLVideoElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement) for details: `addTextTrack`, `canPlayType`, `exitFullscreen`, `exitPictureInPicture`, `load`, `pause`, `play`, `requestFullscreen`, `requestPictureInPicture`.
+Supports these media methods. See [HTMLVideoElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement) for details: `addTextTrack`, `canPlayType`, `exitFullscreen`, `exitPictureInPicture`, `load`, `pause`, `play`, `removeTextTrack`, `requestFullscreen`, `requestPictureInPicture`.
 
 ### Events
 

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

@@ -18,22 +18,24 @@ import '@videojs/html/ui/play-button';
 
 The play button is a three-state button: **play**, **pause**, and **replay**. When media reaches the end (`ended` state), clicking restarts playback from the beginning.
 
+While media with `autoplay` is trying to start, the button shows **pause**, and clicking it cancels the autoplay. If the browser refuses the autoplay, the button returns to **play**.
+
 ## Styling
 
-Style with the `[data-paused]` and `[data-ended]` attributes to show/hide play/pause/replay icons based on state. For example:
+Style with the `[data-paused]` and `[data-ended]` attributes to show/hide play/pause/replay icons based on state. While autoplay is pending, the button omits `data-paused` and adds `data-started`, so the pause icon shows. For example:
 
 ```css
 /* Paused (but not ended) */
 media-play-button[data-paused]:not([data-ended]) .play-icon { display: inline; }
 
-/* Playing */
+/* Playing, or autoplay pending */
 media-play-button:not([data-paused]) .pause-icon { display: inline; }
 
 /* Ended */
 media-play-button[data-ended] .replay-icon { display: inline; }
 ```
 
-After first play, the `data-started` attribute is added and remains present until a new source is loaded. Use this to hide the play button when media hasn’t started yet:
+The `data-started` attribute is present while the media tries to autoplay, and from first play until a new source is loaded. Use this to hide the play button when media hasn’t started yet:
 
 ```css
 /* Hide play button before first play */
@@ -146,6 +148,6 @@ State is reflected as data attributes for CSS styling.
 
 | Attribute | Description |
 | --- | --- |
-| `data-paused` | Present when the media is paused. |
+| `data-paused` | Present when the media is paused and not trying to autoplay. |
 | `data-ended` | Present when the media has ended. |
-| `data-started` | Present when playback has started. |
+| `data-started` | Present when playback has started or the media is trying to autoplay. |

package/docs/reference/components/playback-rate-button.md

@@ -16,12 +16,20 @@ import '@videojs/html/ui/playback-rate-button';
 
 ## Behavior
 
-Cycles through playback rates on click. The default rate list is `[0.2, 0.5, 0.7, 1, 1.2, 1.5, 1.7, 2]`. After the last rate, it wraps back to the first. If the current rate isn’t in the list (e.g., set programmatically), the button jumps to the next rate greater than the current one.
+Cycles through the player’s playback rates on click, in the order they are listed. The default list is `[0.5, 0.75, 1, 1.25, 1.5, 1.75, 2]`; see the [playback rate feature](../api/feature-playback-rate.md) to set your own for the whole player, or set `rates` on the button to give it its own list. After the last rate, it wraps back to the first. If the current rate isn’t in the list (e.g., set programmatically), the button jumps to the next rate greater than the current one.
 
 When `commandfor` is set, activation opens the linked playback-rate menu instead of cycling through rates. Use this mode when the button is the trigger for a `<media-menu>` that contains playback-rate options.
 
+When the media’s playback rate is unavailable or unsupported, such as on an embed that takes no speed command, the element receives the native `hidden` attribute and ignores activation.
+
 ## Styling
 
+| Attribute | Values | Description |
+| --- | --- | --- |
+| `data-rate` | Number | Current playback rate |
+| `data-availability` | `"available"` \| `"unavailable"` \| `"unsupported"` | Whether the media can change its playback rate |
+| `data-hidden` | Present / absent | Present on the HTML element while playback rate is unavailable or unsupported |
+
 Display the current rate using the `data-rate` attribute:
 
 ```css
@@ -32,7 +40,7 @@ media-playback-rate-button::after {
 
 ## Accessibility
 
-Renders a `<button>` with an automatic `aria-label` of `"Playback rate {rate}"` (e.g., `"Playback rate 1.5"`). Override with the `label` prop. Keyboard activation: Enter / Space.
+Renders a `<button>` with an automatic `aria-label` of `"Playback rate, {rate}"` (e.g., `"Playback rate, 1.5"`). Its tooltip shows `"Playback rate"` without the value. Override both with the `label` prop. Keyboard activation: Enter / Space.
 
 In menu-trigger mode, the button behaves as a menu trigger and reflects menu state through the trigger attributes.
 
@@ -97,18 +105,29 @@ import '@videojs/html/ui/playback-rate-button';
 | --- | --- | --- | --- |
 | `disabled` | `boolean` | `false` | Whether the button is disabled. |
 | `label` | `{ key: string; text: string } \| string \| ((state: PlaybackRateButtonState) => Text \| string)` | `''` | Custom label for the button. |
+| `rates` | `readonly number[] \| string` | `[]` | Rates to cycle through, in order, in place of the player's `defaultPlaybackRates`. HTML takes a space-separated list, such as `rates="1 1.5 2"`. |
 
 ### State
 
 State is reflected as data attributes for CSS styling.
 
-| Property | Type |
-| --- | --- |
-| `label` | `{ key: string; text: string } \| string` |
-| `rate` | `number` |
+| Property | Type | Description |
+| --- | --- | --- |
+| `label` | `{ key: string; text: string } \| string` | |
+| `rate` | `number` | |
+| `availability` | `'available' \| 'unavailable' \| 'unsupported'` | Whether the media can change its playback rate. |
+| `hidden` | `boolean` | Whether the button is hidden because the media has no playback rate to change. |
 
 ### Data attributes
 
 | Attribute | Type | Description |
 | --- | --- | --- |
-| `data-rate` | `number` | Current playback rate. |
+| `data-rate` | `number` | Current playback rate. |
+| `data-availability` | `'available' \| 'unavailable' \| 'unsupported'` | Indicates playback rate availability (`available`, `unavailable`, `unsupported`). |
+| `data-hidden` | — | Present when the button is hidden because the media has no playback rate to change. |
+
+### CSS custom properties
+
+| Variable | Description |
+| --- | --- |
+| `--media-playback-rate-length` | Characters in the current rate as text, such as `4` for `1.75`. Lets a skin size the label to fit the button. |