@videojs/html 10.0.0-rc.4 → 10.0.0-rc.5

package/docs/reference/api/ui-element.md

@@ -0,0 +1,296 @@
+# UIElement
+
+Base class for custom elements that read player state through reactive controllers
+
+`UIElement` is the base class for Video.js custom elements, and the one the built-in UI elements extend. It adds reactive properties, a batched update cycle, reactive controllers, and deferred destruction to `HTMLElement`, and renders into the light DOM: the subclass writes its own DOM in `update()`.
+
+`UIElement` extends `DestroyMixin(ReactiveElement)` from Video.js’s own element base, not from Lit. Its reactive properties and update cycle follow the model of Lit’s `ReactiveElement`, with the same names: `static properties`, `requestUpdate()`, `willUpdate()`, `update()`, `updated()`, `updateComplete`, and reactive controllers. It has no templates, shadow root, or `static styles`, no decorators, and no reflection of properties to attributes. `DestroyMixin` adds the [destruction](#destruction) lifecycle and the `hostDestroyed` controller hook, which Lit doesn’t have.
+
+## Import
+
+```ts
+import { UIElement } from "@videojs/html";
+```
+
+## Usage
+
+Extend `UIElement`, add a [`PlayerController`](./player-controller.md) for the player state the element needs, and write DOM in `update()`. The controller requests an update whenever its selected state changes.
+
+```ts
+import { PlayerController, playerContext, selectTime, UIElement, type PropertyValues } from "@videojs/html";
+
+class CurrentTimeElement extends UIElement {
+  readonly #time = new PlayerController(this, playerContext, selectTime);
+
+  protected override update(changed: PropertyValues): void {
+    super.update(changed);
+
+    const time = this.#time.value;
+    if (!time) return;
+
+    this.textContent = time.currentTime.toFixed(1);
+  }
+}
+
+customElements.define("current-time", CurrentTimeElement);
+```
+
+The element must be a descendant of a player element, such as `<video-player>`, to receive state. Until then, and when the player lacks the selected feature, `value` is `undefined`.
+
+`playerContext` is the context every player element provides to its descendants. See [Player context](./player-controller.md#player-context) for how it resolves and how it is typed. The `PlayerController` exported by a preset, or returned by [`createPlayer`](./html-create-player.md), is already bound to that player’s context and takes only the host and an optional selector.
+
+## Reactive properties
+
+Declare reactive properties in `static properties` and initialize them as class fields. Setting a declared property to a new value (compared with `Object.is`) schedules an update. Each declaration also observes a matching attribute.
+
+```ts
+class SeekByElement extends UIElement {
+  static override properties = {
+    seconds: { type: Number },
+    skipTo: { type: Number, attribute: "skip-to" },
+    disabled: { type: Boolean },
+  };
+
+  seconds = 10;
+  skipTo = 0;
+  disabled = false;
+}
+```
+
+A `PropertyDeclaration` has two options:
+
+| Option | Default | Description |
+| --- | --- | --- |
+| `type` | `String` | Converts the attribute value. `String` passes the value through (`null` when the attribute is removed), `Number` parses it (`null` when removed), and `Boolean` is `true` while the attribute is present. |
+| `attribute` | The property name | The observed attribute. HTML lowercases attribute names, so give camelCase properties a lowercase attribute, such as `{ attribute: "skip-to" }`. |
+
+Attributes update properties; properties do not reflect back to attributes. Set attributes yourself in `update()` when styling or accessibility depends on them.
+
+Values assigned before the element is defined, or before it connects, are replayed through the reactive accessors on first connection, so they win over the class-field defaults.
+
+A subclass of an element that already declares properties must spread the parent’s declarations:
+
+```ts
+class LabeledSeekByElement extends SeekByElement {
+  static override properties = {
+    ...SeekByElement.properties,
+    icon: { type: String },
+  };
+
+  icon = "";
+}
+```
+
+## Update cycle
+
+Property changes and `requestUpdate()` calls made in the same task are batched into one update, which runs in a microtask. The first update waits until the element connects. Each update calls, in order:
+
+1. `willUpdate(changed)` — compute values derived from other properties. Changes made here join the current update.
+2. `hostUpdate()` on each controller.
+3. `update(changed)` — write the element’s DOM. Property changes made here do not schedule another update.
+4. `hostUpdated()` on each controller.
+5. `firstUpdated(changed)` — once, after the first update.
+6. `updated(changed)` — after every update. Property changes made here, or in `firstUpdated`, schedule another update.
+
+`changed` is a `Map` from each changed property name to its previous value. Call `super` when overriding any of these methods.
+
+| Member | Description |
+| --- | --- |
+| `requestUpdate(name?, oldValue?)` | Schedules an update. Call it with no arguments when the element depends on state outside its reactive properties. |
+| `updateComplete` | Promise that resolves when the pending update finishes. It resolves to `false` when that update scheduled another one. |
+| `hasUpdated` | `true` after the first update. |
+| `isUpdatePending` | `true` from when an update is scheduled until its `update()` call returns. |
+
+## Controllers
+
+A reactive controller is an object that hooks into its host element’s lifecycle. Controllers such as `PlayerController` add themselves to the host when they are constructed.
+
+### ReactiveController
+
+`ReactiveController` is the interface a controller implements. Every hook is optional:
+
+| Hook | Called when |
+| --- | --- |
+| `hostConnected()` | The element connects, or immediately when the controller is added to a connected element |
+| `hostDisconnected()` | The element disconnects |
+| `hostUpdate()` | During each update, before `update()` |
+| `hostUpdated()` | During each update, after `update()` |
+| `hostDestroyed()` | The element is destroyed |
+
+### ReactiveControllerHost
+
+`ReactiveControllerHost` is the interface of the element a controller attaches to. `UIElement` implements it, so a controller whose constructor accepts a `ReactiveControllerHost` works with any `UIElement` subclass.
+
+| Member | Description |
+| --- | --- |
+| `addController(controller)` | Adds a controller so the element calls its hooks. Calls `hostConnected()` immediately when the element is connected. |
+| `removeController(controller)` | Removes a controller. Its hooks stop being called; `hostDisconnected()` is not called. |
+| `requestUpdate()` | Schedules an update of the element. |
+| `updateComplete` | Promise that resolves when the element’s pending update finishes. It resolves to `false` when that update scheduled another one. |
+
+```ts
+import type { ReactiveController, ReactiveControllerHost } from "@videojs/html";
+
+class ClockController implements ReactiveController {
+  now = Date.now();
+  readonly #host: ReactiveControllerHost;
+  #timer = 0;
+
+  constructor(host: ReactiveControllerHost) {
+    this.#host = host;
+    host.addController(this);
+  }
+
+  hostConnected(): void {
+    this.#timer = window.setInterval(() => {
+      this.now = Date.now();
+      this.#host.requestUpdate();
+    }, 1000);
+  }
+
+  hostDisconnected(): void {
+    this.#stop();
+  }
+
+  // `destroy()` can run while the element is still connected.
+  hostDestroyed(): void {
+    this.#stop();
+  }
+
+  #stop(): void {
+    window.clearInterval(this.#timer);
+  }
+}
+```
+
+## Destruction
+
+When the element disconnects, it waits two animation frames and then destroys itself if it is still disconnected. Moving the element within the document, or a framework reordering it, therefore keeps it alive. Destruction calls `hostDestroyed()` on every controller. A destroyed element stops updating and ignores later connections.
+
+| Member | Description |
+| --- | --- |
+| `destroy()` | Destroys the element now. Calling it again has no effect. |
+| `destroyed` | `true` after destruction. |
+| `destroyCallback()` | Runs once on destruction. Override it, calling `super.destroyCallback()`, to release resources the element owns. |
+
+Add the `keep-alive` attribute to skip automatic destruction, for example when you detach an element and insert it again later. Call `destroy()` yourself when you are done with it.
+
+Release listeners and observers that the element starts on connection in `disconnectedCallback()`, calling `super.disconnectedCallback()`, because an element can connect and disconnect many times before it is destroyed.
+
+## Examples
+
+### Basic Usage
+
+A seek button with a reactive `seconds` property, set from its attribute.
+
+**index.html**
+
+```html
+<video-player class="html-ui-element-basic">
+  <media-container class="html-ui-element-basic__container">
+    <video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" autoplay muted playsinline loop></video>
+    <div class="html-ui-element-basic__controls">
+      <demo-seek-by seconds="-10">
+        <button type="button" class="html-ui-element-basic__button"></button>
+      </demo-seek-by>
+      <demo-seek-by seconds="10">
+        <button type="button" class="html-ui-element-basic__button"></button>
+      </demo-seek-by>
+    </div>
+  </media-container>
+</video-player>
+```
+
+**index.css**
+
+```css
+.html-ui-element-basic__container {
+  position: relative;
+}
+
+.html-ui-element-basic__container video {
+  width: 100%;
+}
+
+.html-ui-element-basic__controls {
+  position: absolute;
+  bottom: 12px;
+  left: 12px;
+  display: flex;
+  gap: 8px;
+}
+
+.html-ui-element-basic__button {
+  padding: 6px 12px;
+  font-size: 0.875rem;
+  font-variant-numeric: tabular-nums;
+  color: white;
+  cursor: pointer;
+  background: rgba(0, 0, 0, 0.6);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 6px;
+}
+
+.html-ui-element-basic__button:disabled {
+  cursor: default;
+  opacity: 0.5;
+}
+```
+
+**index.ts**
+
+```ts
+import '@videojs/html/video/player';
+import '@videojs/html/ui/container';
+import { PlayerController, playerContext, type PropertyValues, selectTime, UIElement } from '@videojs/html';
+
+class SeekByElement extends UIElement {
+  static readonly tagName = 'demo-seek-by';
+
+  static override properties = {
+    seconds: { type: Number },
+  };
+
+  seconds = 10;
+
+  readonly #time = new PlayerController(this, playerContext, selectTime);
+
+  #disconnect: AbortController | null = null;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.#disconnect = new AbortController();
+    this.querySelector('button')?.addEventListener('click', this.#seek, { signal: this.#disconnect.signal });
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.#disconnect?.abort();
+    this.#disconnect = null;
+  }
+
+  protected override update(changed: PropertyValues): void {
+    super.update(changed);
+
+    const button = this.querySelector('button');
+    if (!button) return;
+
+    if (changed.has('seconds')) {
+      const amount = Math.abs(this.seconds);
+
+      button.textContent = `${this.seconds < 0 ? '-' : '+'}${amount}s`;
+      button.ariaLabel = `Seek ${this.seconds < 0 ? 'backward' : 'forward'} ${amount} seconds`;
+    }
+
+    button.disabled = !this.#time.value;
+  }
+
+  #seek = () => {
+    const time = this.#time.value;
+
+    time?.seek(time.currentTime + this.seconds);
+  };
+}
+
+customElements.define(SeekByElement.tagName, SeekByElement);
+```

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

@@ -0,0 +1,33 @@
+# audio-compat-skin
+
+An audio skin designed for broader browser compatibility
+
+The Compat skin of the audio preset provides basic controls and plain surfaces, with broader browser compatibility as its design goal. Its time slider supports chapter segments and thumbnail previews. See [Customize skins](../../guides/customize-skins.md) to install and edit its source.
+
+## Import
+
+```ts
+import '@videojs/html/audio/compat-skin';
+```
+
+## Usage
+
+The skin goes between the player and the media element. It renders its controls around the media.
+
+```html
+<audio-player>
+  <audio-compat-skin>
+    <audio src="audio.mp3"></audio>
+  </audio-compat-skin>
+</audio-player>
+```
+
+## 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.
+
+## Own the UI
+
+Packaged skins keep their controls and layout inside Video.js. When you need to add, remove, rearrange, or deeply restyle controls, use Shadcn to add the skin source to your project. Its components, layout, styles, and interactions become local files you can change.
+
+- [Install Video.js with Shadcn](../../guides/installation-shadcn.md#choose-how-to-install): Add editable skin source and build a working React or HTML player

package/docs/reference/components/{audio-minimal-skin.md → audio-neutral-skin.md}

@@ -1,19 +1,19 @@
-# audio-minimal-skin
+# audio-neutral-skin
 
 The audio preset's visually lighter skin, closer to a classic control bar
 
-The minimal skin of the audio preset: the same player and the same controls in a visually lighter design, closer to a classic control bar. [AudioSkin](./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 audio preset ships.
+The neutral skin of the audio preset: the same player and the same controls in a visually lighter design, closer to a classic control bar. [AudioSkin](./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 audio preset ships.
 
 ## Import
 
 ```ts
-import '@videojs/html/audio/minimal-skin';
+import '@videojs/html/audio/neutral-skin';
 ```
 
 The import registers the skin and every UI element it composes. The [CDN](../../guides/cdn.md) player bundle registers this skin together with its player:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.4/audio-minimal.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.5/audio-neutral.js"></script>
 ```
 
 ## Usage
@@ -22,9 +22,9 @@ The skin goes between the player and the media element. It renders its controls
 
 ```html
 <audio-player>
-  <audio-minimal-skin>
+  <audio-neutral-skin>
     <audio src="audio.mp3"></audio>
-  </audio-minimal-skin>
+  </audio-neutral-skin>
 </audio-player>
 ```
 

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

@@ -2,7 +2,7 @@
 
 The audio preset's default skin with the modern, frosted look
 
-The default skin of the audio preset: the control layout for on-demand audio with the modern, frosted look. [MinimalAudioSkin](./audio-minimal-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 audio preset ships.
+The default skin of the audio preset: the control layout for on-demand audio with the modern, frosted look. [NeutralAudioSkin](./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 audio preset ships.
 
 ## Import
 
@@ -13,7 +13,7 @@ import '@videojs/html/audio/skin';
 The import registers the skin and every UI element it composes. The [CDN](../../guides/cdn.md) player bundle registers this skin together with its player:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.4/audio.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.5/audio.js"></script>
 ```
 
 ## Usage

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

@@ -13,7 +13,7 @@ import '@videojs/html/background/skin';
 The import registers the skin and every UI element it composes. The [CDN](../../guides/cdn.md) player bundle registers this skin together with its player:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.4/background.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.5/background.js"></script>
 ```
 
 ## Usage

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

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

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

@@ -132,7 +132,7 @@ State is reflected as data attributes for CSS styling.
 
 | Property | Type | Description |
 | --- | --- | --- |
-| `subtitlesShowing` | `boolean` | Whether captions/subtitles are currently enabled. |
+| `subtitlesShowing` | `boolean` | Whether a captions/subtitles track is showing. |
 | `label` | `{ key: string; text: string } \| string` | |
 | `availability` | `'available' \| 'unavailable'` | Whether caption/subtitle tracks are present. |
 | `disabled` | `boolean` | Non-interactive but still focusable (mirrors `aria-disabled`). |

package/docs/reference/components/captions-radio-group.md

@@ -191,7 +191,7 @@ State is reflected as data attributes for CSS styling.
 
 | Property | Type | Description |
 | --- | --- | --- |
-| `subtitlesShowing` | `boolean` | Whether captions/subtitles are currently enabled. |
+| `subtitlesShowing` | `boolean` | Whether a captions/subtitles track is showing. |
 | `label` | `{ key: string; text: string } \| string` | |
 | `value` | `string` | Current radio-group value. |
 | `options` | `readonly Option[]` | Ordered options displayed by platform adapters. |

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

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

package/docs/reference/components/controls.md

@@ -44,7 +44,7 @@ User activity is tracked via pointer movement, keyboard input, and focus events
 
 `<media-controls-backdrop>` is an optional presentational sibling of `<media-controls-content>`. It receives the same controls state data attributes, allowing its styling and transitions to be authored independently from the controls surface.
 
-By default, controls have the following styles:
+The controls parts ship no styles. These example rules provide click-through and fade behavior:
 
 ```css
 /* Click-through: clicks pass through controls to video beneath */
@@ -139,7 +139,7 @@ No ARIA role is applied to `<media-controls>` or `<media-controls-content>` —
 }
 
 .controls-backdrop:not([data-visible]),
-.media-controls:not([data-visible]) {
+.media-controls:not([data-visible]):not(:has(:focus-visible)) {
   opacity: 0;
 }
 

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

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

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

@@ -127,8 +127,8 @@ State is reflected as data attributes for CSS styling.
 
 | Property | Type | Description |
 | --- | --- | --- |
-| `fullscreen` | `boolean` | Whether fullscreen mode is currently active. |
 | `label` | `{ key: string; text: string } \| string` | |
+| `fullscreen` | `boolean` | Whether fullscreen mode is currently active. |
 | `availability` | `MediaFeatureAvailability` | Whether fullscreen can be requested on this platform. |
 | `disabled` | `boolean` | Non-interactive but still focusable (mirrors `aria-disabled`). |
 | `hidden` | `boolean` | Whether the button is hidden until fullscreen is available. |

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

@@ -2,7 +2,7 @@
 
 Options for the Google Cast extension that configures the receiver and load request
 
-Adds the [Google Cast extension](../../guides/architecture.md) to the player’s media. It renders nothing — place it inside the player as a sibling of the media element, and pair it with a [CastButton](./cast-button.md). See [Cast to AirPlay and Chromecast](../../guides/casting.md) for the complete setup.
+Adds the [Google Cast extension](../../guides/architecture.md) to the player. It renders nothing — place it anywhere inside the player, and pair it with a [CastButton](./cast-button.md). It follows whatever media the player attaches, a plain `<video>` included. See [Cast to AirPlay and Chromecast](../../guides/casting.md) for the complete setup.
 
 ## Import
 
@@ -17,7 +17,7 @@ import '@videojs/html/extensions/google-cast';
 Or load it from the [CDN](../../guides/cdn.md):
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.4/extensions/google-cast.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.5/extensions/google-cast.js"></script>
 ```
 
 ## Anatomy
@@ -31,12 +31,12 @@ Or load it from the [CDN](../../guides/cdn.md):
 | Attribute | Property | Description |
 | --- | --- | --- |
 | `receiver` | `receiver` | Cast receiver application ID. Defaults to Google’s Default Media Receiver (`CC1AD845`) |
-| `src` | `src` | Source URL loaded on the receiver. Defaults to the source the browser is playing |
+| `src` | `src` | Source URL loaded on the receiver. Defaults to the source the browser is playing. Required for YouTube and Vimeo embeds |
 | `content-type` | `contentType` | MIME type of the Cast source. When unset, the receiver infers it from the URL |
 | `stream-type` | `streamType` | Stream type reported to the receiver. Falls back to the player’s stream type |
 | — | `customData` | Custom data sent to the receiver with each load request |
 
-`customData` takes an object, so it’s a property only, with no matching attribute.
+`customData` takes an object, so it’s a property only, with no matching attribute. Set it on the element, typed as the `GoogleCastExtension` class that `@videojs/html/extensions/google-cast` exports.
 
 When the Cast `src` is an HLS playlist, Video.js detects the segment format and sets the receiver’s `hlsSegmentFormat` and `hlsVideoSegmentFormat` load-request fields. The Default Media Receiver plays HLS natively, so no extra receiver setup is needed.
 

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

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

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

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

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

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

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

@@ -17,7 +17,7 @@ import '@videojs/html/media/hlsjs-video';
 Or load it from the [CDN](../../guides/cdn.md):
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.4/media/hlsjs-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.5/media/hlsjs-video.js"></script>
 ```
 
 ## Examples
@@ -76,7 +76,7 @@ These Video.js-specific attributes configure media behavior:
 | `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. |
 | `preload` | `MediaPreloadType` | `'metadata'` | Preload type (`'none'` / `'metadata'` / `'auto'`). |
-| `source` | `{ src?: string; type?: 'application/vnd.apple.mpegurl' \| 'video/mp4'; preferPlayback?: 'mse' \| 'native'; 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. |
+| `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. |
 | `streamType` | `'on-demand' \| 'live' \| 'unknown'` | `'unknown'` | Current stream type (`'on-demand'` / `'live'` / `'unknown'`). |
 | `targetLiveWindow` | `number` | — | Read-only. Seekable range size for live content. `0` for standard live, `Infinity` for DVR, `NaN` for on-demand or unknown. Fires `targetlivewindowchange` when the value changes (bridged from the delegate). |