@videojs/html 10.0.0-rc.5 → 10.0.1

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-rc.5/video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/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-rc.5/ui/seek-button.js`
-- `media-playback-rate-button`: `https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.5/ui/playback-rate-button.js`
-- `media-thumbnail`: `https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.5/ui/thumbnail.js`
+- `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`
 
 Load each with `<script type="module" src="…"></script>`. See [CDN](./cdn.md) for individual component bundles.
 

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

@@ -43,7 +43,7 @@ Make a migration checklist before changing your embed:
 
 - **List the Mux Player attributes or React props you set.** Compare them with the mapping tables below.
 - **Grep your codebase for `mux-player` selectors.** After the swap, CSS rules and `querySelector` calls that reach into the element stop matching, with no error. Look for patterns such as `mux-player::part(…)`, `mux-player [role="slider"]`, and `player.shadowRoot`. Restyle the UI with the skin’s custom properties or rebuild it with Video.js components.
-- **Find your event listeners and imperative calls** (`play()`, `currentTime`, `addChapters`). Media APIs move to the media element; the rest is mapped under [Drive playback](#drive-playback).
+- **Find your event listeners and imperative calls** (`play()`, `currentTime`, `addChapters`). Media APIs move to the media component; the rest is mapped under [Drive playback](#drive-playback).
 - **Note your theme and CSS variables.** Compare your Mux Player theme with the two Video.js skins, and map its CSS variables.
 - **Check [Known gaps](#known-gaps)** for features your app needs.
 - **Check your catalog for MPEG-TS, raw ADTS AAC, AES-128, low-latency HLS, or DVR streams.** Check whether the SPF engine supports these requirements. If you use DRM, verify playback with whichever engine you choose. See [Which Mux media should you use?](#which-mux-media-should-you-use).
@@ -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.0-rc.5/video.js"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.5/media/mux-video.js"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.5/extensions/mux-data.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.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>
 
 <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.0-rc.5/live-video.js"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.5/media/mux-video.js"></script>
+<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>
 
 <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.0-rc.5/ui/live-button.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/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.0-rc.5/video-neutral.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/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.0-rc.5/media/hlsjs-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/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.0-rc.5/media/dash-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/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.0-rc.5/media/vimeo-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/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.0-rc.5/media/youtube-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/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.0-rc.5/i18n.js';
+  import { registerI18n } from 'https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/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.0-rc.5/video-neutral.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/video-neutral.js"></script>
 
 <video-player>
   <video-neutral-skin>
@@ -382,5 +382,5 @@ For changes to controls, layout, or icons, add the skin source to your project.
 ### Guides
 
 - [Features](./features.md): The state and actions each feature adds to the 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
 - [Customize skins](./customize-skins.md): Style a packaged Video.js skin or add its source to change controls, layout, styles, and interactions

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

@@ -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.0-rc.5/video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/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.0-rc.5/media/hlsjs-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/media/hlsjs-video.js"></script>
 ```
 
 With a package manager, install the adapter and import its HTML registration:
@@ -315,7 +315,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.0-rc.5/media/shaka-video.js` in a `<script type="module">` tag. Then replace the media element 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.0.1/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>
@@ -337,7 +337,7 @@ document.querySelector('#protected-media').source = {
 
 ### Events
 
-Your media element is a real media element, so every event you already listen for still fires on it. Keep your listeners, and attach them to the media element instead of the v8 player.
+Your media component is a real media element, so every event you already listen for still fires on it. Keep your listeners, and attach them to the media component instead of the v8 player.
 
 ```js
 // Video.js 8
