@videojs/html 10.0.0 → 10.1.0

package/docs/guides/autoplay.md

@@ -6,7 +6,7 @@ For the best chance of autoplay succeeding, start playback muted and enable inli
 
 ## Recommended approach
 
-Set autoplay, muted, and inline playback on the media element, and keep a manual play control available for when autoplay is blocked.
+Set autoplay, muted, and inline playback on the media component, and keep a manual play control available for when autoplay is blocked.
 
 **index.html**
 
@@ -112,7 +112,7 @@ These components default to muted, looping playback without player controls. Pro
 
 Do not rely on unmuted autoplay for a user’s first visit. Start playback from an explicit user action instead.
 
-Call `play()` on the media element from a click handler:
+Call `play()` on the media component from a click handler:
 
 ```html
 <video-player>
@@ -148,7 +148,7 @@ If autoplay is blocked, the player stays paused and the Play button remains in i
 
 ### The video opens fullscreen on iPhone
 
-Enable inline playback with the `playsinline` attribute on the media element.
+Enable inline playback with the `playsinline` attribute on the media component.
 
 ### The video starts without sound
 

package/docs/guides/build-with-ai.md

@@ -121,7 +121,7 @@ The old `npx @videojs/cli docs` workflow was removed. `@videojs/cli` now contain
 
 If your agent does not use the skill, start a new session or reload plugins, then ask it to use the Video.js skill explicitly. If it writes `videojs()`, `data-setup`, `registerPlugin`, or other Video.js 8 APIs, ask it to read the installed `llms.txt` before changing code.
 
-Report problems with the skill in the [videojs/skills repository](https://github.com/videojs/skills/issues). Report package and documentation problems in [videojs/v10](https://github.com/videojs/v10/issues).
+Report problems with the skill in the [videojs/skills repository](https://github.com/videojs/skills/issues). Report package and documentation problems in [videojs/video.js](https://github.com/videojs/video.js/issues).
 
 ## Use the docs
 

package/docs/guides/captions.md

@@ -8,7 +8,7 @@ Show captions and subtitles, and let users turn them on and pick a language.
 
 ## Recommended approach
 
-Add WebVTT tracks as `<track>` children of the media element, and give users a [`<media-captions-button>`](../reference/components/captions-button.md) to toggle them.
+Add WebVTT tracks as `<track>` children of the media component, and give users a [`<media-captions-button>`](../reference/components/captions-button.md) to toggle them.
 
 The `<track>` loads `/docs/demos/text-tracks/captions.vtt`, shown in the `captions.vtt` tab. Host a WebVTT file for your video and point `src` at its URL.
 
@@ -93,7 +93,7 @@ Toggle captions on and off with a single click.
 
 ## How it works
 
-The [text track feature](../reference/api/feature-text-tracks.md) mirrors the media element’s `textTracks` into player state:
+The [text track feature](../reference/api/feature-text-tracks.md) mirrors the media component’s `textTracks` into player state:
 
 - `textTrackList` holds every track with its `id`, `kind`, `label`, `language`, and `mode`.
 - `subtitlesShowing` is `true` when any caption or subtitle track is showing.
@@ -108,7 +108,7 @@ The browser renders the cues. Style them with the `::cue` pseudo-element.
 
 - Captions availability is `'unavailable'` until the media has at least one caption or subtitle track; caption controls render nothing in that case.
 - Cues load asynchronously. A track appears in `textTrackList` before its cues are parsed, so cue-driven UI fills in when the track finishes loading.
-- Cross-origin track files require CORS: serve the VTT with CORS headers and set `crossorigin` on the media element.
+- Cross-origin track files require CORS: serve the VTT with CORS headers and set `crossorigin` on the media component.
 - Track selection UIs identify tracks by `label` and `language`; give every track both.
 - `default` on a `<track>` marks it as the preferred initial track. The browser’s caption preferences can select another track.
 
@@ -155,7 +155,7 @@ Confirm that:
 
 ### Captions work locally but not in production
 
-The track file is served from another origin without CORS headers. Serve it with `Access-Control-Allow-Origin` and set `crossorigin` on the media element.
+The track file is served from another origin without CORS headers. Serve it with `Access-Control-Allow-Origin` and set `crossorigin` on the media component.
 
 ### The captions menu is empty
 
@@ -176,5 +176,5 @@ The radio group hides when there are no caption or subtitle tracks, but the exam
 ### Guides
 
 - [Show timeline thumbnail previews](./thumbnails.md): Preview frames along the timeline while the user scrubs, powered by a storyboard track.
-- [Media sources](./media-sources.md): Set what a media element plays and how its engine plays it with the structured source property
+- [Media sources](./media-sources.md): Set what a media component plays and how its engine plays it with the structured source property
 - [Accessibility](./accessibility.md): How Video.js approaches accessibility, and what you should consider if you're deeply customizing your player

package/docs/guides/casting.md

@@ -116,7 +116,7 @@ import '@videojs/html/ui/airplay-button';
 import '@videojs/html/ui/cast-button';
 ```
 
