@videojs/html 10.1.0 → 10.2.0

package/docs/guides/migrate-from-plyr.md

@@ -72,7 +72,7 @@ The Neutral skin is the closest built-in starting point for this migration.
 For an HTML page without a bundler, load the CDN preset:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/video-neutral.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/video-neutral.js"></script>
 
 <video-player poster="/path/to/poster.jpg">
   <video-neutral-skin style="aspect-ratio: 16 / 9">
@@ -119,7 +119,7 @@ The SPF [HLS video](../reference/components/hls-video.md) component is an altern
 Replace `<video>` with `<hlsjs-video>`. If you’re using the CDN, add an additional script:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/media/hlsjs-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/media/hlsjs-video.js"></script>
 ```
 
 For a bundler installation, install the adapter package and add the media import:
@@ -141,7 +141,7 @@ Use the DASH media component for an unprotected DASH source. For DRM-protected D
 Replace `<video>` with `<dash-video>`. If you’re using the CDN, add an additional script:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/media/dash-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/media/dash-video.js"></script>
 ```
 
 For a package-manager installation, install the DASH adapter package and add the media import:
@@ -163,7 +163,7 @@ Use the Vimeo media component for your existing Vimeo source.
 Replace `<video>` with `<vimeo-video>`. For a CDN installation, add the media script:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/media/vimeo-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/media/vimeo-video.js"></script>
 ```
 
 For a bundler installation, install the adapter package and add the module import:
@@ -185,7 +185,7 @@ Use the YouTube media component for your existing YouTube source.
 Replace `<video>` with `<youtube-video>`. For a CDN installation, add the media script:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/media/youtube-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/media/youtube-video.js"></script>
 ```
 
 For a bundler installation, install the adapter package and add the module import:
