@videojs/html 10.2.0 → 10.4.0

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

@@ -72,7 +72,7 @@ The Neutral skin is the closest built-in starting point for this migration.
 For an HTML page without a bundler, load the CDN preset:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/video-neutral.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.4.0/video-neutral.js"></script>
 
 <video-player poster="/path/to/poster.jpg">
   <video-neutral-skin style="aspect-ratio: 16 / 9">
@@ -119,7 +119,7 @@ The SPF [HLS video](../reference/components/hls-video.md) component is an altern
 Replace `<video>` with `<hlsjs-video>`. If you’re using the CDN, add an additional script:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/media/hlsjs-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.4.0/media/hlsjs-video.js"></script>
 ```
 
 For a bundler installation, install the adapter package and add the media import:
@@ -141,7 +141,7 @@ Use the DASH media component for an unprotected DASH source. For DRM-protected D
 Replace `<video>` with `<dash-video>`. If you’re using the CDN, add an additional script:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/media/dash-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.4.0/media/dash-video.js"></script>
 ```
 
 For a package-manager installation, install the DASH adapter package and add the media import:
@@ -163,7 +163,7 @@ Use the Vimeo media component for your existing Vimeo source.
 Replace `<video>` with `<vimeo-video>`. For a CDN installation, add the media script:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/media/vimeo-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.4.0/media/vimeo-video.js"></script>
 ```
 
 For a bundler installation, install the adapter package and add the module import:
@@ -185,7 +185,7 @@ Use the YouTube media component for your existing YouTube source.
 Replace `<video>` with `<youtube-video>`. For a CDN installation, add the media script:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/media/youtube-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.4.0/media/youtube-video.js"></script>
 ```
 
 For a bundler installation, install the adapter package and add the module import:
@@ -216,7 +216,7 @@ To select a locale, wrap the player in `<media-i18n>` and set `lang` to your loc
 
 ```html
 <script type="module">
-  import { registerI18n } from 'https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/i18n.js';
+  import { registerI18n } from 'https://cdn.jsdelivr.net/npm/@videojs/cdn@10.4.0/i18n.js';
 
   registerI18n('en', {
     buttons: {
@@ -229,7 +229,7 @@ To select a locale, wrap the player in `<media-i18n>` and set `lang` to your loc
   });
 </script>
 
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/video-neutral.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.4.0/video-neutral.js"></script>
 
 <video-player>
   <video-neutral-skin>
@@ -370,7 +370,7 @@ For changes to controls, layout, or icons, add the skin source to your project.
 
 - Plyr’s `ads` option has no built-in equivalent.
 - Plyr’s `storage` option has no built-in equivalent for persisted volume, captions language, muted state, speed, or quality. Player setting persistence is tracked in [#944](https://github.com/videojs/v10/issues/944). For application-managed persistence, follow [Remember user preferences](./user-preferences.md).
-- Playback rates are fixed at `0.2`, `0.5`, `0.7`, `1`, `1.2`, `1.5`, `1.7`, and `2`. Plyr’s `speed.options` has no equivalent yet ([#1404](https://github.com/videojs/v10/issues/1404)).
+- Plyr’s `speed.options` maps to `defaultPlaybackRates` on the player. See the [playback rate feature](../reference/api/feature-playback-rate.md).
 - Plyr’s full-window fullscreen fallback has no matching Video.js feature. Test fullscreen on your supported browsers; see [Browser support](./browser-support.md).
 - Plain MP4 source arrays with `size` metadata do not automatically create a quality menu. Use Mux, HLS, or DASH for adaptive quality when possible.
 - Preset skins segment the time slider and show chapter titles when the media includes a default `<track kind="chapters">`. Cue points are not implemented yet; see [#1442](https://github.com/videojs/v10/issues/1442).

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.2.0/video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.4.0/video.js"></script>
 
 <video-player poster="/poster.jpg">
   <video-skin style="aspect-ratio: 16 / 9">
@@ -185,7 +185,7 @@ These options need a migration decision. Each row links to the relevant guidance
 | `languages`, `language`, `videojs.addLanguage` | [Languages](#languages) |
 | `liveui`, `liveTracker` | [Live and audio-only](#live-and-audio-only) |
 | `audioOnlyMode`, `audioPosterMode` | [Live and audio-only](#live-and-audio-only) |
-| `playbackRates` | not configurable yet ([#1404](https://github.com/videojs/v10/issues/1404)) |
+| `playbackRates` | `defaultPlaybackRates` on the player, or `rates` on a single control. See the [playback rate feature](../reference/api/feature-playback-rate.md) |
 | `textTrackSettings` | no equivalent; see [Known gaps](#known-gaps) |
 | `spatialNavigation` | no equivalent; see [Known gaps](#known-gaps) |
 | `inactivityTimeout` | delay not configurable yet ([#1728](https://github.com/videojs/v10/issues/1728)); `inactivityTimeout: 0` maps to `visibility="always"` on the controls component |
@@ -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.2.0/media/hlsjs-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.4.0/media/hlsjs-video.js"></script>
 ```
 
 With a package manager, install the adapter and import its HTML registration:
