@videojs/html 10.0.1 → 10.2.0

package/docs/guides/installation-cdn.md

@@ -30,7 +30,7 @@ npx @videojs/cli agents init
 
 - `project`: Whether to adapt the current project or scaffold a new one. New projects need a named app setup. Values: `new`, `existing`. Default: existing.
 - `preset`: The player configuration and control set. Values: `video`, `audio`, `live-video`, `live-audio`, `background-video`. Default: video.
-- `skin`: The visual skin. Neutral has cleaner surfaces and the same controls as Default. Values: `default`, `neutral`, `compat`, `none`. Default: default. Applies when preset is not background-video.
+- `skin`: The visual skin. Neutral has cleaner surfaces and the same controls as Default. Values: `default`, `neutral`, `compat`, `scaffold`, `none`. Default: default. Applies when preset is not background-video.
 - `media`: The media source or playback adapter. See the preset compatibility map below. Values: `background-video`, `hls-background-video`, `cloudflare`, `dash`, `hls`, `html5-audio`, `html5-video`, `mux-audio`, `mux-background-video`, `mux-video`, `spotify`, `tiktok`, `twitch`, `vimeo`, `youtube`. Default: the selected preset's first compatible media source.
 - `extensions`: A comma-separated list of optional player extensions compatible with the selected player. Pass `none` when no extension is needed. Values: `none`, `google-cast`, `mux-data`. Default: mux-data for Mux media; none otherwise (reported as defaulted).
 - `source-url`: The http:// or https:// media URL placed in the generated player example. Pass `demo` to choose the Video.js demo source for the selected media explicitly. Default: the Video.js demo source for the selected media (reported as defaulted).
@@ -89,7 +89,7 @@ Defaulted options: project, preset, skin, source-url, media, extensions, templat
 ## Reproduce or change these instructions
 
 ```sh
-npx @videojs/cli@10.0.1 agents init --method cdn --framework html --project existing --preset video --skin default --media html5-video --extensions none --source-url https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4 --template none
+npx @videojs/cli@10.2.0 agents init --method cdn --framework html --project existing --preset video --skin default --media html5-video --extensions none --source-url https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4 --template none
 ```
 
 ## Load Video.js
@@ -101,7 +101,7 @@ Add these module scripts to the page head. Module scripts are deferred, so they
 _Merge this into the page `<head>`._
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/video.js"></script>
 ```
 
 ## Add your player
@@ -129,7 +129,7 @@ _Merge this into the page `<body>` where the player should appear._
         and display of the media. They are easily swappable
         to handle different sources.
       -->
-    <video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" playsinline></video>
+    <video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" playsinline><a href="https://videojs.org/help">Video player not working?</a></video>
   </video-skin>
 </video-player>
 ```

package/docs/guides/installation-shadcn.md

@@ -31,7 +31,7 @@ npx @videojs/cli agents init
 - `framework`: The application framework that will host the player. React installs @videojs/react; HTML, Vue, and Svelte install @videojs/html. Values: `react`, `html`. Default: react.
 - `project`: Whether to adapt the current project or scaffold a new one. New projects need a named app setup. Values: `new`, `existing`. Default: existing.
 - `preset`: The player configuration and control set. Values: `video`, `audio`, `live-video`, `live-audio`. Default: video.
-- `skin`: The visual skin. Neutral has cleaner surfaces and the same controls as Default. Values: `default`, `neutral`, `compat`. Default: default. Applies when preset is not background-video.
+- `skin`: The visual skin. Neutral has cleaner surfaces and the same controls as Default. Values: `default`, `neutral`, `compat`, `scaffold`. Default: default. Applies when preset is not background-video.
 - `media`: The media source or playback adapter. See the preset compatibility map below. Values: `background-video`, `hls-background-video`, `cloudflare`, `dash`, `hls`, `html5-audio`, `html5-video`, `mux-audio`, `mux-background-video`, `mux-video`, `spotify`, `tiktok`, `twitch`, `vimeo`, `youtube`. Default: the selected preset's first compatible media source.
 - `extensions`: A comma-separated list of optional player extensions compatible with the selected player. Pass `none` when no extension is needed. Values: `none`, `google-cast`, `mux-data`. Default: mux-data for Mux media; none otherwise (reported as defaulted).
 - `source-url`: The http:// or https:// media URL placed in the generated player example. Pass `demo` to choose the Video.js demo source for the selected media explicitly. Default: the Video.js demo source for the selected media (reported as defaulted).