@@ -216,7 +216,7 @@ To select a locale, wrap the player in `<media-i18n>` and set `lang` to your loc
 
 ```html
 <script type="module">
-  import { registerI18n } from 'https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/i18n.js';
+  import { registerI18n } from 'https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/i18n.js';
 
   registerI18n('en', {
     buttons: {
@@ -229,7 +229,7 @@ To select a locale, wrap the player in `<media-i18n>` and set `lang` to your loc
   });
 </script>
 
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/video-neutral.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/video-neutral.js"></script>
 
 <video-player>
   <video-neutral-skin>

package/docs/guides/migrate-from-video-js-8.md

@@ -4,7 +4,7 @@ Move a Video.js 8 integration to v10, mapping the options object, techs, plugins
 
 Move your Video.js 8 setup to v10 by replacing `videojs()` with a player, media component, and skin. This guide maps your options, techs, plugins, and imperative calls to those pieces.
 
-Video.js 10 ships as scoped `@videojs/*` packages. The `video.js` npm package remains Video.js 8; its [repository](https://github.com/videojs/videojs-v8) and [docs](https://legacy.videojs.org) remain available.
+Video.js 10 ships as scoped `@videojs/*` packages. The `video.js` npm package contains no player; install `video.js@8` to stay on Video.js 8, whose [repository](https://github.com/videojs/videojs-v8) and [docs](https://legacy.videojs.org) remain available.
 
 ## Before you migrate
 
@@ -65,7 +65,7 @@ Here’s a standard v8 setup: one file, captions, a poster, and the default skin
 Load the video [preset](./presets.md) from the CDN and put your media inside its skin:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/video.js"></script>
 
 <video-player poster="/poster.jpg">
   <video-skin style="aspect-ratio: 16 / 9">
@@ -230,7 +230,7 @@ SPF and native HLS are included as dependencies of the HTML and React packages.
 For hls.js video from the CDN:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/media/hlsjs-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/media/hlsjs-video.js"></script>
 ```
 
 With a package manager, install the adapter and import its HTML registration:
@@ -323,7 +323,7 @@ Move license URLs from v8’s `keySystems` configuration to `source.drm`, keyed
 
 The examples configure Widevine. Replace both URL placeholders and add every key system your supported browsers need.
 
-With a bundler, install `@videojs/shaka-video` and import `@videojs/html/media/shaka-video`. From the CDN, load `https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/media/shaka-video.js` in a `<script type="module">` tag. Then replace the media component inside your player’s skin with:
+With a bundler, install `@videojs/shaka-video` and import `@videojs/html/media/shaka-video`. From the CDN, load `https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/media/shaka-video.js` in a `<script type="module">` tag. Then replace the media component inside your player’s skin with:
 
 ```html
 <shaka-video id="protected-media"></shaka-video>
@@ -446,7 +446,7 @@ For a CDN page, register string overrides in a module script:
 
 ```html
 <script type="module">
-  import { registerI18n } from 'https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/i18n.js';
+  import { registerI18n } from 'https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/i18n.js';
 
   registerI18n('en', {
     buttons: { play: 'Start video', pause: 'Pause video' },
@@ -466,8 +466,8 @@ Replace `liveui` or `audioOnlyMode` with the matching live or audio [preset](./p
 Load the live preset and the hls.js media component:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/live-video.js"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/media/hlsjs-video.js"></script>
+<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.2.0/media/hlsjs-video.js"></script>
 
 <live-video-player>
   <live-video-skin>

package/docs/guides/migrate-from-vidstack.md

@@ -154,7 +154,7 @@ What changed:
 Load the bundle as a module script. From the CDN, the video preset is one script:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/video.js"></script>
 ```
 
 Pin every Video.js CDN URL on a page to the same version; see [CDN](./cdn.md).
@@ -233,7 +233,7 @@ Vidstack’s `<media-provider>` read `src`, guessed a type from the extension or
 | Vimeo | [`<vimeo-video>`](../reference/components/vimeo-video.md) | `@videojs/vimeo-video` |
 | Remotion | No equivalent ([#3053](https://github.com/videojs/v10/issues/3053)) | |
 
-Register each media component with `import '@videojs/html/media/<name>'`, or load `https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/media/<name>.js` from the CDN, where the engine is already bundled.
+Register each media component with `import '@videojs/html/media/<name>'`, or load `https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/media/<name>.js` from the CDN, where the engine is already bundled.
 
 ### HLS and DASH
 
@@ -755,7 +755,7 @@ import '@videojs/html/media/hlsjs-video';
 ```
 
 - **DVR comes from the stream.** `live:dvr` becomes `targetLiveWindow === Infinity`, which the media reports for event playlists. There’s no way to force DVR on a sliding window. Add a time slider in skin source to let viewers seek.
-- **The live edge moved to the live button.** `liveEdge`, `userBehindLiveEdge`, and `seekToLiveEdge()` become the live button’s state and behavior. It counts playback as live within 5 seconds of the stream’s live edge start, which already sits behind the seekable end by the playlist’s hold-back. Vidstack counted the last `liveEdgeTolerance` seconds before the seekable end, 10 by default and configurable ([#1730](https://github.com/videojs/v10/issues/1730)).
+- **The live edge moved to the live button.** `liveEdge`, `userBehindLiveEdge`, and `seekToLiveEdge()` become the live button’s state and behavior. It counts playback as live within 5 seconds of the stream’s live edge start, which already sits behind the seekable end by the media’s live latency. The hls.js media uses the hls.js target latency, which `source.engine.hlsJs` can change; the other media derive it from the stream. Vidstack counted the last `liveEdgeTolerance` seconds before the seekable end, 10 by default and configurable ([#1730](https://github.com/videojs/v10/issues/1730)).
 - **`streamType` needs a feature.** No preset includes `streamTypeFeature`; add it to a custom player when one player switches between live and on-demand UI.
 - **Live presets are narrower.** They leave out playback rate, quality, and audio-track state. Build a player from a feature list to add them back.
 

package/docs/guides/self-hosting.md

@@ -43,7 +43,7 @@ Bundle a single file when you already build your front end. Download the release
 Unpack it into whatever your server treats as static files:
 
 ```bash
-VIDEOJS_VERSION=10.1.0
+VIDEOJS_VERSION=10.2.0
 curl -fLO "https://github.com/videojs/video.js/releases/download/@videojs/cdn@${VIDEOJS_VERSION}/videojs-cdn-${VIDEOJS_VERSION}.zip"
 unzip "videojs-cdn-${VIDEOJS_VERSION}.zip" -d public/
 ```
@@ -51,7 +51,7 @@ unzip "videojs-cdn-${VIDEOJS_VERSION}.zip" -d public/
 Then point a script tag at the player you want:
 
 ```html
-<script type="module" src="/videojs-cdn-10.1.0/video.js"></script>
+<script type="module" src="/videojs-cdn-10.2.0/video.js"></script>
 ```
 
 The archive holds the same production bundles the CDN serves, minus sourcemaps and development builds. Every path inside it is relative, so it runs from any origin with no outbound requests. `SHA256SUMS` on the release verifies the download.
@@ -67,22 +67,25 @@ For Composer-based projects such as Drupal, declare the archive as a package:
       "type": "package",
       "package": {
         "name": "videojs/cdn",
-        "version": "10.1.0",
+        "version": "10.2.0",
         "type": "drupal-library",
+        "extra": {
+          "installer-name": "videojs-cdn"
+        },
         "dist": {
           "type": "zip",
-          "url": "https://github.com/videojs/video.js/releases/download/@videojs/cdn@10.1.0/videojs-cdn-10.1.0.zip"
+          "url": "https://github.com/videojs/video.js/releases/download/@videojs/cdn@10.2.0/videojs-cdn-10.2.0.zip"
         }
       }
     }
   ],
   "require": {
-    "videojs/cdn": "10.1.0"
+    "videojs/cdn": "10.2.0"
   }
 }
 ```
 
-Composer strips the archive’s top-level directory, so the player lands directly in your libraries path.
+Composer strips the archive’s top-level directory, and `installer-name` sets the install directory, so the player lands in `libraries/videojs-cdn/`.
 
 ### Mirror the prebuilt CDN files
 

package/docs/guides/skins.md

@@ -51,6 +51,7 @@ The skin source contains the complete interface. You can add, remove, rearrange,
 
 You can also build an interface without starting from a skin. In that model, you choose and arrange individual [UI components](./ui-components.md) around the media. This takes more work, but it avoids inheriting a skin’s layout and interactions.
 
+- [Build your own skin](./build-your-own-skin.md)
 - [Build your own component](./build-your-own-component.md)
 
 ## Skins, features, and presets

package/docs/llms.txt

@@ -1,10 +1,10 @@
 # Video.js v10 — HTML Documentation
 
-> Bundled with `@videojs/html` v10.1.0. Links are relative paths to files in this directory.
+> Bundled with `@videojs/html` v10.2.0. Links are relative paths to files in this directory.
 
 > Install the [Video.js skill](https://github.com/videojs/skills) to help AI coding agents find version-matched pages from this index.
 
-> The `video.js` package on npm is still Video.js 8. Video.js 10 ships as `@videojs/html`; to move existing Video.js 8 code, read https://videojs.org/docs/framework/html/guides/migrate-from-video-js-8.md
+> The `video.js` package on npm contains no player; install `video.js@8` to stay on Video.js 8. Video.js 10 ships as `@videojs/html`; to move existing Video.js 8 code, read https://videojs.org/docs/framework/html/guides/migrate-from-video-js-8.md
 
 > Vidstack Player is in security-only maintenance. To move existing `vidstack` code, read https://videojs.org/docs/framework/html/guides/migrate-from-vidstack.md
 
@@ -28,6 +28,7 @@ Install Video.js, customize a skin, understand its main pieces, check browser an
 - [Build your own UI component](./guides/build-your-own-component.md): Create custom player controls that read state, dispatch actions, and stay accessible.
 - [Architecture](./guides/architecture.md): How Video.js players are structured — state, UI, media, and extensions
 - [Customize skins](./guides/customize-skins.md): Style a packaged Video.js skin or add its source to change controls, layout, styles, and interactions
+- [Build your own skin](./guides/build-your-own-skin.md): Create a skin project, preview it locally, and compose your own player interface from Video.js UI components
 - [Why Video.js?](./guides/why-videojs.md): The open-source video player for React and HTML. Lightweight, accessible components built for performance and streaming.
 - [Browser support](./guides/browser-support.md): Browsers and rendering environments supported by Video.js 10, and how the packaged skins reach them
 - [Build with AI](./guides/build-with-ai.md): Install the Video.js skill and give AI coding agents version-matched docs for building and migrating players

package/docs/reference/api/llms.txt

@@ -1,6 +1,6 @@
 # Video.js v10 — HTML API
 
-> API reference for the player factory, presets, store controllers, features, translation tools, and utilities. Bundled with `@videojs/html` v10.1.0. Links are relative paths to files in this directory.
+> API reference for the player factory, presets, store controllers, features, translation tools, and utilities. Bundled with `@videojs/html` v10.2.0. Links are relative paths to files in this directory.
 
 ## Player
 

package/docs/reference/api/preset-audio.md

@@ -14,7 +14,7 @@ import '@videojs/html/audio/skin';
 Import `@videojs/html/audio/neutral-skin` instead for the neutral skin. Or load one [CDN](../../guides/cdn.md) bundle that registers the player and a skin together:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/audio.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/audio.js"></script>
 ```
 
 `audio-neutral.js` registers the neutral skin instead, and `audio-player.js` registers `<audio-player>` alone.

package/docs/reference/api/preset-background.md

@@ -15,7 +15,7 @@ import '@videojs/html/background/video';
 Or load the [CDN](../../guides/cdn.md) bundle that registers all three:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/background.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/background.js"></script>
 ```
 
 Unlike the other presets, the background preset has one bundle and no player-only bundle.

package/docs/reference/api/preset-live-audio.md

@@ -14,7 +14,7 @@ import '@videojs/html/live-audio/skin';
 Import `@videojs/html/live-audio/neutral-skin` instead for the neutral skin. Or load one [CDN](../../guides/cdn.md) bundle that registers the player and a skin together:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/live-audio.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/live-audio.js"></script>
 ```
 
 `live-audio-neutral.js` registers the neutral skin instead, and `live-audio-player.js` registers `<live-audio-player>` alone.

package/docs/reference/api/preset-live-video.md

@@ -14,7 +14,7 @@ import '@videojs/html/live-video/skin';
 Import `@videojs/html/live-video/neutral-skin` instead for the neutral skin. Or load one [CDN](../../guides/cdn.md) bundle that registers the player and a skin together:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/live-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/live-video.js"></script>
 ```
 
 `live-video-neutral.js` registers the neutral skin instead, and `live-video-player.js` registers `<live-video-player>` alone.

package/docs/reference/api/preset-video.md

@@ -14,7 +14,7 @@ import '@videojs/html/video/skin';
 Import `@videojs/html/video/neutral-skin` instead for the neutral skin. Or load one [CDN](../../guides/cdn.md) bundle that registers the player and a skin together:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/video.js"></script>
 ```
 
 `video-neutral.js` registers the neutral skin instead, and `video-player.js` registers `<video-player>` alone.

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

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

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

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

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

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

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

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.1.0/media/background-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/media/background-video.js"></script>
 ```
 
 ## Examples

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.1.0/media/cloudflare-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/media/cloudflare-video.js"></script>
 ```
 
 ## Load a source

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

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

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

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

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

@@ -13,7 +13,7 @@ import '@videojs/html/media/hls-audio';
 Or load it from the [CDN](../../guides/cdn.md):
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/media/hls-audio.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/media/hls-audio.js"></script>
 ```
 
 ## Examples
@@ -39,50 +39,4 @@ Or load it from the [CDN](../../guides/cdn.md):
 
 ```ts
 import '@videojs/html/media/hls-audio';
-```
-
-## API Reference
-
-### Attributes
-
-Forwards these standard media attributes to the internal `<audio>`. See the [MDN media element reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio): `autopictureinpicture`, `autoplay`, `controls`, `controlslist`, `crossorigin`, `disablepictureinpicture`, `disableremoteplayback`, `loading`, `loop`, `muted`, `playsinline`, `poster`, `preload`, `src`.
-
-These Video.js-specific attributes configure media behavior:
-
-| Attribute | Type | Default | Description |
-| --- | --- | --- | --- |
-| `stream-type` | `MediaStreamType` | — | Current stream type (`'on-demand'`, `'live'`, or `'unknown'`). Defaults to `'unknown'`; detecting hosts update it automatically, and consumers can set it to override detection. |
-
-### Properties
-
-| Property | Type | Default | Description |
-| --- | --- | --- | --- |
-| `alternativeMediaSuggestion` | `string \| undefined` | — | Read-only. A complete sentence naming the Media to reach for when this one can't play a source. Appended to the copy this adapter logs. Empty here, and overridden the same way as on the video adapter — see its note. `hls-audio` has no better-equipped sibling of its own; the Mux audio Media built on this engine does, and points at the hls.js-backed one. |
-| `contentData` | `MediaContentData \| undefined` | — | Read-only. |
-| `crossOrigin` | `'anonymous' \| 'use-credentials' \| null` | `null` | |
-| `disableRemotePlayback` | `boolean` | `false` | |
-| `engine` | `{ state: { [K in keyof S]-?: Signal<S[K]> }; context: { [K in keyof C]-?: Signal<C[K]> }; destroy(): Promise<void> }` | — | Read-only. Underlying playback engine — the low-level SPF reactive composition that drives playback. An advanced escape hatch for direct engine access; normal playback is driven through this element's own properties and methods. |
-| `error` | `{ code: number; message: string; data?: unknown } \| null` | — | Read-only. The current fatal error, or `null`. Only *fatal* conditions appear here — the engine reports non-fatal ones too, which stay in `engine.state.errors`. Resets per source. Fires `'error'` when set. |
-| `liveEdgeStart` | `number` | — | Read-only. |
-| `preload` | `'' \| 'none' \| 'metadata' \| 'auto'` | `''` | Preload type (`'none'` / `'metadata'` / `'auto'`). |
-| `source` | `{ src?: string; type?: string; drm?: Partial<Record<string, DrmSystemConfig>> } \| null` | `null` | Structured source, the same shape the video flavor takes so one object serves either. `drm` is accepted and inert: this engine composes no EME. It is kept in the shape rather than removed so a source can be handed to both flavors — and because Mux encrypts video renditions and leaves audio clear, so a protected playback ID plays here regardless. |
-| `src` | `string` | `''` | |
-| `streamType` | `MediaStreamType` | — | Current stream type (`'on-demand'`, `'live'`, or `'unknown'`). Defaults to `'unknown'`; detecting hosts update it automatically, and consumers can set it to override detection. |
-| `targetLiveWindow` | `number` | — | Read-only. |
-
-Also exposes these properties from the native media API. See [HTMLAudioElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement) for details: `autoplay`, `buffered`, `controls`, `currentSrc`, `currentTime`, `defaultMuted`, `defaultPlaybackRate`, `duration`, `ended`, `loop`, `muted`, `paused`, `playbackRate`, `played`, `readyState`, `remote`, `seekable`, `seeking`, `textTracks`, `title`, `volume`.
-
-### Methods
-
-Supports these media methods. See [HTMLAudioElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement) for details: `addTextTrack`, `canPlayType`, `load`, `pause`, `play`.
-
-### Events
-
-Re-dispatches these standard media events from the internal media element: `abort`, `addtrack`, `canplay`, `canplaythrough`, `change`, `contentdatachange`, `durationchange`, `emptied`, `ended`, `loadeddata`, `loadedmetadata`, `loadstart`, `pause`, `play`, `playing`, `progress`, `ratechange`, `removetrack`, `seeked`, `seeking`, `stalled`, `suspend`, `timeupdate`, `volumechange`, `waiting`.
-
-Also emits these Video.js-specific events:
-
-| Event | Description |
-| --- | --- |
-| `error` | Fired when a fatal condition is reported. Read `error` for it. |
-| `sourcechange` | Fired when `source` changes. Read `source` for the new value. |
+```

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.1.0/media/hls-background-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/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.1.0/media/hls-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/media/hls-video.js"></script>
 ```
 
 ## Examples
@@ -54,68 +54,4 @@ The CDN must answer with `Access-Control-Allow-Credentials: true` and a specific
 
 ```html
 <hls-video src="https://cdn.example.com/stream.m3u8" crossorigin="use-credentials"></hls-video>
-```
-
-## API Reference
-
-### Attributes
-
-Forwards these standard media attributes to the internal `<video>`. See the [MDN media element reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video): `autopictureinpicture`, `autoplay`, `controls`, `controlslist`, `crossorigin`, `disablepictureinpicture`, `disableremoteplayback`, `loading`, `loop`, `muted`, `playsinline`, `poster`, `preload`, `src`.
-
-These Video.js-specific attributes configure media behavior:
-
-| Attribute | Type | Default | Description |
-| --- | --- | --- | --- |
-| `stream-type` | `'on-demand' \| 'live' \| 'unknown'` | `'unknown'` | The source's stream type — `'live'`, `'on-demand'`, or `'unknown'` until a media playlist has been parsed. Setting a non-`'unknown'` value pins a user override (detection stops updating it); setting `'unknown'` reverts to the engine's detected value. |
-
-### Properties
-
-| Property | Type | Default | Description |
-| --- | --- | --- | --- |
-| `alternativeMediaSuggestion` | `string \| undefined` | — | Read-only. A complete sentence naming the Media to reach for when this one can't play a source — `Try the hls.js-backed Mux media instead: import the hls-js flavor in place of the spf one.` Appended to the copy this adapter surfaces, and to the notices it logs. Name the flavor, not an import path: a Media is reached through several packages, each with its own counterpart. Empty here: `hls-video` has no better-equipped sibling to point at. A Media that does (a Mux Video built on this engine, whose hls.js-backed counterpart plays MPEG-TS and DRM) overrides this static, and its copy gains the second sentence with no other change. |
-| `contentData` | `MediaContentData \| undefined` | — | Read-only. |
-| `crossOrigin` | `'anonymous' \| 'use-credentials' \| null` | `null` | |
-| `disableRemotePlayback` | `boolean` | `false` | |
-| `engine` | `{ state: { [K in keyof S]-?: Signal<S[K]> }; context: { [K in keyof C]-?: Signal<C[K]> }; destroy(): Promise<void> }` | — | Read-only. Underlying playback engine — the low-level SPF reactive composition that drives playback. An advanced escape hatch for direct engine access; normal playback is driven through this element's own properties and methods. |
-| `error` | `{ code: number; message: string; data?: unknown } \| null` | — | Read-only. The current fatal error, or `null`. Only *fatal* conditions appear here — the engine reports non-fatal ones too (they stay in `engine.state.errors`), and promoting them would tell a consumer playback had failed when it hadn't. Resets per source. Fires `'error'` when set. |
-| `isFullscreen` | `boolean` | — | Read-only. |
-| `isPictureInPicture` | `boolean` | — | Read-only. |
-| `liveEdgeStart` | `number` | — | Read-only. Presentation time marking the start of the live-edge window — playback at `currentTime >= liveEdgeStart` counts as "at the live edge" (the same target the engine's `seekToLiveEdge` seeks to: window end − HOLD-BACK). `NaN` when the stream isn't live or nothing is resolved yet. Derived at read time from the engine's live window — no change event; re-read on `timeupdate`/`progress` (as the store's live feature does). |
-| `preload` | `'' \| 'none' \| 'metadata' \| 'auto'` | `''` | Preload type (`'none'` / `'metadata'` / `'auto'`). |
-| `source` | `{ src?: string; type?: string; drm?: Partial<Record<string, DrmSystemConfig>> } \| null` | `null` | Structured source: the manifest URL plus what a URL cannot carry, which today is the license servers for protected content. Setting it derives `src`. Assigning the same object back costs nothing — changing anything takes a new one. |
-| `src` | `string` | `''` | |
-| `streamType` | `'on-demand' \| 'live' \| 'unknown'` | `'unknown'` | The source's stream type — `'live'`, `'on-demand'`, or `'unknown'` until a media playlist has been parsed. Setting a non-`'unknown'` value pins a user override (detection stops updating it); setting `'unknown'` reverts to the engine's detected value. |
-| `targetLiveWindow` | `number` | — | Read-only. The target live window: `NaN` for on-demand (or unknown), `0` for standard sliding-window live, `Infinity` for DVR (`#EXT-X-PLAYLIST-TYPE:EVENT`). Fires `targetlivewindowchange` on change. |
-| `webkitCurrentPlaybackTargetIsWireless` | `boolean \| undefined` | — | Read-only. |
-| `webkitPresentationMode` | `WebKitPresentationMode \| undefined` | — | Read-only. |
-| `webkitSetPresentationMode` | `((mode: WebKitPresentationMode) => void) \| undefined` | — | Read-only. |
-
-Also exposes these properties from the native media API. See [HTMLVideoElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement) for details: `autoplay`, `buffered`, `controls`, `currentSrc`, `currentTime`, `defaultMuted`, `defaultPlaybackRate`, `disablePictureInPicture`, `duration`, `ended`, `loop`, `muted`, `paused`, `playbackRate`, `played`, `playsInline`, `poster`, `readyState`, `remote`, `seekable`, `seeking`, `textTracks`, `title`, `videoHeight`, `videoWidth`, `volume`.
-
-### 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`.
-
-### Events
-
-Re-dispatches these standard media events from the internal media element: `abort`, `addtrack`, `canplay`, `canplaythrough`, `change`, `contentdatachange`, `durationchange`, `emptied`, `ended`, `enterpictureinpicture`, `leavepictureinpicture`, `loadeddata`, `loadedmetadata`, `loadstart`, `pause`, `play`, `playing`, `progress`, `ratechange`, `removetrack`, `resize`, `seeked`, `seeking`, `stalled`, `suspend`, `timeupdate`, `volumechange`, `waiting`.
-
-Also emits these Video.js-specific events:
-
-| Event | Description |
-| --- | --- |
-| `error` | Fired when a fatal condition is reported. Read `error` for it. |
-| `sourcechange` | Fired when `source` changes. Read `source` for the new value. |
-| `streamtypechange` | Fired when the detected stream type changes. Read `streamType` for the new value. |
-| `targetlivewindowchange` | Fired when the target live window changes. Read `targetLiveWindow` for the new value. |
-
-### CSS custom properties
-
-| Variable | Description |
-| --- | --- |
-| `--media-video-border-radius` | Border radius of the video element. |
-| `--media-object-fit` | Object fit for the video. |
-| `--media-object-position` | Object position for the video. |
-| `--media-caption-track-duration` | Duration of the caption track transition. |
-| `--media-caption-track-delay` | Delay before the caption track transition. |
-| `--media-caption-track-y` | Vertical offset of the caption track. |
+```

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

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

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

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

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

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

package/docs/reference/components/llms.txt

@@ -1,6 +1,6 @@
 # Video.js v10 — HTML Components
 
-> API reference for skins, media components, extensions, and interface components. Bundled with `@videojs/html` v10.1.0. Links are relative paths to files in this directory.
+> API reference for skins, media components, extensions, and interface components. Bundled with `@videojs/html` v10.2.0. Links are relative paths to files in this directory.
 
 ## Layout