-The demo pairs the media element with the `<google-cast>` extension. Without that extension, `<media-cast-button>` drives the browser’s native Remote Playback API instead, which does not provide Video.js receiver or load-request configuration.
+The demo pairs the media component with the `<google-cast>` extension. Without that extension, `<media-cast-button>` drives the browser’s native Remote Playback API instead, which does not provide Video.js receiver or load-request configuration.
 
 ## How it works
 
@@ -130,7 +130,7 @@ AirPlay uses WebKit’s presentation APIs. Google Cast uses a sender and receive
 
 While connected, playback actions — play, pause, seek, volume — proxy to the remote device, and player state keeps reflecting the remote session. Local playback is suspended.
 
-Control playback and read its state through the player while casting: use the built-in controls or the [store actions and state](../reference/api/player-store.md) on the player element’s `store`. Don’t call methods on the media element or listen for its events to drive or track a session.
+Control playback and read its state through the player while casting: use the built-in controls or the [store actions and state](../reference/api/player-store.md) on the player element’s `store`. Don’t call methods on the media component or listen for its events to drive or track a session.
 
 For a custom control, call `promptRemotePlayback()` directly from the click handler and catch its promise. It rejects when no remote route exists or the browser refuses the request. A canceled Google Cast picker can also resolve without connecting, so show success only when `remotePlaybackState` is `'connected'`. The built-in buttons handle the request for you.
 
@@ -142,7 +142,7 @@ The Google Cast SDK loads only when the player includes the `<google-cast>` exte
 - Google Cast works only in Chromium-based browsers; elsewhere its route reports `'unsupported'`.
 - AirPlay works only in Safari; availability requires an AirPlay device reachable on the network.
 - The remote device fetches the source and its text tracks on its own. Localhost, VPN-only, expired, or cross-origin URLs without the necessary CORS headers will fail on the receiver even if they play in the browser.
-- Set the `disableremoteplayback` attribute on the media element to opt out entirely.
+- Set the `disableremoteplayback` attribute on the media component to opt out entirely.
 
 ## Common variations
 
@@ -172,7 +172,7 @@ The receiver cannot fetch the media. Confirm the source URL is reachable from th
 
 ### Custom UI shows local playback while casting
 
-The code reads or controls the media element directly. Read playback state from the player store and call its actions instead; only the player reflects the remote session.
+The code reads or controls the media component directly. Read playback state from the player store and call its actions instead; only the player reflects the remote session.
 
 ### The UI freezes on “connecting”
 
@@ -193,4 +193,4 @@ For Google Cast, track the `promptRemotePlayback()` promise separately from `rem
 
 ### Guides
 
-- [Media sources](./media-sources.md): Set what a media element plays and how its engine plays it with the structured source property
+- [Media sources](./media-sources.md): Set what a media component plays and how its engine plays it with the structured source property

package/docs/guides/cdn.md

@@ -27,7 +27,7 @@ Each installation [preset](./presets.md) ships its bundles at the package root:
 | `video-compat.js` | `<video-player>`, `<video-compat-skin>`, and the UI elements the compat skin composes |
 | `video-player.js` | `<video-player>` alone, for markup without a packaged skin |
 
-The other presets follow the same pattern. Background video is the exception: one bundle, `background.js`, registers the player, the skin, and the `<background-video>` media element.
+The other presets follow the same pattern. Background video is the exception: one bundle, `background.js`, registers the player, the skin, and the `<background-video>` media component.
 
 A skin bundle registers every UI element its skin is built from. Any element the skin does not compose is its own bundle under `ui/`.
 
@@ -36,19 +36,19 @@ A skin bundle registers every UI element its skin is built from. Any element the
 Each [UI element](./ui-components.md) is its own bundle under `ui/`, for markup that a skin bundle does not already cover: a player-only bundle, [skin source](./customize-skins.md#style-skin-source) that adds a component the packaged skin lacks, or a [dialog](../reference/components/dialog.md) your page opens beside a packaged skin.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0/video-player.js"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0/ui/play-button.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/video-player.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/ui/play-button.js"></script>
 ```
 
 Each path mirrors its npm subpath: `ui/play-button.js` registers the element that `@videojs/html/ui/play-button` does. Compound components list one bundle per part in their reference page’s Import section, and all of the bundles share chunks with the player.
 
 ## Media bundles
 