@@ -94,7 +94,7 @@ Defaulted options: project, preset, skin, source-url, media, extensions, templat
 ## Reproduce or change these instructions
 
 ```sh
-npx @videojs/cli@10.0.1 agents init --method shadcn --framework html --project existing --preset video --skin default --media html5-video --extensions none --source-url https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4 --package-manager pnpm --template vite --styling css
+npx @videojs/cli@10.2.0 agents init --method shadcn --framework html --project existing --preset video --skin default --media html5-video --extensions none --source-url https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4 --package-manager pnpm --template vite --styling css
 ```
 
 ## Configure app aliases
@@ -229,7 +229,7 @@ Use the aliases.components value from components.json when it differs from the g
 _Replace `<!-- Add a compatible media component here. -->` with this block._
 
 ```html
-<video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" playsinline></video>
+<video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" playsinline><a href="https://videojs.org/help">Video player not working?</a></video>
 ```
 
 ### `src/components/videojs/video/skin.html`

package/docs/guides/installation-svelte.md

@@ -30,7 +30,7 @@ npx @videojs/cli agents init
 
 - `project`: Whether to adapt the current project or scaffold a new one. New projects need a named app setup. Values: `new`, `existing`. Default: existing.
 - `preset`: The player configuration and control set. Values: `video`, `audio`, `live-video`, `live-audio`, `background-video`. Default: video.
-- `skin`: The visual skin. Neutral has cleaner surfaces and the same controls as Default. Values: `default`, `neutral`, `compat`, `none`. Default: default. Applies when preset is not background-video.
+- `skin`: The visual skin. Neutral has cleaner surfaces and the same controls as Default. Values: `default`, `neutral`, `compat`, `scaffold`, `none`. Default: default. Applies when preset is not background-video.
 - `media`: The media source or playback adapter. See the preset compatibility map below. Values: `background-video`, `hls-background-video`, `cloudflare`, `dash`, `hls`, `html5-audio`, `html5-video`, `mux-audio`, `mux-background-video`, `mux-video`, `spotify`, `tiktok`, `twitch`, `vimeo`, `youtube`. Default: the selected preset's first compatible media source.
 - `extensions`: A comma-separated list of optional player extensions compatible with the selected player. Pass `none` when no extension is needed. Values: `none`, `google-cast`, `mux-data`. Default: mux-data for Mux media; none otherwise (reported as defaulted).
 - `source-url`: The http:// or https:// media URL placed in the generated player example. Pass `demo` to choose the Video.js demo source for the selected media explicitly. Default: the Video.js demo source for the selected media (reported as defaulted).
@@ -90,13 +90,13 @@ Defaulted options: project, preset, skin, source-url, media, extensions, templat
 ## Reproduce or change these instructions
 
 ```sh
-npx @videojs/cli@10.0.1 agents init --method packaged --framework svelte --project existing --preset video --skin default --media html5-video --extensions none --source-url https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4 --package-manager pnpm --template vite
+npx @videojs/cli@10.2.0 agents init --method packaged --framework svelte --project existing --preset video --skin default --media html5-video --extensions none --source-url https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4 --package-manager pnpm --template vite
 ```
 
 ## Install the packages
 
 ```bash
-pnpm add @videojs/html@10.0.1
+pnpm add @videojs/html@10.2.0
 ```
 
 ## Add your player
@@ -152,7 +152,7 @@ _Merge this into the existing file, or create the file when it is missing._
 </script>
 
 <VideoPlayer>