@@ -394,13 +394,13 @@ Replace v8 accessor methods with [player state](../reference/api/player-store.md
 | `player.volume()` / `player.volume(0.5)` | `volume` in player state / `media.volume = 0.5` |
 | `player.muted()` / `player.muted(true)` | `muted` in player state / the player’s `setMuted(true)` |
 | `player.playbackRate()` / `player.playbackRate(1.5)` | `playbackRate` in player state / the player’s `setPlaybackRate(1.5)` |
-| `player.src({ src, type })` | set `src` on the media or replace the media element (`<video>` tag, `<hlsjs-video>`, `<dash-video>`, etc) |
+| `player.src({ src, type })` | set `src` on the media or replace the media component (`<video>` tag, `<hlsjs-video>`, `<dash-video>`, etc) |
 | `player.requestFullscreen()`, `exitFullscreen()` | the player’s `requestFullscreen`, `exitFullscreen` |
 | `player.textTracks()`, `addRemoteTextTrack()` | `<track>` elements; read `textTrackList` from player state or `textTracks` from the media |
 | `player.audioTracks()` | `audioTrackList` in player state, `audioTracks` in media |
 | `player.error()` | `error` in player state |
 | `player.dispose()` | remove the element |
-| `player.tech()` | the media element’s `engine` property, where one exists |
+| `player.tech()` | the media component’s `engine` property, where one exists |
 | `videojs.getPlayer(id)` | hold a reference to the element |
 
 Every item the table labels “the player’s” is a property of the player element’s `store`. Call these actions only after `player.store.target` is set, which means the media has attached. Fullscreen requests must run from a user interaction:
@@ -438,7 +438,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.0-rc.5/i18n.js';
+  import { registerI18n } from 'https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/i18n.js';
 
   registerI18n('en', {
     buttons: { play: 'Start video', pause: 'Pause video' },
@@ -458,8 +458,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.0-rc.5/live-video.js"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.5/media/hlsjs-video.js"></script>
+<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>
 
 <live-video-player>
   <live-video-skin>

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

@@ -61,7 +61,7 @@ Video.js 10 splits those jobs:
 
 **The player** holds state and hands it to everything inside it. It draws nothing and takes no layout. Which state it holds depends on the [features](./features.md) it’s built from.
 
-**The media** plays the video. This is where Vidstack’s *provider* went, except you choose it yourself: a plain `<video>` for progressive files, or a [media component](./media-sources.md) for HLS, DASH, YouTube, Vimeo, and Mux. There’s no `<media-provider>`; the media element sits inside the skin.
+**The media** plays the video. This is where Vidstack’s *provider* went, except you choose it yourself: a plain `<video>` for progressive files, or a [media component](./media-sources.md) for HLS, DASH, YouTube, Vimeo, and Mux. There’s no `<media-provider>`; the media component sits inside the skin.
 
 **The skin** is the UI, and it’s where Vidstack’s *layout* went. Every skin renders a container, the box that sizes the player, goes fullscreen, and receives gestures and hotkeys.
 
@@ -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.0-rc.5/video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/video.js"></script>
 ```
 
 Pin every Video.js CDN URL on a page to the same version; see [CDN](./cdn.md).
@@ -188,7 +188,7 @@ Remove `controls` yourself: Video.js doesn’t turn native controls off when a s
 
 `<media-player>` accepted about fifty props. In Video.js they scatter in four directions:
 
-1. **Media attributes** move to the media element, where the browser already understands them.
+1. **Media attributes** move to the media component, where the browser already understands them.
 2. **Player metadata**, the title and poster, stays on the player so the skin can render it.
 3. **Playback values** such as volume and current time become actions you call.
 4. **Behavior** such as live UI, shortcuts, and casting becomes a choice of preset, component, or extension.
@@ -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 element with `import '@videojs/html/media/<name>'`, or load `https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.5/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.0.1/media/<name>.js` from the CDN, where the engine is already bundled.
 
 ### HLS and DASH
 
@@ -267,7 +267,7 @@ media.source = { src: '/stream.m3u8', engine: { hlsJs: { maxBufferLength: 60 } }
 
 `source` is replaced, not merged. Changing hls.js options rebuilds the engine; dash.js and Shaka apply new settings to the running one. See [Media sources](./media-sources.md) for the options every engine shares, such as `preferPlayback`, rendition caps, and DRM.
 
-Where you used `provider.instance` or `onInstance`, read `.engine` on the media element. For hls.js’s event names, import `Hls` from `@videojs/hlsjs-video`, the package you installed for `<hlsjs-video>`, which exports it for this kind of low-level access. Vidstack re-dispatched hls.js events as `hls-*` events on the player; Video.js doesn’t forward engine events, so subscribe on the engine itself:
+Where you used `provider.instance` or `onInstance`, read `.engine` on the media component. For hls.js’s event names, import `Hls` from `@videojs/hlsjs-video`, the package you installed for `<hlsjs-video>`, which exports it for this kind of low-level access. Vidstack re-dispatched hls.js events as `hls-*` events on the player; Video.js doesn’t forward engine events, so subscribe on the engine itself:
 
 ```js
 import { Hls } from '@videojs/hlsjs-video';
@@ -497,7 +497,7 @@ Most Vidstack components have a Video.js counterpart with the same job. What cha
 | Vidstack | Video.js 10 |
 | --- | --- |
 | `<media-player>` | `<video-player>` plus the skin’s `<media-container>` |
-| `<media-provider>` | The media element: `<video>`, `<hlsjs-video>`, `<youtube-video>`, … |
+| `<media-provider>` | The media component: `<video>`, `<hlsjs-video>`, `<youtube-video>`, … |
 | `<media-play-button>`, `<media-mute-button>`, `<media-fullscreen-button>`, `<media-airplay-button>`, `<media-live-button>`, `<media-seek-button>`, `<media-pip-button>` | Same tags |
 | `<media-caption-button>` | `<media-captions-button>` |
 | `<media-google-cast-button>` | `<media-cast-button>` |
@@ -637,7 +637,7 @@ Two keys behave differently. `started` can turn off again after the media is res
 
 Vidstack fired a normalized set of events on `<media-player>`, including state-change events such as `fullscreen-change` and `controls-change`. Video.js fires no player events of its own.
 
-Listen on the media element with native event names: `canplay` for `can-play`, `loadedmetadata` for `loaded-metadata`, and so on. Media events don’t bubble, so a listener on `<video-player>` won’t hear them. For anything that isn’t a media event, subscribe to the store and compare values, as in [Read player state](#read-player-state).
+Listen on the media component with native event names: `canplay` for `can-play`, `loadedmetadata` for `loaded-metadata`, and so on. Media events don’t bubble, so a listener on `<video-player>` won’t hear them. For anything that isn’t a media event, subscribe to the store and compare values, as in [Read player state](#read-player-state).
 
 | Vidstack event | Video.js 10 |
 | --- | --- |
@@ -803,7 +803,7 @@ Vidstack’s `storage` saved volume, mute, captions, language, playback rate, qu
 
 ### Autoplay
 
-Move `autoplay` from `<media-player>` to the media element, along with `muted` and `playsinline`. There’s no `auto-play-fail` event or `autoPlayError` state; a blocked autoplay looks like media that never started. To react to it, leave out `autoplay`, call `play()` once the player attaches, and catch the rejection. See [Autoplay](./autoplay.md).
+Move `autoplay` from `<media-player>` to the media component, along with `muted` and `playsinline`. There’s no `auto-play-fail` event or `autoPlayError` state; a blocked autoplay looks like media that never started. To react to it, leave out `autoplay`, call `play()` once the player attaches, and catch the rejection. See [Autoplay](./autoplay.md).
 
 ## Angular and Solid
 
@@ -813,7 +813,7 @@ In Angular, add `CUSTOM_ELEMENTS_SCHEMA` to the `schemas` of the component that
 
 ## Element lifecycle
 
-Vidstack elements destroyed themselves when they were removed from the page and not put back within a frame, unless they carried `keep-alive`, which the player passed down to its children. Video.js keeps the attribute but doesn’t pass it down: set it on each element you plan to move. When you’re done with them, call `destroy()` on the player and UI elements, and `adapter.destroy()` on media elements. Packaged skins don’t pass it to their controls either ([#3036](https://github.com/videojs/v10/issues/3036)), so move a player that uses one synchronously. See the player’s [lifecycle](../reference/components/player.md#lifecycle).
+Vidstack elements destroyed themselves when they were removed from the page and not put back within a frame, unless they carried `keep-alive`, which the player passed down to its children. Video.js keeps the attribute but doesn’t pass it down: set it on each element you plan to move. When you’re done with them, call `destroy()` on the player and UI elements, and `adapter.destroy()` on media components. Packaged skins don’t pass it to their controls either ([#3036](https://github.com/videojs/v10/issues/3036)), so move a player that uses one synchronously. See the player’s [lifecycle](../reference/components/player.md#lifecycle).
 
 ## Behavior changes to check
 

package/docs/guides/migrate.md

@@ -0,0 +1,17 @@
+# Migrate to Video.js v10
+
+Understand how Video.js v10 differs from the players it brings together, and choose the migration guide for the player you use today.
+
+Video.js v10 brings together the people and lessons behind Video.js, Plyr, Vidstack, Media Chrome, and Mux Player. These projects approached web video from different directions: Video.js made HTML5 video work consistently across browsers, Plyr focused on the details of the player UI, Vidstack built for modern frameworks, Media Chrome made controls composable, and Mux Player simplified streaming integration.
+
+Rather than merge their codebases, we rebuilt the player from scratch with what we learned from those projects. The result is one shared foundation, with native React and HTML components, customizable skins, and separate layers for player state, controls, and media playback. You can use a ready-made player or compose the pieces your application needs.
+
+That also means v10+ is not a drop-in upgrade for any of these players. Migration involves translating your existing configuration, controls, and player API usage into the new components. Start with the guide for the player you’re using today.
+
+## Choose your migration guide
+
+- [Video.js 8](./migrate-from-video-js-8.md): Move from the options object, techs, plugins, and player API to v10’s composed components and player state.
+- [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.

package/docs/guides/mux-data.md

@@ -31,7 +31,7 @@ That’s the whole setup for Mux-hosted playback — no environment key required
 
 > **Note**
 >
-> Mux Data is opt-in. No media element monitors playback on its own, Mux ones included, so nothing is measured and no beacons are sent until you add the extension.
+> Mux Data is opt-in. No media component monitors playback on its own, Mux ones included, so nothing is measured and no beacons are sent until you add the extension.
 
 ## Set the environment key
 

package/docs/guides/playback-errors.md

@@ -40,10 +40,10 @@ The dialog shows its text through child parts: a title, the error description, a
 
 ## How it works
 
-The [error feature](../reference/api/feature-error.md) mirrors the media element’s error into player state:
+The [error feature](../reference/api/feature-error.md) mirrors the media component’s error into player state:
 
 - `error` holds the media’s error — `code`, `message` — or `null` when there is none.
-- `dismissError()` clears the error from player state (the media element keeps its own error until a new load).
+- `dismissError()` clears the error from player state (the media component keeps its own error until a new load).
 - Loading a new source resets `error` to `null` automatically.
 
 The dialog owns presentation, not recovery. Decide the next step in your application: let the user dismiss the message, choose another item, refresh an expired URL, or contact support.
@@ -110,7 +110,7 @@ These codes identify Video.js 8 APIs used with the Video.js 10 `video.js` packag
 
 ### Error code says the source isn’t supported
 
-The browser can’t play the format through this media element. HLS in a plain video element outside Safari is the classic case; use the matching streaming media element. See [Media sources](./media-sources.md).
+The browser can’t play the format through this media component. HLS in a plain video element outside Safari is the classic case; use the matching streaming media component. See [Media sources](./media-sources.md).
 
 ### Reopening the source produces the same error
 
@@ -128,5 +128,5 @@ The failure is probably permanent for that source, such as a 404, revoked token,
 
 ### 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
 - [Autoplay](./autoplay.md): Start playback automatically and handle browser autoplay restrictions.

package/docs/guides/presets.md

@@ -1,10 +1,10 @@
 # Presets
 
-Pre-packaged player configurations that bundle state management, skins, and media elements for specific use cases.
+Pre-packaged player configurations that bundle state management, skins, and media components for specific use cases.
 
-A **preset** packages what you need for a specific player use case. It can include special [state management](./features.md), one or more [skins](./skins.md) for UI, and specific media elements. Instead of assembling these pieces individually, you pick a preset that matches what you’re building.
+A **preset** packages what you need for a specific player use case. It can include special [state management](./features.md), one or more [skins](./skins.md) for UI, and specific media components. Instead of assembling these pieces individually, you pick a preset that matches what you’re building.
 
-For example, the `@videojs/html/background` preset includes a media element with autoplay, mute, and loop built in, a skin with no controls, and just the features needed to power them:
+For example, the `@videojs/html/background` preset includes a media component with autoplay, mute, and loop built in, a skin with no controls, and just the features needed to power them:
 
 **index.html**
 
@@ -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 element:** `<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 element:** `<audio>` |
-| `@videojs/html/background` | Ambient background video preset with no user controls. | **Feature bundle:** `backgroundFeatures`; **Features:** –; **Skins:** `<background-video-skin>`; **Default media element:** `<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 element:** `<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 element:** `<video>` |
+| `@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/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>` |
 
 Each preset has a reference page that lists its player, feature bundle, skins, media, and exports:
 
@@ -46,9 +46,9 @@ Each preset has a reference page that lists its player, feature bundle, skins, m
 
 ## What’s in a preset
 
-Each HTML preset provides registration entry points for a preconfigured player element, its skins, and any preset-specific media element, plus the feature bundle needed to compose your own player. For example, `@videojs/html/video/player` registers `<video-player>`, while `@videojs/html/video/skin` registers `<video-skin>`.
+Each HTML preset provides registration entry points for a preconfigured player element, its skins, and any preset-specific media component, plus the feature bundle needed to compose your own player. For example, `@videojs/html/video/player` registers `<video-player>`, while `@videojs/html/video/skin` registers `<video-skin>`.
 
-These parts aren’t equally tied together. Skins depend tightly on their feature bundle — a skin expects specific features to exist. Media elements are more interchangeable — you can swap in an HLS or DASH provider without changing your skin or features.
+These parts aren’t equally tied together. Skins depend tightly on their feature bundle — a skin expects specific features to exist. Media components are more interchangeable — you can swap in an HLS or DASH provider without changing your skin or features.
 
 HTML preset roots are side-effect-free modules for importing the configured classes, typed controller, and feature bundle:
 
@@ -73,7 +73,7 @@ A complete player imports `video/player` and one skin. Each skin registration in
 
 ## Customizing a preset
 
-You can customize a preset in three ways: extend its feature bundle, add its skin source to your project, or swap its media element.
+You can customize a preset in three ways: extend its feature bundle, add its skin source to your project, or swap its media component.
 
 ### Extend the feature bundle
 
@@ -108,9 +108,9 @@ Add features to a preset’s feature bundle to enable new functionality. For exa
 
 If a preset’s skin is close but not quite right, [add its source to your project](./customize-skins.md#style-skin-source) and customize its components and styles.
 
-### Swap the media element
+### Swap the media component
 
-A preset’s default media element is just the starting point. You can replace it with any compatible media provider. For example, using an HLS source with the video preset:
+A preset’s default media component is just the starting point. You can replace it with any compatible media provider. For example, using an HLS source with the video preset:
 
 ```html
 <video-player>

package/docs/guides/quality.md

@@ -163,7 +163,7 @@ import '@videojs/html/ui/quality-radio-group';
 
 ## How it works
 
-The [quality feature](../reference/api/feature-quality.md) mirrors the media element’s video renditions into player state:
+The [quality feature](../reference/api/feature-quality.md) mirrors the media component’s video renditions into player state:
 
 - `videoRenditionList` holds each rendition’s `id`, `width`, `height`, `bitrate`, `frameRate`, `codec`, and whether it’s `selected`.
 - `activeVideoRendition` is the rendition currently playing. When the engine doesn’t report one directly, the player matches it from the video’s current dimensions.
@@ -233,7 +233,7 @@ updateButton();
 
 Confirm that the player includes `qualityFeature`. The live preset omits it; compose a custom player as described above.
 
-Quality availability is `'unavailable'`. The source is progressive (no renditions), the manifest hasn’t loaded yet, or the media element doesn’t support renditions. Use a streaming media element such as [`<hls-video>`](../reference/components/hls-video.md) or [`<hlsjs-video>`](../reference/components/hlsjs-video.md).
+Quality availability is `'unavailable'`. The source is progressive (no renditions), the manifest hasn’t loaded yet, or the media component doesn’t support renditions. Use a streaming media component such as [`<hls-video>`](../reference/components/hls-video.md) or [`<hlsjs-video>`](../reference/components/hlsjs-video.md).
 
 ### The menu doesn’t render for a single-rendition stream
 
@@ -259,4 +259,4 @@ The pinned rendition exceeds available bandwidth. Selecting “Auto” lets the
 
 ### 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/self-hosting.md

@@ -43,7 +43,7 @@ Bundle a single file when you already build your front end. Download the release
 Unpack it into whatever your server treats as static files:
 
 ```bash
-VIDEOJS_VERSION=10.0.0-rc.5
+VIDEOJS_VERSION=10.0.1
 curl -fLO "https://github.com/videojs/v10/releases/download/@videojs/cdn@${VIDEOJS_VERSION}/videojs-cdn-${VIDEOJS_VERSION}.zip"
 unzip "videojs-cdn-${VIDEOJS_VERSION}.zip" -d public/
 ```
@@ -51,7 +51,7 @@ unzip "videojs-cdn-${VIDEOJS_VERSION}.zip" -d public/
 Then point a script tag at the player you want:
 
 ```html
-<script type="module" src="/videojs-cdn-10.0.0-rc.5/video.js"></script>
+<script type="module" src="/videojs-cdn-10.0.1/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,17 +67,17 @@ For Composer-based projects such as Drupal, declare the archive as a package:
       "type": "package",
       "package": {
         "name": "videojs/cdn",
-        "version": "10.0.0-rc.5",
+        "version": "10.0.1",
         "type": "drupal-library",
         "dist": {
           "type": "zip",
-          "url": "https://github.com/videojs/v10/releases/download/@videojs/cdn@10.0.0-rc.5/videojs-cdn-10.0.0-rc.5.zip"
+          "url": "https://github.com/videojs/v10/releases/download/@videojs/cdn@10.0.1/videojs-cdn-10.0.1.zip"
         }
       }
     }
   ],
   "require": {
-    "videojs/cdn": "10.0.0-rc.5"
+    "videojs/cdn": "10.0.1"
   }
 }
 ```
@@ -140,4 +140,4 @@ There is no console error. The media module for your format isn’t part of your
 ### Guides
 
 - [Installation](./installation.md): Install Video.js packages and build an accessible, customizable video player with composable controls
-- [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/skins.md

@@ -61,10 +61,10 @@ You’ll find a preconfigured player, its typed controller, a skin, and the matc
 
 | 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 element:** `<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 element:** `<audio>` |
-| `@videojs/html/background` | Ambient background video preset with no user controls. | **Feature bundle:** `backgroundFeatures`; **Features:** –; **Skins:** `<background-video-skin>`; **Default media element:** `<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 element:** `<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 element:** `<video>` |
+| `@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/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>` |
 
 - [Read about presets](./presets.md)

package/docs/guides/thumbnails.md

@@ -140,7 +140,7 @@ storyboard.jpg#xywh=256,0,256,160
 ## Availability and constraints
 
 - Thumbnails require a storyboard asset generated alongside the media; the player doesn’t extract frames from the video itself.
-- Cross-origin storyboards need CORS headers, and `crossorigin` on the media element for the track to load.
+- Cross-origin storyboards need CORS headers, and `crossorigin` on the media component for the track to load.
 - Cues load asynchronously. The track appears before its cues are parsed, so previews fill in when the track finishes loading.
 - Storyboard images download on demand; oversized sprite sheets hurt seek-preview responsiveness more than they help quality.
 
@@ -169,7 +169,7 @@ Inside a packaged skin, an `<img slot="thumbnail">` replaces the image the skin
 
 ### Thumbnails don’t appear while scrubbing
 
-Confirm the storyboard track is `kind="metadata"` with `label="thumbnails"` and has the `default` attribute — the browser leaves a non-default track disabled and never loads its cues. Then confirm the VTT loads (network panel) and cross-origin assets have CORS headers with `crossorigin` set on the media element.
+Confirm the storyboard track is `kind="metadata"` with `label="thumbnails"` and has the `default` attribute — the browser leaves a non-default track disabled and never loads its cues. Then confirm the VTT loads (network panel) and cross-origin assets have CORS headers with `crossorigin` set on the media component.
 
 ### Thumbnails are blurry or slow
 

package/docs/guides/user-preferences.md

@@ -75,12 +75,12 @@ Subscribe to the state you want to remember, write it to storage when it changes
 - Player state is the single source of truth: it already reflects every change, whatever caused it — your UI, keyboard shortcuts, native controls, or scripts.
 - `store.subscribe(callback)` fires on any state change. The store batches notifications per microtask, so changes made in the same tick produce one callback. There is no per-key subscription on the store: read the state and diff the slice you care about.
 - Feature selectors exported by `@videojs/html` (`selectVolume`, `selectTextTrack`, `selectQuality`, and the rest) read a feature’s slice from any store, returning `undefined` when the feature isn’t present.
-- Restore through the feature actions (`setVolume`, `setMuted`, `selectSubtitlesTrack`, `selectVideoRendition`) rather than poking the media element, so state and UI stay consistent.
+- Restore through the feature actions (`setVolume`, `setMuted`, `selectSubtitlesTrack`, `selectVideoRendition`) rather than poking the media component, so state and UI stay consistent.
 - Actions need an attached media target: calling one before the store attaches throws. Check `store.target` and defer the restore until it is set, as the examples do.
 
 ## Availability and constraints
 
-- Video.js does not write preferences to storage. Initial values come from the media element, track markup, and playback engine.
+- Video.js does not write preferences to storage. Initial values come from the media component, track markup, and playback engine.
 - `setVolume` clamps to 0–1 and unmutes above zero. Restore volume first, then call `setMuted(true)` if the saved preference is muted. Calling `setMuted(false)` at zero raises the volume to 0.25.
 - The volume examples leave autoplay off. For muted autoplay, defer volume restoration until a user action: restoring a positive volume unmutes the media and can interrupt autoplay, even if you immediately mute it again.
 - `setVolume` and `setMuted` update `store.state` immediately. A React hook’s selected value updates on the next render.