-The default presets play through the browser’s own `<video>` and `<audio>`. Every other [media element](./media-sources.md) is its own bundle under `media/`, loaded beside the player bundle:
+The default presets play through the browser’s own `<video>` and `<audio>`. Every other [media component](./media-sources.md) is its own bundle under `media/`, loaded beside the player bundle:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0/video.js"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0/media/hlsjs-video.js"></script>
+<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.1.0/media/hlsjs-video.js"></script>
 ```
 
 Each path mirrors its npm subpath. Elements with more than one playback engine keep the extra flavors in a directory named for the element, such as `media/mux-video/spf.js`. Load one flavor per page: every flavor claims the same tag name, and the first registration wins.
@@ -58,9 +58,9 @@ Each path mirrors its npm subpath. Elements with more than one playback engine k
 Each [extension](./architecture.md) is its own bundle under `extensions/`, loaded beside the player and media bundles:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0/video.js"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0/media/mux-video.js"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0/extensions/mux-data.js"></script>
+<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.1.0/media/mux-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/extensions/mux-data.js"></script>
 ```
 
 As with media, each path mirrors its npm subpath: `extensions/mux-data.js` registers the element that `@videojs/html/extensions/mux-data` does.
@@ -70,8 +70,8 @@ As with media, each path mirrors its npm subpath: `extensions/mux-data.js` regis
 English ships inside the skin bundles. Each other locale is a bundle under `locales/` that registers its translations on import. Load it before the player script to avoid a flash of English:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0/locales/es.js"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0/video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/locales/es.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/video.js"></script>
 ```
 
 One bundle exists per locale pack, plus bare-language aliases such as `pt`. For custom strings, see [Internationalize the player](./internationalization.md).

package/docs/guides/customize-skins.md

@@ -38,7 +38,7 @@ If you omit `--media-accent-text-color`, the skins choose a contrasting text col
 
 The skins use [`Inter`](https://rsms.me/inter/) when your page loads it and fall back to the system UI font. Video.js does not load the webfont for you. Set `--media-font-family` to use another font.
 
-The media element and poster share `--media-object-fit` and `--media-object-position`, so a `cover` poster stays aligned with `cover` video. See [Add a poster and loading placeholder](./poster.md).
+The media component and poster share `--media-object-fit` and `--media-object-position`, so a `cover` poster stays aligned with `cover` video. See [Add a poster and loading placeholder](./poster.md).
 
 ### Set the color scheme
 
@@ -96,7 +96,7 @@ The Shadcn installation guide handles project setup, lets you choose the skin an
 
 ### Use the installed skin
 
-The skin directory contains `skin.html`, `skin.ts`, and `skin.css`. Keep importing the player and media from `@videojs/html`. Import the installed `skin.ts` once, then paste the markup from `skin.html` inside your player around the media element.
+The skin directory contains `skin.html`, `skin.ts`, and `skin.css`. Keep importing the player and media from `@videojs/html`. Import the installed `skin.ts` once, then paste the markup from `skin.html` inside your player around the media component.
 
 ### Edit the installed files
 

package/docs/guides/features.md

@@ -24,7 +24,7 @@ For example, if you import `<video-player>` from the `/video` path, you will hav
 </video-player>
 ```
 
-Feature bundles are usually paired with specific skins and media elements in a **preset**. To learn more about this, and the available presets, you’ll want to check out the presets guide.
+Feature bundles are usually paired with specific skins and media components in a **preset**. To learn more about this, and the available presets, you’ll want to check out the presets guide.
 
 - [Learn more about presets](./presets.md)
 

package/docs/guides/fullscreen.md

