@videojs/html 10.3.0 → 10.4.0

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

@@ -17,7 +17,57 @@ 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.3.0/media/hlsjs-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.4.0/media/hlsjs-video.js"></script>
+```
+
+## Load a source
+
+`src` takes an HLS manifest URL.
+
+```html
+<hlsjs-video src="https://example.com/playlist.m3u8"></hlsjs-video>
+```
+
+The structured `source` object says what to play and how to play it: `type` for a manifest URL without an `.m3u8` extension, `preferPlayback` to choose between hls.js (`'mse'`) and the browser’s own HLS (`'native'`), the adaptive resolution caps, `drm`, and engine options. Setting `source` derives `src`. [Media sources](../../guides/media-sources.md) explains each option.
+
+```ts
+const video = document.querySelector('hlsjs-video')!;
+video.source = {
+  src: 'https://example.com/manifest',
+  type: 'application/vnd.apple.mpegurl',
+  preferPlayback: 'mse',
+  maxAutoResolution: '1080p',
+};
+```
+
+## 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). Name every system you hold a license server for: which one gets negotiated is the browser’s choice.
+
+```ts
+const video = document.querySelector('hlsjs-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' },
+  },
+};
+```
+
+hls.js receives every system named here. When the browser’s own HLS plays the stream, only the `com.apple.fps` entry applies. [Media sources](../../guides/media-sources.md#drm-protected-sources) covers what each path can license and how to configure hls.js’s DRM directly.
+
+## Cookie-gated streams
+
+A stream on another origin that is gated by cookies — CloudFront signed cookies, for example — needs those cookies on every manifest and segment request, or the CDN answers 403. Set the standard `crossorigin="use-credentials"` on the element and hls.js sends them (`withCredentials` on its XHR loader, `credentials: 'include'` on its fetch loader), the same way the browser does under native playback. Any other value, or no attribute, leaves hls.js’s default and sends no cross-origin cookies. An `xhrSetup` or `fetchSetup` you pass through `source.engine.hlsJs` still runs, after this, on the same request.
+
+The CDN must answer with `Access-Control-Allow-Credentials: true` and a specific `Access-Control-Allow-Origin`, not `*`, or the browser refuses the credentialed response.
+
+```html
+<hlsjs-video src="https://cdn.example.com/stream.m3u8" crossorigin="use-credentials"></hlsjs-video>
 ```
 
 ## Examples
@@ -50,16 +100,6 @@ import '@videojs/html/ui/container';
 import '@videojs/html/media/hlsjs-video';
 ```
 
-## Cookie-gated streams
-
-A stream on another origin that is gated by cookies — CloudFront signed cookies, for example — needs those cookies on every manifest and segment request, or the CDN answers 403. Set the standard `crossorigin="use-credentials"` on the element and hls.js sends them (`withCredentials` on its XHR loader, `credentials: 'include'` on its fetch loader), the same way the browser does under native playback. Any other value, or no attribute, leaves hls.js’s default and sends no cross-origin cookies. An `xhrSetup` or `fetchSetup` you pass through `source.engine.hlsJs` still runs, after this, on the same request.
-
-The CDN must answer with `Access-Control-Allow-Credentials: true` and a specific `Access-Control-Allow-Origin`, not `*`, or the browser refuses the credentialed response.
-
-```html
-<hlsjs-video src="https://cdn.example.com/stream.m3u8" crossorigin="use-credentials"></hlsjs-video>
-```
-
 ## API Reference
 
 ### Attributes
@@ -86,7 +126,6 @@ These Video.js-specific attributes configure media behavior:
 | `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. |
@@ -112,7 +151,7 @@ When playback falls back to the browser’s own HLS, hls.js isn’t involved and
 
 ### 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/live-audio-compat-skin.md

@@ -13,7 +13,7 @@ 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>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.4.0/live-audio-compat.js"></script>
 ```
 
 ## Anatomy

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

@@ -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.3.0/live-audio-neutral.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.4.0/live-audio-neutral.js"></script>
 ```
 
 ## Anatomy

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

@@ -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.3.0/live-audio-scaffold.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.4.0/live-audio-scaffold.js"></script>
 ```
 
 ## Usage

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

@@ -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.3.0/live-audio.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.4.0/live-audio.js"></script>
 ```
 
 ## Anatomy

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

@@ -13,7 +13,7 @@ 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>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.4.0/live-video-compat.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/live-video-neutral-skin.md

@@ -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.3.0/live-video-neutral.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.4.0/live-video-neutral.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/live-video-scaffold-skin.md

@@ -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.3.0/live-video-scaffold.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.4.0/live-video-scaffold.js"></script>
 ```
 
 ## Usage
@@ -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/live-video-skin.md

@@ -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.3.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.3.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
 
@@ -90,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

@@ -17,7 +17,7 @@ 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>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.4.0/media/mixcloud-audio.js"></script>
 ```
 
 ## Load a source
@@ -166,7 +166,7 @@ These attributes configure the embedded media adapter:
 | `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. |
+| `textTracks` | `TextTrackListLike` | — | Read-only. Unsupported: Mixcloud has no captions or other text tracks. |
 | `volume` | `number` | — | |
 
 ### Engine options

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.3.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
@@ -90,7 +122,6 @@ These Video.js-specific attributes configure media behavior:
 | `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. |
@@ -113,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.3.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.3.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

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.3.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:
@@ -169,7 +184,6 @@ These Video.js-specific attributes configure media behavior:
 | `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. |