-  <video src={"https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"} playsinline></video>
+  <video src={"https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"} playsinline><a href="https://videojs.org/help">Video player not working?</a></video>
 </VideoPlayer>
 ```
 
@@ -191,4 +191,4 @@ That’s it! You now have a working Video.js player.
 - [CDN](./cdn.md): See every bundle the CDN serves and the layout rules behind the URLs
 - [Self-host the player](./self-hosting.md): Serve the player from your own origin for offline or restricted-network deployments
 
-Something not quite right? You can [submit an issue](https://github.com/videojs/v10/issues) and ask for help, or explore [other support options](https://videojs.org/html5-video-support).
+Something not quite right? You can [submit an issue](https://github.com/videojs/video.js/issues) and ask for help, or explore [other support options](https://videojs.org/support).

package/docs/guides/installation-vue.md

@@ -30,7 +30,7 @@ npx @videojs/cli agents init
 
 - `project`: Whether to adapt the current project or scaffold a new one. New projects need a named app setup. Values: `new`, `existing`. Default: existing.
 - `preset`: The player configuration and control set. Values: `video`, `audio`, `live-video`, `live-audio`, `background-video`. Default: video.
-- `skin`: The visual skin. Neutral has cleaner surfaces and the same controls as Default. Values: `default`, `neutral`, `compat`, `none`. Default: default. Applies when preset is not background-video.
+- `skin`: The visual skin. Neutral has cleaner surfaces and the same controls as Default. Values: `default`, `neutral`, `compat`, `scaffold`, `none`. Default: default. Applies when preset is not background-video.
 - `media`: The media source or playback adapter. See the preset compatibility map below. Values: `background-video`, `hls-background-video`, `cloudflare`, `dash`, `hls`, `html5-audio`, `html5-video`, `mux-audio`, `mux-background-video`, `mux-video`, `spotify`, `tiktok`, `twitch`, `vimeo`, `youtube`. Default: the selected preset's first compatible media source.
 - `extensions`: A comma-separated list of optional player extensions compatible with the selected player. Pass `none` when no extension is needed. Values: `none`, `google-cast`, `mux-data`. Default: mux-data for Mux media; none otherwise (reported as defaulted).
 - `source-url`: The http:// or https:// media URL placed in the generated player example. Pass `demo` to choose the Video.js demo source for the selected media explicitly. Default: the Video.js demo source for the selected media (reported as defaulted).
@@ -90,13 +90,13 @@ Defaulted options: project, preset, skin, source-url, media, extensions, templat
 ## Reproduce or change these instructions
 
 ```sh
-npx @videojs/cli@10.0.1 agents init --method packaged --framework vue --project existing --preset video --skin default --media html5-video --extensions none --source-url https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4 --package-manager pnpm --template vite
+npx @videojs/cli@10.2.0 agents init --method packaged --framework vue --project existing --preset video --skin default --media html5-video --extensions none --source-url https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4 --package-manager pnpm --template vite
 ```
 
 ## Install the packages
 
 ```bash
-pnpm add @videojs/html@10.0.1
+pnpm add @videojs/html@10.2.0
 ```
 
 ## Register custom elements
@@ -182,7 +182,7 @@ import VideoPlayer from './components/VideoPlayer.vue';
 
 <template>
   <VideoPlayer>
-    <video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" playsinline></video>
+    <video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" playsinline><a href="https://videojs.org/help">Video player not working?</a></video>
   </VideoPlayer>
 </template>
 ```
@@ -222,4 +222,4 @@ That’s it! You now have a working Video.js player.
 - [CDN](./cdn.md): See every bundle the CDN serves and the layout rules behind the URLs
 - [Self-host the player](./self-hosting.md): Serve the player from your own origin for offline or restricted-network deployments
 