@@ -77,7 +77,7 @@ import '@videojs/html/ui/fullscreen-button';
 The [fullscreen feature](../reference/api/feature-fullscreen.md) tracks fullscreen state and provides the actions:
 
 - `isFullscreen` is `true` while the player is fullscreen, from any path — your button, native controls, or the platform presentation.
-- `fullscreenAvailability` is `'available'`, `'unavailable'`, or `'unsupported'`. It starts as `'unavailable'`, then settles to `'available'` or `'unsupported'` when the feature attaches to a media element.
+- `fullscreenAvailability` is `'available'`, `'unavailable'`, or `'unsupported'`. It starts as `'unavailable'`, then settles to `'available'` or `'unsupported'` when the feature attaches to a media component.
 - `requestFullscreen()` and `exitFullscreen()` change the presentation. When the Fullscreen API is available, requests target the player container. Otherwise they fall back to the media element’s native presentation.
 
 Fullscreen and picture-in-picture are exclusive: requesting fullscreen exits an active picture-in-picture presentation first.

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.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
+npx @videojs/cli@10.1.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.0/video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.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.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
+npx @videojs/cli@10.1.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
@@ -214,7 +214,7 @@ pnpm dlx shadcn@latest registry add @videojs=https://shadcn.videojs.org/r/html/{
 
 ## Add the skin source
 
-Make sure the working tree is clean or checkpointed so every added or replaced file is reviewable; ask before committing. The add command overwrites an existing Video.js skin so catalog and theme changes fully apply. Review and remove obsolete Video.js style files left by a previous catalog. The later media step restores the selected media element after an overwrite.
+Make sure the working tree is clean or checkpointed so every added or replaced file is reviewable; ask before committing. The add command overwrites an existing Video.js skin so catalog and theme changes fully apply. Review and remove obsolete Video.js style files left by a previous catalog. The later media step restores the selected media component after an overwrite.
 
 ```bash
 pnpm dlx shadcn@latest add @videojs/video --overwrite --yes
@@ -222,14 +222,14 @@ pnpm dlx shadcn@latest add @videojs/video --overwrite --yes
 
 ## Add your player
 
-Use the aliases.components value from components.json when it differs from the generated @/components path: the skin file then lives under the directory that alias maps to instead of src/components, and the skin import uses that alias. Replace the <!-- Add a compatible media element here. --> placeholder in src/components/videojs/video/skin.html with the media snippet below. Size the video on the skin's root media-container by replacing its opening <media-container with the snippet below. Then replace the <!-- Paste the contents of src/components/videojs/video/skin.html here. --> comment in the page with the complete updated skin markup. Merge the example into the existing Vite route or component that should render the player, and preserve unrelated content.
+Use the aliases.components value from components.json when it differs from the generated @/components path: the skin file then lives under the directory that alias maps to instead of src/components, and the skin import uses that alias. Replace the <!-- Add a compatible media component here. --> placeholder in src/components/videojs/video/skin.html with the media snippet below. Size the video on the skin's root media-container by replacing its opening <media-container with the snippet below. Then replace the <!-- Paste the contents of src/components/videojs/video/skin.html here. --> comment in the page with the complete updated skin markup. Merge the example into the existing Vite route or component that should render the player, and preserve unrelated content.
 
 ### `src/components/videojs/video/skin.html`
 
-_Replace `<!-- Add a compatible media element here. -->` with this block._
+_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.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
+npx @videojs/cli@10.1.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.0
+pnpm add @videojs/html@10.1.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.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
+npx @videojs/cli@10.1.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.0
+pnpm add @videojs/html@10.1.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.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
+npx @videojs/cli@10.1.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.0
+pnpm add @videojs/html@10.1.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.0/locales/es.js"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0/video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/locales/es.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.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.0/locales/es.js';
-import { registerI18n } from 'https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0/i18n.js';
+import 'https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/locales/es.js';
+import { registerI18n } from 'https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.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.0/video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/video.js"></script>
 ```
 
 ### Switch locale at runtime

package/docs/guides/live-streams.md

@@ -16,7 +16,7 @@ pnpm add @videojs/html @videojs/hlsjs-video
 
 ## Recommended approach
 