@@ -195,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.3.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
@@ -68,7 +98,6 @@ 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. |
@@ -104,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/playerjs-video.md

@@ -17,7 +17,7 @@ import '@videojs/html/media/playerjs-video';
 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/playerjs-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.4.0/media/playerjs-video.js"></script>
 ```
 
 ## Load a source
@@ -155,7 +155,7 @@ These attributes configure the embedded media adapter:
 | `seeking` | `boolean` | — | Read-only. |
 | `source` | `{ src?: string; engine?: PlayerJsSourceEngineConfig } \| null` | `null` | Embed URL in `src`, extra URL parameters under `engine.playerJs`. Re-derives `src`; equal sources skip reload. |
 | `src` | `string` | `''` | |
-| `textTracks` | `TextTrackListLike` | — | Read-only. Always empty: player.js has no text track surface. |
+| `textTracks` | `TextTrackListLike` | — | Read-only. Unsupported: player.js has no text track surface. |
 | `volume` | `number` | — | |
 
 ### Engine options

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

@@ -21,7 +21,7 @@ import '@videojs/html/media/shaka-video';
 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/shaka-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.4.0/media/shaka-video.js"></script>
 ```
 
 ## Load a source
@@ -121,7 +121,6 @@ These Video.js-specific attributes configure media behavior:
 | `isFullscreen` | `boolean` | — | Read-only. |
 | `isPictureInPicture` | `boolean` | — | Read-only. |
 | `liveEdgeStart` | `number` | — | Read-only. |
-| `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` | `'' \| 'none' \| 'metadata' \| 'auto'` | `'metadata'` | How much to fetch before playback is asked for, mirroring the media element's own `preload`. Shaka has no split between "know the source" and "buffer it", so this maps onto when and how `engine.load()` runs:<br>- `'auto'` — load immediately with the configured buffering goals.<br>- `'metadata'` — load immediately, holding buffering to about a segment; the configured goals come back on the first play intent.<br>- `'none'` / `''` — hold the load entirely until the first play intent. A play intent is a `play` event, a target that is already playing, or `autoplay` — which the spec lets override `preload` for good reason: with nothing fetched there is nothing whose readiness could ever fire it. Widening (`none` → `auto`) takes effect immediately; narrowing after a load began cannot un-fetch and leaves it alone. |
 | `source` | `{ src?: string; type?: string; drm?: Partial<Record<KeySystem, DrmSystemConfig>>; engine?: ShakaEngineConfig } \| null` | `null` | Structured source: what to play (`src`, an optional `type`) plus how to play it (`drm`, `engine.shaka`). Replacing it re-derives `src`. Shaka takes configuration on a live player, so changing `engine.shaka` re-applies it in place instead of recreating the engine. |
 | `src` | `string` | `''` | |
@@ -135,7 +134,7 @@ Also exposes these properties from the native media API. See [HTMLVideoElement](
 
 ### 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/soundcloud-audio.md

@@ -17,7 +17,7 @@ import '@videojs/html/media/soundcloud-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/soundcloud-audio.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.4.0/media/soundcloud-audio.js"></script>
 ```
 
 ## Load a source
@@ -180,7 +180,7 @@ These attributes configure the embedded media adapter:
 | `seeking` | `boolean` | — | Read-only. |
 | `source` | `{ src?: string; engine?: SoundCloudSourceEngineConfig } \| null` | `null` | SoundCloud URL in `src`, widget parameters under `engine.soundcloud`. Replacing it re-derives `src`. |
 | `src` | `string` | `''` | |
-| `textTracks` | `TextTrackListLike` | — | Read-only. Always empty: SoundCloud has no captions or other text tracks. |
+| `textTracks` | `TextTrackListLike` | — | Read-only. Unsupported: SoundCloud has no captions or other text tracks. |
 | `volume` | `number` | — | |
 
 ### Engine options

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

@@ -17,7 +17,7 @@ import '@videojs/html/media/spotify-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/spotify-audio.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.4.0/media/spotify-audio.js"></script>
 ```
 
 ## Load a source
@@ -105,7 +105,7 @@ These attributes configure the embedded media adapter:
 | `seeking` | `boolean` | — | Read-only. |
 | `source` | `{ src?: string; engine?: SpotifySourceEngineConfig } \| null` | `null` | Spotify URL or URI in `src`, plus embed options under `engine.spotify`. Replacing it re-derives `src`. |
 | `src` | `string` | `''` | |
-| `textTracks` | `TextTrackListLike` | — | Read-only. Always empty: the embed exposes no captions or other text tracks. |
+| `textTracks` | `TextTrackListLike` | — | Read-only. Unsupported: the embed exposes no captions or other text tracks. |
 
 ### Engine options
 

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

@@ -17,7 +17,7 @@ import '@videojs/html/media/tiktok-video';
 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/tiktok-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.4.0/media/tiktok-video.js"></script>
 ```
 
 ## Load a source
@@ -117,7 +117,7 @@ These attributes configure the embedded media adapter:
 | `seeking` | `boolean` | — | Read-only. |
 | `source` | `{ src?: string; engine?: TikTokSourceEngineConfig } \| null` | `null` | TikTok URL or id in `src`, player params under `engine.tiktok`. Re-derives `src`; equal sources skip reload. |
 | `src` | `string` | `''` | |
-| `textTracks` | `TextTrackListLike` | — | Read-only. Always empty: `closed_caption` is the embed's only say over captions. |
+| `textTracks` | `TextTrackListLike` | — | Read-only. Unsupported: `closed_caption` is the embed's only say over captions. |
 
 ### Engine options