-Something not quite right? You can [submit an issue](https://github.com/videojs/v10/issues) and ask for help, or explore [other support options](https://videojs.org/html5-video-support).
+Something not quite right? You can [submit an issue](https://github.com/videojs/video.js/issues) and ask for help, or explore [other support options](https://videojs.org/support).

package/docs/guides/installation.md

@@ -30,7 +30,7 @@ npx @videojs/cli agents init
 
 - `project`: Whether to adapt the current project or scaffold a new one. New projects need a named app setup. Values: `new`, `existing`. Default: existing.
 - `preset`: The player configuration and control set. Values: `video`, `audio`, `live-video`, `live-audio`, `background-video`. Default: video.
-- `skin`: The visual skin. Neutral has cleaner surfaces and the same controls as Default. Values: `default`, `neutral`, `compat`, `none`. Default: default. Applies when preset is not background-video.
+- `skin`: The visual skin. Neutral has cleaner surfaces and the same controls as Default. Values: `default`, `neutral`, `compat`, `scaffold`, `none`. Default: default. Applies when preset is not background-video.
 - `media`: The media source or playback adapter. See the preset compatibility map below. Values: `background-video`, `hls-background-video`, `cloudflare`, `dash`, `hls`, `html5-audio`, `html5-video`, `mux-audio`, `mux-background-video`, `mux-video`, `spotify`, `tiktok`, `twitch`, `vimeo`, `youtube`. Default: the selected preset's first compatible media source.
 - `extensions`: A comma-separated list of optional player extensions compatible with the selected player. Pass `none` when no extension is needed. Values: `none`, `google-cast`, `mux-data`. Default: mux-data for Mux media; none otherwise (reported as defaulted).
 - `source-url`: The http:// or https:// media URL placed in the generated player example. Pass `demo` to choose the Video.js demo source for the selected media explicitly. Default: the Video.js demo source for the selected media (reported as defaulted).
@@ -92,13 +92,13 @@ Defaulted options: project, preset, skin, source-url, media, extensions, templat
 ## Reproduce or change these instructions
 
 ```sh
-npx @videojs/cli@10.0.1 agents init --method packaged --framework html --project existing --preset video --skin default --media html5-video --extensions none --source-url https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4 --package-manager pnpm --template vite
+npx @videojs/cli@10.2.0 agents init --method packaged --framework html --project existing --preset video --skin default --media html5-video --extensions none --source-url https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4 --package-manager pnpm --template vite
 ```
 
 ## Install the packages
 
 ```bash
-pnpm add @videojs/html@10.0.1
+pnpm add @videojs/html@10.2.0
 ```
 
 ## Add your player
@@ -135,7 +135,7 @@ _Merge this into the page `<body>` where the player should appear._
         and display of the media. They are easily swappable
         to handle different sources.
       -->
-    <video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" playsinline></video>
+    <video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" playsinline><a href="https://videojs.org/help">Video player not working?</a></video>
   </video-skin>
 </video-player>
 
@@ -179,4 +179,4 @@ Packaged skins keep their controls and layout inside Video.js. When you need to
 - [CDN](./cdn.md): See every bundle the CDN serves and the layout rules behind the URLs
 - [Self-host the player](./self-hosting.md): Serve the player from your own origin for offline or restricted-network deployments
 
-Something not quite right? You can [submit an issue](https://github.com/videojs/v10/issues) and ask for help, or explore [other support options](https://videojs.org/html5-video-support).
+Something not quite right? You can [submit an issue](https://github.com/videojs/video.js/issues) and ask for help, or explore [other support options](https://videojs.org/support).

package/docs/guides/internationalization.md

@@ -199,8 +199,8 @@ import '@videojs/html/i18n/locales/ja/register';
 CDN locale modules call `registerI18n` on import. Pin every URL to the same version:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/locales/es.js"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/locales/es.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/video.js"></script>
 ```
 
 Use the same pinned version for your locale pack, `i18n.js`, and player script. Copies loaded in the same window share a registry; matching versions keeps their translation keys and APIs compatible. Import the full locale pack before partial overrides, and register before the player loads to translate the first render:
@@ -208,15 +208,15 @@ Use the same pinned version for your locale pack, `i18n.js`, and player script.
 **my-locale.js**
 
 ```js
-import 'https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/locales/es.js';
-import { registerI18n } from 'https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/i18n.js';
+import 'https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/locales/es.js';
+import { registerI18n } from 'https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/i18n.js';
 
 registerI18n('es', { buttons: { play: 'Reproducir', pause: 'Pausa' } });
 ```
 
 ```html
 <script type="module" src="/my-locale.js"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/video.js"></script>
 ```
 
 ### Switch locale at runtime

package/docs/guides/llms.txt

@@ -1,6 +1,6 @@
 # Video.js v10 — HTML Guides
 
-> Installation, migration, concepts, playback guides, customization, and tooling for Video.js. Bundled with `@videojs/html` v10.0.1. Links are relative paths to files in this directory.
+> Installation, migration, concepts, playback guides, customization, and tooling for Video.js. Bundled with `@videojs/html` v10.2.0. Links are relative paths to files in this directory.
 
 ## Getting Started
 
@@ -14,11 +14,12 @@ Install Video.js, customize a skin, understand its main pieces, check browser an
 - [Build your own UI component](./build-your-own-component.md): Create custom player controls that read state, dispatch actions, and stay accessible.
 - [Architecture](./architecture.md): How Video.js players are structured — state, UI, media, and extensions
 - [Customize skins](./customize-skins.md): Style a packaged Video.js skin or add its source to change controls, layout, styles, and interactions
+- [Build your own skin](./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?](./why-videojs.md): The open-source video player for React and HTML. Lightweight, accessible components built for performance and streaming.
 - [Browser support](./browser-support.md): Browsers and rendering environments supported by Video.js 10, and how the packaged skins reach them
 - [Build with AI](./build-with-ai.md): Install the Video.js skill and give AI coding agents version-matched docs for building and migrating players
 - [v10 Roadmap](./v10-roadmap.md): Where Video.js v10 stands, what comes after 10.0, and the support plan for Video.js 8
-- [Contribute to Video.js](https://github.com/videojs/v10/blob/main/CONTRIBUTING.md)
+- [Contribute to Video.js](https://github.com/videojs/video.js/blob/main/CONTRIBUTING.md)
 
 ## Frameworks
 

package/docs/guides/media-sources.md

@@ -91,6 +91,7 @@ Engine options live under `source.engine`, **namespaced by engine**. Each key th
 | `engine.spotify` | [`<spotify-audio>`](../reference/components/spotify-audio.md) | [Spotify embed options](https://developer.spotify.com/documentation/embeds) |
 | `engine.tiktok` | [`<tiktok-video>`](../reference/components/tiktok-video.md) | [TikTok player parameters](https://developers.tiktok.com/doc/embed-player) |
 | `engine.twitch` | [`<twitch-video>`](../reference/components/twitch-video.md) | [Twitch embed parameters](https://dev.twitch.tv/docs/embed/video-and-clips/) |
+| `engine.playerJs` | [`<playerjs-video>`](../reference/components/playerjs-video.md) | URL parameters for whichever service serves the embed |
 
 Naming the engine rather than using one generic key matters where an element has more than one to choose from. `<hlsjs-video>` plays through hls.js or through the browser depending on the platform and `preferPlayback`, and only one of them runs — so a single source can describe both paths without either engine reading the other’s options.
 

package/docs/guides/migrate-from-media-chrome.md

@@ -46,14 +46,14 @@ Before loading Video.js HTML, remove every Media Chrome import and CDN script fr
 For a page without a bundler, load the CDN video preset. It registers the player, the UI elements and icons used in the controller example below, and the `<media-i18n>` element:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/video.js"></script>
 ```
 
 Some elements in the mapping table below need separate bundles. If you use any of these elements, also load its bundle:
 
-- `media-seek-button`: `https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/ui/seek-button.js`
-- `media-playback-rate-button`: `https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/ui/playback-rate-button.js`
-- `media-thumbnail`: `https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/ui/thumbnail.js`
+- `media-seek-button`: `https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/ui/seek-button.js`
+- `media-playback-rate-button`: `https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/ui/playback-rate-button.js`
+- `media-thumbnail`: `https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/ui/thumbnail.js`
 
 Load each with `<script type="module" src="…"></script>`. See [CDN](./cdn.md) for individual component bundles.
 

package/docs/guides/migrate-from-mux-player.md

@@ -68,9 +68,9 @@ The examples keep a playback ID, analytics metadata, and a poster from two secon
 From the CDN, load the video [preset](./presets.md), the Mux media, and analytics:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/video.js"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/media/mux-video.js"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/extensions/mux-data.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/media/mux-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/extensions/mux-data.js"></script>
 
 <video-player content-title="Test VOD">
   <video-skin style="aspect-ratio: 16 / 9">
@@ -421,8 +421,8 @@ Mux Player switches to live controls automatically. In Video.js, choose the live
 Register the live preset and Mux media. From the CDN:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/live-video.js"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/media/mux-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/mux-video.js"></script>
 
 <live-video-player>
   <live-video-skin>
@@ -452,7 +452,7 @@ Use [`createPlayer`](../reference/api/html-create-player.md) to build a player e
 The live skin already includes a live button. If you build your own controls, use that same component and style it to match your app. It keeps track of whether playback is live and returns viewers to the newest available point in the stream.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/ui/live-button.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/ui/live-button.js"></script>
 
 <media-live-button class="station-live-button">On air</media-live-button>
 ```

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.0.1/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.0.1/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.0.1/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.0.1/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.0.1/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.0.1/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.0.1/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/video.js) 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.0.1/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.0.1/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:
@@ -255,6 +255,14 @@ Then swap the tag:
 
 Your VHS tuning options don’t have direct equivalents. Settings such as rendition capping and bandwidth hints are engine-specific. Configure them through the engine you chose. Video.js has no shared options object for these settings.
 
+The exception is `html5.vhs.withCredentials`. Cookie-gated streams on another origin (CloudFront signed cookies and the like) need the standard `crossorigin="use-credentials"` on the media element, which both HLS components honor for every manifest and segment request, the same way the browser does under native playback:
+
+```html
+<hls-video src="https://cdn.example.com/stream.m3u8" crossorigin="use-credentials"></hls-video>
+```
+
+As with a plain `<video>`, the CDN has to answer with `Access-Control-Allow-Credentials: true` and a specific `Access-Control-Allow-Origin`, not `*`.
+
 ## Customize your player
 
 In v8, you customized the player with options, `addChild`, component subclasses, or CSS overrides on `.vjs-*` selectors. In v10, choose a skin, restyle it with CSS custom properties, or edit its source. Try these approaches in order.
@@ -315,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.0.1/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>
@@ -438,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.0.1/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' },
@@ -458,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.0.1/live-video.js"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/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.0.1/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.0.1/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/migrate.md

@@ -14,4 +14,5 @@ That also means v10+ is not a drop-in upgrade for any of these players. Migratio
 - [Mux Player](./migrate-from-mux-player.md): Move from a single player element to separate player, media, and skin components.
 - [Plyr](./migrate-from-plyr.md): Map your existing options, controls, and instance API to v10.
 - [Media Chrome](./migrate-from-media-chrome.md): Map your controller, elements, and attributes to their v10 equivalents.
-- [Vidstack](./migrate-from-vidstack.md): Map your Vidstack player, providers, layouts, and media store onto v10’s composed components.
+- [Vidstack](./migrate-from-vidstack.md): Map your Vidstack player, providers, layouts, and media store onto v10’s composed components.
+- [Video-React](https://videojs.org/docs/framework/react/guides/migrate-from-video-react) (React only): Map your `Player` props, control bar children, and player ref onto v10’s React components and hooks.

package/docs/guides/presets.md

@@ -30,11 +30,11 @@ The video, audio, live video, and live audio presets also export Compat skins. F
 
 | Import | Description | Details |
 | --- | --- | --- |
-| `@videojs/html/video` | General-purpose video player preset with full playback controls. | **Feature bundle:** `videoFeatures`; **Features:** [playback](../reference/api/feature-playback.md), [playbackRate](../reference/api/feature-playback-rate.md), [quality](../reference/api/feature-quality.md), [audioTrack](../reference/api/feature-audio-track.md), [volume](../reference/api/feature-volume.md), [time](../reference/api/feature-time.md), [source](../reference/api/feature-source.md), [buffer](../reference/api/feature-buffer.md), [fullscreen](../reference/api/feature-fullscreen.md), [pip](../reference/api/feature-pip.md), [remotePlayback](../reference/api/feature-remote-playback.md), [controls](../reference/api/feature-controls.md), [textTrack](../reference/api/feature-text-tracks.md), [error](../reference/api/feature-error.md), [metadata](../reference/api/feature-metadata.md); **Skins:** `<video-compat-skin>`, `<video-neutral-skin>`, `<video-skin>`; **Default media component:** `<video>` |
-| `@videojs/html/audio` | Audio-only player preset with playback and volume controls. | **Feature bundle:** `audioFeatures`; **Features:** [playback](../reference/api/feature-playback.md), [playbackRate](../reference/api/feature-playback-rate.md), [volume](../reference/api/feature-volume.md), [time](../reference/api/feature-time.md), [source](../reference/api/feature-source.md), [buffer](../reference/api/feature-buffer.md), [error](../reference/api/feature-error.md), [metadata](../reference/api/feature-metadata.md); **Skins:** `<audio-compat-skin>`, `<audio-neutral-skin>`, `<audio-skin>`; **Default media component:** `<audio>` |
+| `@videojs/html/video` | General-purpose video player preset with full playback controls. | **Feature bundle:** `videoFeatures`; **Features:** [playback](../reference/api/feature-playback.md), [playbackRate](../reference/api/feature-playback-rate.md), [quality](../reference/api/feature-quality.md), [audioTrack](../reference/api/feature-audio-track.md), [volume](../reference/api/feature-volume.md), [time](../reference/api/feature-time.md), [source](../reference/api/feature-source.md), [buffer](../reference/api/feature-buffer.md), [fullscreen](../reference/api/feature-fullscreen.md), [pip](../reference/api/feature-pip.md), [remotePlayback](../reference/api/feature-remote-playback.md), [controls](../reference/api/feature-controls.md), [textTrack](../reference/api/feature-text-tracks.md), [error](../reference/api/feature-error.md), [metadata](../reference/api/feature-metadata.md); **Skins:** `<video-compat-skin>`, `<video-neutral-skin>`, `<video-scaffold-skin>`, `<video-skin>`; **Default media component:** `<video>` |
+| `@videojs/html/audio` | Audio-only player preset with playback and volume controls. | **Feature bundle:** `audioFeatures`; **Features:** [playback](../reference/api/feature-playback.md), [playbackRate](../reference/api/feature-playback-rate.md), [volume](../reference/api/feature-volume.md), [time](../reference/api/feature-time.md), [source](../reference/api/feature-source.md), [buffer](../reference/api/feature-buffer.md), [error](../reference/api/feature-error.md), [metadata](../reference/api/feature-metadata.md); **Skins:** `<audio-compat-skin>`, `<audio-neutral-skin>`, `<audio-scaffold-skin>`, `<audio-skin>`; **Default media component:** `<audio>` |
 | `@videojs/html/background` | Ambient background video preset with no user controls. | **Feature bundle:** `backgroundFeatures`; **Features:** –; **Skins:** `<background-video-skin>`; **Default media component:** `<background-video>` |
-| `@videojs/html/live-audio` | Live audio player preset — `audio` minus playback rate, plus the live feature, with a skin that swaps the time slider and time displays for a Live button. | **Feature bundle:** `liveAudioFeatures`; **Features:** [playback](../reference/api/feature-playback.md), [volume](../reference/api/feature-volume.md), [time](../reference/api/feature-time.md), [source](../reference/api/feature-source.md), [buffer](../reference/api/feature-buffer.md), [error](../reference/api/feature-error.md), [live](../reference/api/feature-live.md), [metadata](../reference/api/feature-metadata.md); **Skins:** `<live-audio-compat-skin>`, `<live-audio-neutral-skin>`, `<live-audio-skin>`; **Default media component:** `<audio>` |
-| `@videojs/html/live-video` | Live video player preset — `video` minus playback rate, quality selection, and audio-track selection, plus the live feature, with a skin that swaps the time slider and time displays for a Live button. | **Feature bundle:** `liveVideoFeatures`; **Features:** [playback](../reference/api/feature-playback.md), [volume](../reference/api/feature-volume.md), [time](../reference/api/feature-time.md), [source](../reference/api/feature-source.md), [buffer](../reference/api/feature-buffer.md), [fullscreen](../reference/api/feature-fullscreen.md), [pip](../reference/api/feature-pip.md), [remotePlayback](../reference/api/feature-remote-playback.md), [controls](../reference/api/feature-controls.md), [textTrack](../reference/api/feature-text-tracks.md), [error](../reference/api/feature-error.md), [live](../reference/api/feature-live.md), [metadata](../reference/api/feature-metadata.md); **Skins:** `<live-video-compat-skin>`, `<live-video-neutral-skin>`, `<live-video-skin>`; **Default media component:** `<video>` |
+| `@videojs/html/live-audio` | Live audio player preset — `audio` minus playback rate, plus the live feature, with a skin that swaps the time slider and time displays for a Live button. | **Feature bundle:** `liveAudioFeatures`; **Features:** [playback](../reference/api/feature-playback.md), [volume](../reference/api/feature-volume.md), [time](../reference/api/feature-time.md), [source](../reference/api/feature-source.md), [buffer](../reference/api/feature-buffer.md), [error](../reference/api/feature-error.md), [live](../reference/api/feature-live.md), [metadata](../reference/api/feature-metadata.md); **Skins:** `<live-audio-compat-skin>`, `<live-audio-neutral-skin>`, `<live-audio-scaffold-skin>`, `<live-audio-skin>`; **Default media component:** `<audio>` |
+| `@videojs/html/live-video` | Live video player preset — `video` minus playback rate, quality selection, and audio-track selection, plus the live feature, with a skin that swaps the time slider and time displays for a Live button. | **Feature bundle:** `liveVideoFeatures`; **Features:** [playback](../reference/api/feature-playback.md), [volume](../reference/api/feature-volume.md), [time](../reference/api/feature-time.md), [source](../reference/api/feature-source.md), [buffer](../reference/api/feature-buffer.md), [fullscreen](../reference/api/feature-fullscreen.md), [pip](../reference/api/feature-pip.md), [remotePlayback](../reference/api/feature-remote-playback.md), [controls](../reference/api/feature-controls.md), [textTrack](../reference/api/feature-text-tracks.md), [error](../reference/api/feature-error.md), [live](../reference/api/feature-live.md), [metadata](../reference/api/feature-metadata.md); **Skins:** `<live-video-compat-skin>`, `<live-video-neutral-skin>`, `<live-video-scaffold-skin>`, `<live-video-skin>`; **Default media component:** `<video>` |
 
 Each preset has a reference page that lists its player, feature bundle, skins, media, and exports:
 

package/docs/guides/self-hosting.md

@@ -38,20 +38,20 @@ Bundle a single file when you already build your front end. Download the release
 
 ### Download the release archive
 
-[Video.js releases](https://github.com/videojs/v10/releases) provide a `videojs-cdn-<version>.zip` (and a `.tar.gz`) holding the prebuilt player. Use it when your deployment installs dependencies outside npm, or when you want a versioned artifact to vendor into your own repository.
+[Video.js releases](https://github.com/videojs/video.js/releases) provide a `videojs-cdn-<version>.zip` (and a `.tar.gz`) holding the prebuilt player. Use it when your deployment installs dependencies outside npm, or when you want a versioned artifact to vendor into your own repository.
 
 Unpack it into whatever your server treats as static files:
 
 ```bash
-VIDEOJS_VERSION=10.0.1
-curl -fLO "https://github.com/videojs/v10/releases/download/@videojs/cdn@${VIDEOJS_VERSION}/videojs-cdn-${VIDEOJS_VERSION}.zip"
+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/
 ```
 
 Then point a script tag at the player you want:
 
 ```html
-<script type="module" src="/videojs-cdn-10.0.1/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.0.1",
+        "version": "10.2.0",
         "type": "drupal-library",
+        "extra": {
+          "installer-name": "videojs-cdn"
+        },
         "dist": {
           "type": "zip",
-          "url": "https://github.com/videojs/v10/releases/download/@videojs/cdn@10.0.1/videojs-cdn-10.0.1.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.0.1"
+    "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