-Use the live feature bundle with a streaming media element, and give users a `<media-live-button>`: it shows whether playback is at the live edge and seeks back to it when activated.
+Use the live feature bundle with a streaming media component, and give users a `<media-live-button>`: it shows whether playback is at the live edge and seeks back to it when activated.
 
 ```html
 <live-video-player>
@@ -119,7 +119,7 @@ Render live or on-demand controls from `streamType` when one player handles both
 
 ### The live badge never activates
 
-`<media-live-button>` reads `targetLiveWindow`, `currentTime`, and `seekable`. Confirm that `targetLiveWindow` is `0` or `Infinity` and that `seekable` has a finite end. Use a live-capable media element such as [`<hlsjs-video>`](../reference/components/hlsjs-video.md). The live button does not need `streamTypeFeature`; add it only when your own UI reads `streamType`.
+`<media-live-button>` reads `targetLiveWindow`, `currentTime`, and `seekable`. Confirm that `targetLiveWindow` is `0` or `Infinity` and that `seekable` has a finite end. Use a live-capable media component such as [`<hlsjs-video>`](../reference/components/hlsjs-video.md). The live button does not need `streamTypeFeature`; add it only when your own UI reads `streamType`.
 
 ### Playback keeps falling behind the edge
 
@@ -145,4 +145,4 @@ Compare the slider’s range with `seekable`. The built-in slider always starts
 
 ### Guides
 
-- [Media sources](./media-sources.md): Set what a media element plays and how its engine plays it with the structured source property
+- [Media sources](./media-sources.md): Set what a media component plays and how its engine plays it with the structured source property

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.0. 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.1.0. Links are relative paths to files in this directory.
 
 ## Getting Started
 
@@ -18,7 +18,7 @@ Install Video.js, customize a skin, understand its main pieces, check browser an
 - [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
 
@@ -43,10 +43,10 @@ Understanding-oriented pages that explain how and why things work. Read these to
 
 - [Features](./features.md): The state and actions each feature adds to the player
 - [Skins](./skins.md): Packaged player designs that include both UI components and their styles.
-- [Presets](./presets.md): Pre-packaged player configurations that bundle state management, skins, and media elements for specific use cases.
+- [Presets](./presets.md): Pre-packaged player configurations that bundle state management, skins, and media components for specific use cases.
 - [UI components](./ui-components.md): How Video.js UI components use focused elements, data attributes for state, and compound composition.
 - [Accessibility](./accessibility.md): How Video.js approaches accessibility, and what you should consider if you're deeply customizing your player
-- [Media sources](./media-sources.md): Set what a media element plays and how its engine plays it with the structured source property
+- [Media sources](./media-sources.md): Set what a media component plays and how its engine plays it with the structured source property
 
 ## Playback
 
@@ -73,6 +73,7 @@ Guides for one player capability each: the recommended setup, how it works, brow
 
 Guides for moving an existing player integration to Video.js v10, one per player you might be coming from.
 
+- [Migrate to Video.js v10](./migrate.md): Understand how Video.js v10 differs from the players it brings together, and choose the migration guide for the player you use today.
 - [Migrate from Video.js 8](./migrate-from-video-js-8.md): Move a Video.js 8 integration to v10, mapping the options object, techs, plugins, and player API onto composed components
 - [Migrate from Mux Player](./migrate-from-mux-player.md): Move a Mux Player embed to Video.js v10 using a player, media component, skin, and analytics extension
 - [Migrate from Plyr](./migrate-from-plyr.md): Move an existing Plyr integration to Video.js v10, mapping Plyr options and its instance API onto components and player state

package/docs/guides/media-sources.md

@@ -1,8 +1,8 @@
 # Media sources
 
-Set what a media element plays and how its engine plays it with the structured source property
+Set what a media component plays and how its engine plays it with the structured source property
 
-Every media element takes a `src`. Elements that drive a playback engine also take `source`, a structured object that carries the URL alongside everything else about that source:
+Every media component takes a `src`. Elements that drive a playback engine also take `source`, a structured object that carries the URL alongside everything else about that source:
 
 ```ts
 const video = document.querySelector('hlsjs-video');
@@ -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.0/video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.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.0/ui/seek-button.js`
-- `media-playback-rate-button`: `https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0/ui/playback-rate-button.js`
-- `media-thumbnail`: `https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0/ui/thumbnail.js`
+- `media-seek-button`: `https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/ui/seek-button.js`
+- `media-playback-rate-button`: `https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/ui/playback-rate-button.js`
+- `media-thumbnail`: `https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/ui/thumbnail.js`
 
 Load each with `<script type="module" src="…"></script>`. See [CDN](./cdn.md) for individual component bundles.