@@ -323,7 +323,7 @@ Move license URLs from v8’s `keySystems` configuration to `source.drm`, keyed
 
 The examples configure Widevine. Replace both URL placeholders and add every key system your supported browsers need.
 
-With a bundler, install `@videojs/shaka-video` and import `@videojs/html/media/shaka-video`. From the CDN, load `https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/media/shaka-video.js` in a `<script type="module">` tag. Then replace the media component inside your player’s skin with:
+With a bundler, install `@videojs/shaka-video` and import `@videojs/html/media/shaka-video`. From the CDN, load `https://cdn.jsdelivr.net/npm/@videojs/cdn@10.4.0/media/shaka-video.js` in a `<script type="module">` tag. Then replace the media component inside your player’s skin with:
 
 ```html
 <shaka-video id="protected-media"></shaka-video>
@@ -446,7 +446,7 @@ For a CDN page, register string overrides in a module script:
 
 ```html
 <script type="module">
-  import { registerI18n } from 'https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/i18n.js';
+  import { registerI18n } from 'https://cdn.jsdelivr.net/npm/@videojs/cdn@10.4.0/i18n.js';
 
   registerI18n('en', {
     buttons: { play: 'Start video', pause: 'Pause video' },
@@ -466,8 +466,8 @@ Replace `liveui` or `audioOnlyMode` with the matching live or audio [preset](./p
 Load the live preset and the hls.js media component:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/live-video.js"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/media/hlsjs-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.4.0/live-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.4.0/media/hlsjs-video.js"></script>
 
 <live-video-player>
   <live-video-skin>
@@ -520,7 +520,6 @@ Check these limitations against your required features:
 - **No ads support.** v8’s IMA and ad-plugin ecosystem has no v10 equivalent. If your player depends on ads, resolve that requirement before replacing it.
 - **No playlist support.** No `videojs-playlist` equivalent.
 - **No plugin system**, by design. Budget for rebuilding UI plugins as components. See [Plugins](#plugins).
-- Playback rates are a fixed set — `0.2`, `0.5`, `0.7`, `1`, `1.2`, `1.5`, `1.7`, `2` — so v8’s `playbackRates` has no equivalent yet ([#1404](https://github.com/videojs/v10/issues/1404)).
 - No text-track settings dialog equivalent to v8’s `textTrackSettings`. You can still style browser-rendered cues with `::cue`; see [Show captions and subtitles](./captions.md).
 - No spatial navigation. v8’s `spatialNavigation` for TV and D-pad remotes has no equivalent.
 - Player preferences such as volume, captions language, speed, and quality are not persisted automatically ([#944](https://github.com/videojs/v10/issues/944)). For application-managed persistence, follow [Remember user preferences](./user-preferences.md).
@@ -529,7 +528,7 @@ Check these limitations against your required features:
 - The controls auto-hide delay isn’t configurable, so arbitrary `inactivityTimeout` values have no equivalent ([#1728](https://github.com/videojs/v10/issues/1728)). For `inactivityTimeout: 0`, set `visibility="always"` on the controls component in a custom layout or installed skin source.
 - No full-window fullscreen fallback. Test fullscreen on your supported browsers; see [Browser support](./browser-support.md).
 - Multiple `<source>` elements with `size` metadata don’t become a quality menu. Use HLS or DASH for adaptive quality.
-- The Default, Neutral, and Compat skins are available. Runtime theme switching is not supported.
+- The Default, Neutral, Compat, and Scaffold skins are available. Runtime theme switching is not supported.
 - Native controls are not automatically removed when custom controls load ([#1160](https://github.com/videojs/v10/issues/1160)).
 - Debug mode has no equivalent yet ([#1406](https://github.com/videojs/v10/issues/1406)).
 

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

@@ -154,7 +154,7 @@ What changed:
 Load the bundle as a module script. From the CDN, the video preset is one script:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.4.0/video.js"></script>
 ```
 
 Pin every Video.js CDN URL on a page to the same version; see [CDN](./cdn.md).
@@ -214,7 +214,7 @@ Remove `controls` yourself: Video.js doesn’t turn native controls off when a s
 | `live-edge-tolerance`, `min-live-dvr-window` | No equivalent ([#1730](https://github.com/videojs/v10/issues/1730)) |
 | `artist`, `artwork` | No equivalent; Video.js doesn’t set Media Session metadata ([#3042](https://github.com/videojs/v10/issues/3042)) |
 | `log-level` | No equivalent ([#1406](https://github.com/videojs/v10/issues/1406)); development builds print warnings |
-| `keep-alive` | `keep-alive` on each element you move. See [Element lifecycle](#element-lifecycle) |
+| `keep-alive` | `keep-alive` on the player and on its media component. See [Element lifecycle](#element-lifecycle) |
 
 Vidstack queued `paused`, `volume`, and the other playback props until the media could play. Video.js doesn’t queue: most actions fail until the player has attached to its media, `seek()` included, which only waits for metadata once attached. Call them from event handlers.
 
@@ -233,7 +233,7 @@ Vidstack’s `<media-provider>` read `src`, guessed a type from the extension or
 | Vimeo | [`<vimeo-video>`](../reference/components/vimeo-video.md) | `@videojs/vimeo-video` |
 | Remotion | No equivalent ([#3053](https://github.com/videojs/v10/issues/3053)) | |
 
-Register each media component with `import '@videojs/html/media/<name>'`, or load `https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/media/<name>.js` from the CDN, where the engine is already bundled.
+Register each media component with `import '@videojs/html/media/<name>'`, or load `https://cdn.jsdelivr.net/npm/@videojs/cdn@10.4.0/media/<name>.js` from the CDN, where the engine is already bundled.
 
 ### HLS and DASH
 
@@ -336,7 +336,7 @@ async function load(src) {
 
 Each media module loads with `import()`, so the page only downloads the engine its source needs, the way Vidstack’s provider loaders did. A plain `<video>` needs no module. When the media changes, the player detaches from the old one, resets its state, and attaches to the new one; the skin follows.
 
-`resolveAdapterType` recognizes the URLs and shorthands Vidstack’s providers did, plus Wistia, Mux, Cloudflare Stream, Spotify, TikTok, and Twitch, and returns `null` for anything else. Vidstack sent a `HEAD` request when a URL had no file extension; pass the MIME type as the second argument instead. The result names a kind of source, not an engine: `hls` covers every HLS media, so choose one yourself.
+`resolveAdapterType` recognizes the URLs and shorthands Vidstack’s providers did, plus Wistia, Mux, Cloudflare Stream, Spotify, SoundCloud, Mixcloud, TikTok, and Twitch, and returns `null` for anything else. Vidstack sent a `HEAD` request when a URL had no file extension; pass the MIME type as the second argument instead. The result names a kind of source, not an engine: `hls` covers every HLS media, so choose one yourself.
 
 For a single source, change the media’s `src` or `source` instead. The same media swaps the URL without being replaced.
 
@@ -372,7 +372,7 @@ Packaged skins take almost no props. Most layout props either move somewhere els
 | `color-scheme` | CSS `color-scheme`; see [Color scheme](#color-scheme) |
 | `small-when` | Container queries built into the skin; see [Responsive layouts](#responsive-layouts) |
 | `seek-step` | 10 seconds in the skin’s hotkeys and gestures; edit skin source to change it |
-| `playback-rates` | A fixed list: `0.2`, `0.5`, `0.7`, `1`, `1.2`, `1.5`, `1.7`, `2` ([#1404](https://github.com/videojs/v10/issues/1404)) |
+| `playback-rates` | `default-playback-rates`, or `rates` on a single control. See the [playback rate feature](../reference/api/feature-playback-rate.md) |
 | `no-gestures`, `no-keyboard-animations`, `disable-time-slider`, `menu-group` | Edit skin source |
 | `hide-quality-bitrate` | Bitrate shows only to tell apart renditions of the same size |
 | `no-modal`, `menu-container` | Not needed. Menus render in the browser’s top layer |
@@ -392,7 +392,7 @@ Vidstack customization climbed from layout props, through CSS variables and slot
 
 #### Level 1: pick a skin
 
-Choose Default, Neutral, or Compat for video, audio, live video, or live audio. See [Skins](./skins.md).
+Choose Default, Neutral, Compat, or Scaffold for video, audio, live video, or live audio. See [Choose a skin](./skins.md#choose-a-skin).
 
 #### Level 2: restyle it
 
@@ -663,13 +663,13 @@ The browser parses and renders the cues, so:
 - **Only WebVTT works.** Vidstack parsed SRT, SSA/ASS, and JSON with `type` ([#3037](https://github.com/videojs/v10/issues/3037)). Convert them to WebVTT at build time or on your server.
 - **Style captions with `::cue`.** `<media-captions>`, its `data-part` selectors, and the `--media-cue-*` variables have no equivalent ([#3038](https://github.com/videojs/v10/issues/3038)). The skins keep native captions clear of the controls in Chromium and WebKit browsers.
 - **There’s no caption style menu** for viewers to pick fonts, colors, and backgrounds ([#1437](https://github.com/videojs/v10/issues/1437)). Viewers can still set caption preferences in their operating system or browser.
-- **Adding tracks from code is native.** `textTracks.add()` becomes a `<track>` element, or `addTextTrack()` and `VTTCue` on a plain `<video>`.
+- **Add tracks from code through the player.** `textTracks.add()` becomes the store’s `addTextTrack()`, which takes cues, or a WebVTT or JSON file to load them from, and works with any media. See [Timed metadata](./timed-metadata.md).
 
 The captions toggle picks a track differently. Vidstack restored the last track shown, then the `default` track, then the first one. Video.js restores the last track shown, then one that matches the browser’s language, then the first track. See [Captions](./captions.md).
 
 ### Chapters
 
-A `<track kind="chapters" default>` still segments the time slider, and the chapter under the pointer shows in the preview. Vidstack’s chapters menu, `ChapterTitle` outside the slider, and `useChapterOptions` have no equivalent ([#1873](https://github.com/videojs/v10/issues/1873)). To add chapters from code, use the native track APIs described under [Captions](#captions); there’s no dedicated chapters API yet ([#1268](https://github.com/videojs/v10/issues/1268)). For a current-chapter label elsewhere, find the cue in the `chaptersCues` state that contains `currentTime`.
+A `<track kind="chapters" default>` still segments the time slider, and the chapter under the pointer shows in the preview. Vidstack’s chapters menu, `ChapterTitle` outside the slider, and `useChapterOptions` have no equivalent ([#1873](https://github.com/videojs/v10/issues/1873)). To add chapters from code or a JSON file, add a `chapters` track with the store’s `addTextTrack()`. For a current-chapter label elsewhere, read the active cue through `chaptersTrack`. See [Timed metadata](./timed-metadata.md#add-chapters).
 
 ### Thumbnails
 
@@ -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 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).
+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 passes it from the player to the UI elements inside it, including a packaged skin’s controls, but not to media components: set `keep-alive` on the media component too. When you’re done, call `destroy()` on the player, which also destroys the UI elements inside it, and `adapter.destroy()` on media components. See the player’s [lifecycle](../reference/components/player.md#lifecycle).
 
 ## Behavior changes to check
 
@@ -840,7 +840,7 @@ Ordered roughly by how likely each is to block a Vidstack migration. Follow [Vid
 - **Nothing persists** between visits: volume, captions, language, rate, quality, or position ([#944](https://github.com/videojs/v10/issues/944)).
 - **No caption style settings** ([#1437](https://github.com/videojs/v10/issues/1437)), no custom caption renderer ([#3038](https://github.com/videojs/v10/issues/3038)), and WebVTT only: no SRT, SSA/ASS, or JSON captions ([#3037](https://github.com/videojs/v10/issues/3037)). Audio players don’t show captions ([#3039](https://github.com/videojs/v10/issues/3039)).
 - **No chapters menu** or chapter title outside the time slider ([#1873](https://github.com/videojs/v10/issues/1873)), and no dedicated API for chapters from code ([#1268](https://github.com/videojs/v10/issues/1268)). Cue points and markers aren’t implemented ([#1442](https://github.com/videojs/v10/issues/1442)).
-- **Fixed playback rates**: `0.2`, `0.5`, `0.7`, `1`, `1.2`, `1.5`, `1.7`, `2` ([#1404](https://github.com/videojs/v10/issues/1404)). No speed or quality sliders ([#3052](https://github.com/videojs/v10/issues/3052)).
+- **No speed or quality sliders** ([#3052](https://github.com/videojs/v10/issues/3052)).
 - **No audio gain or boost** ([#1135](https://github.com/videojs/v10/issues/1135)).
 - **No load strategies.** Vidstack’s media and poster loading strategies and `startLoading()` have no equivalent ([#3043](https://github.com/videojs/v10/issues/3043)), and embeds don’t preconnect ([#1433](https://github.com/videojs/v10/issues/1433)).
 - **No clipping.** Vidstack’s clip start and end times have no equivalent ([#3040](https://github.com/videojs/v10/issues/3040)).

package/docs/guides/mux-data.md

@@ -64,6 +64,28 @@ How much the extension reports depends on the engine playing the stream. All med
 
 The `video_id` it reports is the Mux playback ID for streams served from `stream.mux.com`, and the source URL otherwise. Each view also gets a generated `view_session_id`. Override either through `metadata`.
 
+## Name the player
+
+Each view reports a player software name of `videojs-html-<engine>`, with the Video.js version as the player software version, so you can compare views by engine in Mux Data. For example, a stream played by hls.js reports `videojs-html-hlsjs`.
+
+| Engine | Played by |
+| --- | --- |
+| `hlsjs` | [hls.js](https://github.com/video-dev/hls.js/) |
+| `spf-hls-video` | The Video.js SPF engine for video, used by HLS video and the SPF flavor of Mux video |
+| `spf-hls-audio` | The audio-only SPF engine, used by HLS audio and the SPF flavor of Mux audio |
+| `spf-hls-background-video` | The SPF engine for background video |
+| `shaka` | [Shaka Player](https://github.com/shaka-project/shaka-player) |
+| `dashjs` | [dash.js](https://github.com/Dash-Industry-Forum/dash.js) |
+| `browser` | The browser itself, like native HLS in Safari or an MP4 file |
+
+The name follows the engine that’s playing, so a source change that switches engines updates the name for the current view.
+
+To report your own name instead, set the player software name. It takes precedence over the default:
+
+```html
+<mux-data player-software-name="my-player" player-software-version="2.4.0"></mux-data>
+```
+
 ## Describe the view
 
 Pass Mux Data [metadata](https://www.mux.com/docs/guides/make-your-data-actionable-with-metadata?utm_source=videojs&utm_campaign=vjs10&utm_content=docs-content) to label views with your own titles, viewer IDs, and custom dimensions. `metadata` takes an object. In HTML, set it as a JavaScript property:

package/docs/guides/presets.md

@@ -26,15 +26,15 @@ For example, the `@videojs/html/background` preset includes a media component wi
 
 The default presets are `/video` and `/audio`. These cover the baseline controls you’d expect from the HTML `<video>` and `<audio>` tags. Beyond the defaults, presets target more specific use cases — the `/background` preset, for example, needs layout but not controls. Over time we’ll add more: short-form players, podcast players, TV streaming players, and others.
 
-The video, audio, live video, and live audio presets also export Compat skins. For example, React exports `CompatVideoSkin` with `@videojs/react/video/compat-skin.css`; HTML registers `<video-compat-skin>` through `@videojs/html/video/compat-skin`.
+The video, audio, live video, and live audio presets each export four skins: Default, Neutral, Compat, and Scaffold. For example, React exports `ScaffoldVideoSkin` with `@videojs/react/video/scaffold-skin.css`; HTML registers `<video-scaffold-skin>` through `@videojs/html/video/scaffold-skin`. See [Choose a skin](./skins.md#choose-a-skin) to compare them.
 
 | 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-scaffold-skin>`, `<video-skin>`; **Default media component:** `<video>` |
-| `@videojs/html/audio` | Audio-only player preset with playback and volume controls. | **Feature bundle:** `audioFeatures`; **Features:** [playback](../reference/api/feature-playback.md), [playbackRate](../reference/api/feature-playback-rate.md), [volume](../reference/api/feature-volume.md), [time](../reference/api/feature-time.md), [source](../reference/api/feature-source.md), [buffer](../reference/api/feature-buffer.md), [error](../reference/api/feature-error.md), [metadata](../reference/api/feature-metadata.md); **Skins:** `<audio-compat-skin>`, `<audio-neutral-skin>`, `<audio-scaffold-skin>`, `<audio-skin>`; **Default media component:** `<audio>` |
+| `@videojs/html/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), [textCues](../reference/api/feature-text-cues.md), [error](../reference/api/feature-error.md), [metadata](../reference/api/feature-metadata.md); **Skins:** `<video-compat-skin>`, `<video-neutral-skin>`, `<video-scaffold-skin>`, `<video-skin>`; **Default media component:** `<video>` |
+| `@videojs/html/audio` | Audio-only player preset with playback and volume controls. | **Feature bundle:** `audioFeatures`; **Features:** [playback](../reference/api/feature-playback.md), [playbackRate](../reference/api/feature-playback-rate.md), [volume](../reference/api/feature-volume.md), [time](../reference/api/feature-time.md), [source](../reference/api/feature-source.md), [buffer](../reference/api/feature-buffer.md), [textTrack](../reference/api/feature-text-tracks.md), [textCues](../reference/api/feature-text-cues.md), [error](../reference/api/feature-error.md), [metadata](../reference/api/feature-metadata.md); **Skins:** `<audio-compat-skin>`, `<audio-neutral-skin>`, `<audio-scaffold-skin>`, `<audio-skin>`; **Default media component:** `<audio>` |
 | `@videojs/html/background` | Ambient background video preset with no user controls. | **Feature bundle:** `backgroundFeatures`; **Features:** –; **Skins:** `<background-video-skin>`; **Default media component:** `<background-video>` |
-| `@videojs/html/live-audio` | Live audio player preset — `audio` minus playback rate, plus the live feature, with a skin that swaps the time slider and time displays for a Live button. | **Feature bundle:** `liveAudioFeatures`; **Features:** [playback](../reference/api/feature-playback.md), [volume](../reference/api/feature-volume.md), [time](../reference/api/feature-time.md), [source](../reference/api/feature-source.md), [buffer](../reference/api/feature-buffer.md), [error](../reference/api/feature-error.md), [live](../reference/api/feature-live.md), [metadata](../reference/api/feature-metadata.md); **Skins:** `<live-audio-compat-skin>`, `<live-audio-neutral-skin>`, `<live-audio-scaffold-skin>`, `<live-audio-skin>`; **Default media component:** `<audio>` |
-| `@videojs/html/live-video` | Live video player preset — `video` minus playback rate, quality selection, and audio-track selection, plus the live feature, with a skin that swaps the time slider and time displays for a Live button. | **Feature bundle:** `liveVideoFeatures`; **Features:** [playback](../reference/api/feature-playback.md), [volume](../reference/api/feature-volume.md), [time](../reference/api/feature-time.md), [source](../reference/api/feature-source.md), [buffer](../reference/api/feature-buffer.md), [fullscreen](../reference/api/feature-fullscreen.md), [pip](../reference/api/feature-pip.md), [remotePlayback](../reference/api/feature-remote-playback.md), [controls](../reference/api/feature-controls.md), [textTrack](../reference/api/feature-text-tracks.md), [error](../reference/api/feature-error.md), [live](../reference/api/feature-live.md), [metadata](../reference/api/feature-metadata.md); **Skins:** `<live-video-compat-skin>`, `<live-video-neutral-skin>`, `<live-video-scaffold-skin>`, `<live-video-skin>`; **Default media component:** `<video>` |
+| `@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), [textTrack](../reference/api/feature-text-tracks.md), [textCues](../reference/api/feature-text-cues.md), [error](../reference/api/feature-error.md), [live](../reference/api/feature-live.md), [metadata](../reference/api/feature-metadata.md); **Skins:** `<live-audio-compat-skin>`, `<live-audio-neutral-skin>`, `<live-audio-scaffold-skin>`, `<live-audio-skin>`; **Default media component:** `<audio>` |
+| `@videojs/html/live-video` | Live video player preset — `video` minus playback rate, quality selection, and audio-track selection, plus the live feature, with a skin that swaps the time slider and time displays for a Live button. | **Feature bundle:** `liveVideoFeatures`; **Features:** [playback](../reference/api/feature-playback.md), [volume](../reference/api/feature-volume.md), [time](../reference/api/feature-time.md), [source](../reference/api/feature-source.md), [buffer](../reference/api/feature-buffer.md), [fullscreen](../reference/api/feature-fullscreen.md), [pip](../reference/api/feature-pip.md), [remotePlayback](../reference/api/feature-remote-playback.md), [controls](../reference/api/feature-controls.md), [textTrack](../reference/api/feature-text-tracks.md), [textCues](../reference/api/feature-text-cues.md), [error](../reference/api/feature-error.md), [live](../reference/api/feature-live.md), [metadata](../reference/api/feature-metadata.md); **Skins:** `<live-video-compat-skin>`, `<live-video-neutral-skin>`, `<live-video-scaffold-skin>`, `<live-video-skin>`; **Default media component:** `<video>` |
 
 Each preset has a reference page that lists its player, feature bundle, skins, media, and exports:
 

package/docs/guides/self-hosting.md

@@ -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.2.0
+VIDEOJS_VERSION=10.4.0
 curl -fLO "https://github.com/videojs/video.js/releases/download/@videojs/cdn@${VIDEOJS_VERSION}/videojs-cdn-${VIDEOJS_VERSION}.zip"
 unzip "videojs-cdn-${VIDEOJS_VERSION}.zip" -d public/
 ```
@@ -51,7 +51,7 @@ unzip "videojs-cdn-${VIDEOJS_VERSION}.zip" -d public/
 Then point a script tag at the player you want:
 
 ```html
-<script type="module" src="/videojs-cdn-10.2.0/video.js"></script>
+<script type="module" src="/videojs-cdn-10.4.0/video.js"></script>
 ```
 
 The archive holds the same production bundles the CDN serves, minus sourcemaps and development builds. Every path inside it is relative, so it runs from any origin with no outbound requests. `SHA256SUMS` on the release verifies the download.
@@ -67,20 +67,20 @@ For Composer-based projects such as Drupal, declare the archive as a package:
       "type": "package",
       "package": {
         "name": "videojs/cdn",
-        "version": "10.2.0",
+        "version": "10.4.0",
         "type": "drupal-library",
         "extra": {
           "installer-name": "videojs-cdn"
         },
         "dist": {
           "type": "zip",
-          "url": "https://github.com/videojs/video.js/releases/download/@videojs/cdn@10.2.0/videojs-cdn-10.2.0.zip"
+          "url": "https://github.com/videojs/video.js/releases/download/@videojs/cdn@10.4.0/videojs-cdn-10.4.0.zip"
         }
       }
     }
   ],
   "require": {
-    "videojs/cdn": "10.2.0"
+    "videojs/cdn": "10.4.0"
   }
 }
 ```

package/docs/guides/skins.md

@@ -8,7 +8,23 @@ Packaged player designs that include both UI components and their styles.
 
 A skin wraps the media component and provides the player’s complete interface. It combines a specific set of UI components with the styles that arrange and present them.
 
-The video, audio, live video, and live audio presets each provide Default, Neutral, Compat, and Scaffold skins. Compat uses plain surfaces and basic controls, with broader browser compatibility as its design goal. Scaffold uses minimal styling as a starting point for a custom skin; its appearance is intended to be replaced.
+## Choose a skin
+
+The video, audio, live video, and live audio presets each provide four skins: Default, Neutral, Compat, and Scaffold. Compare them on three questions: which features you need, how much of the design you want to bring, and how consistently the player should look across browsers.
+
+| | Default | Neutral | Compat | Scaffold |
+| --- | --- | --- | --- | --- |
+| Features | Complete | Same as Default | The same core controls in a simpler layout | Same as Compat |
+| Styling | Opinionated and distinctly Video.js | Opinionated and easy to brand | Unbranded, a polished step above native controls | Unbranded and minimal, a foundation to restyle |
+| Browser compatibility | Uses newer visual effects where browsers support them | Same as Default | Avoids newer visual effects, so it looks consistent across browsers and reaches older ones | Same as Compat |
+| Presets | [Video](../reference/components/video-skin.md), [Live video](../reference/components/live-video-skin.md), [Audio](../reference/components/audio-skin.md), [Live audio](../reference/components/live-audio-skin.md) | [Video](../reference/components/video-neutral-skin.md), [Live video](../reference/components/live-video-neutral-skin.md), [Audio](../reference/components/audio-neutral-skin.md), [Live audio](../reference/components/live-audio-neutral-skin.md) | [Video](../reference/components/video-compat-skin.md), [Live video](../reference/components/live-video-compat-skin.md), [Audio](../reference/components/audio-compat-skin.md), [Live audio](../reference/components/live-audio-compat-skin.md) | [Video](../reference/components/video-scaffold-skin.md), [Live video](../reference/components/live-video-scaffold-skin.md), [Audio](../reference/components/audio-scaffold-skin.md), [Live audio](../reference/components/live-audio-scaffold-skin.md) |
+
+- **Default** is our design, with frosted surfaces and a modern look. Choose it when you want the player to look like Video.js.
+- **Neutral** has the same controls in a lighter design, closer to a classic control bar. Choose it to apply your brand to a finished design: set your accent color, font, and corner radius through [CSS custom properties](./customize-skins.md#set-the-skins-styles).
+- **Compat** has plain, unbranded surfaces. Choose it when the player should blend into content pages, such as an encyclopedia article. It avoids backdrop blur, anchor-positioned menu highlights, and squircle corners, which some browsers render differently or skip, and it reaches [older browsers](./browser-support.md) than Default and Neutral.
+- **Scaffold** has Compat’s controls with minimal styling: square corners, no shadows or blur, your page’s font, and no transitions. Choose it as the foundation for your own design, when you plan to restyle the whole player rather than brand a finished one.
+
+All four skins support the same keyboard shortcuts and gestures, and Compat and Scaffold also support older [browsers](./browser-support.md). To build your own design instead, add Scaffold’s [source](#skin-source-in-your-project) to your project, start from another skin’s source, or build a [custom interface](#custom-interface).
 
 ## Packaged skins and skin source
 
@@ -62,10 +78,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-scaffold-skin>`, `<video-skin>`; **Default media component:** `<video>` |
-| `@videojs/html/audio` | Audio-only player preset with playback and volume controls. | **Feature bundle:** `audioFeatures`; **Features:** [playback](../reference/api/feature-playback.md), [playbackRate](../reference/api/feature-playback-rate.md), [volume](../reference/api/feature-volume.md), [time](../reference/api/feature-time.md), [source](../reference/api/feature-source.md), [buffer](../reference/api/feature-buffer.md), [error](../reference/api/feature-error.md), [metadata](../reference/api/feature-metadata.md); **Skins:** `<audio-compat-skin>`, `<audio-neutral-skin>`, `<audio-scaffold-skin>`, `<audio-skin>`; **Default media component:** `<audio>` |
+| `@videojs/html/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), [textCues](../reference/api/feature-text-cues.md), [error](../reference/api/feature-error.md), [metadata](../reference/api/feature-metadata.md); **Skins:** `<video-compat-skin>`, `<video-neutral-skin>`, `<video-scaffold-skin>`, `<video-skin>`; **Default media component:** `<video>` |
+| `@videojs/html/audio` | Audio-only player preset with playback and volume controls. | **Feature bundle:** `audioFeatures`; **Features:** [playback](../reference/api/feature-playback.md), [playbackRate](../reference/api/feature-playback-rate.md), [volume](../reference/api/feature-volume.md), [time](../reference/api/feature-time.md), [source](../reference/api/feature-source.md), [buffer](../reference/api/feature-buffer.md), [textTrack](../reference/api/feature-text-tracks.md), [textCues](../reference/api/feature-text-cues.md), [error](../reference/api/feature-error.md), [metadata](../reference/api/feature-metadata.md); **Skins:** `<audio-compat-skin>`, `<audio-neutral-skin>`, `<audio-scaffold-skin>`, `<audio-skin>`; **Default media component:** `<audio>` |
 | `@videojs/html/background` | Ambient background video preset with no user controls. | **Feature bundle:** `backgroundFeatures`; **Features:** –; **Skins:** `<background-video-skin>`; **Default media component:** `<background-video>` |
-| `@videojs/html/live-audio` | Live audio player preset — `audio` minus playback rate, plus the live feature, with a skin that swaps the time slider and time displays for a Live button. | **Feature bundle:** `liveAudioFeatures`; **Features:** [playback](../reference/api/feature-playback.md), [volume](../reference/api/feature-volume.md), [time](../reference/api/feature-time.md), [source](../reference/api/feature-source.md), [buffer](../reference/api/feature-buffer.md), [error](../reference/api/feature-error.md), [live](../reference/api/feature-live.md), [metadata](../reference/api/feature-metadata.md); **Skins:** `<live-audio-compat-skin>`, `<live-audio-neutral-skin>`, `<live-audio-scaffold-skin>`, `<live-audio-skin>`; **Default media component:** `<audio>` |
-| `@videojs/html/live-video` | Live video player preset — `video` minus playback rate, quality selection, and audio-track selection, plus the live feature, with a skin that swaps the time slider and time displays for a Live button. | **Feature bundle:** `liveVideoFeatures`; **Features:** [playback](../reference/api/feature-playback.md), [volume](../reference/api/feature-volume.md), [time](../reference/api/feature-time.md), [source](../reference/api/feature-source.md), [buffer](../reference/api/feature-buffer.md), [fullscreen](../reference/api/feature-fullscreen.md), [pip](../reference/api/feature-pip.md), [remotePlayback](../reference/api/feature-remote-playback.md), [controls](../reference/api/feature-controls.md), [textTrack](../reference/api/feature-text-tracks.md), [error](../reference/api/feature-error.md), [live](../reference/api/feature-live.md), [metadata](../reference/api/feature-metadata.md); **Skins:** `<live-video-compat-skin>`, `<live-video-neutral-skin>`, `<live-video-scaffold-skin>`, `<live-video-skin>`; **Default media component:** `<video>` |
+| `@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), [textTrack](../reference/api/feature-text-tracks.md), [textCues](../reference/api/feature-text-cues.md), [error](../reference/api/feature-error.md), [live](../reference/api/feature-live.md), [metadata](../reference/api/feature-metadata.md); **Skins:** `<live-audio-compat-skin>`, `<live-audio-neutral-skin>`, `<live-audio-scaffold-skin>`, `<live-audio-skin>`; **Default media component:** `<audio>` |
+| `@videojs/html/live-video` | Live video player preset — `video` minus playback rate, quality selection, and audio-track selection, plus the live feature, with a skin that swaps the time slider and time displays for a Live button. | **Feature bundle:** `liveVideoFeatures`; **Features:** [playback](../reference/api/feature-playback.md), [volume](../reference/api/feature-volume.md), [time](../reference/api/feature-time.md), [source](../reference/api/feature-source.md), [buffer](../reference/api/feature-buffer.md), [fullscreen](../reference/api/feature-fullscreen.md), [pip](../reference/api/feature-pip.md), [remotePlayback](../reference/api/feature-remote-playback.md), [controls](../reference/api/feature-controls.md), [textTrack](../reference/api/feature-text-tracks.md), [textCues](../reference/api/feature-text-cues.md), [error](../reference/api/feature-error.md), [live](../reference/api/feature-live.md), [metadata](../reference/api/feature-metadata.md); **Skins:** `<live-video-compat-skin>`, `<live-video-neutral-skin>`, `<live-video-scaffold-skin>`, `<live-video-skin>`; **Default media component:** `<video>` |
 
 - [Read about presets](./presets.md)