@videojs/html 10.2.0 → 10.3.0

package/docs/guides/internationalization.md

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

package/docs/guides/keyboard-shortcuts.md

@@ -39,7 +39,7 @@ Declare shortcuts with `<media-hotkey>` and gestures with `<media-gesture>` insi
 
 ## How it works
 
-- `<media-hotkey>` binds keys to player actions: `togglePaused`, `toggleMuted`, `toggleFullscreen`, `toggleSubtitles`, `togglePictureInPicture`, `seekStep`, `volumeStep`, `seekToPercent`, `speedUp`, and `speedDown`. `seekStep` and `volumeStep` use a default step unless you pass a custom `value`. These input actions call the feature actions your components use; for example, `toggleFullscreen` chooses `requestFullscreen` or `exitFullscreen` based on `isFullscreen`.
+- `<media-hotkey>` binds keys to player actions: `togglePaused`, `toggleMuted`, `toggleFullscreen`, `toggleSubtitles`, `togglePictureInPicture`, `seekStep`, `volumeStep`, `seekToPercent`, `speedUp`, and `speedDown`. `seekStep` and `volumeStep` use a default step unless you pass a custom `value`. `speedUp` and `speedDown` move through the player’s playback rates, or step by `value` when you pass one. These input actions call the feature actions your components use; for example, `toggleFullscreen` chooses `requestFullscreen` or `exitFullscreen` based on `isFullscreen`.
 - `<media-gesture>` binds `tap` and `doubletap` to the same actions. Gestures also support `toggleControls`; `seekToPercent` is available only to hotkeys. Scope each binding with `pointer` (`mouse` or `touch`) and `region` (`left`, `center`, `right`). For example, a double tap on the left can rewind while a double tap on the right skips forward.
 - `<media-status-announcer>` announces action results to screen readers. The input indicator components show brief on-screen feedback, such as volume level or captions on and off, the way native players do. The packaged skins include both.
 

package/docs/guides/llms.txt

@@ -1,6 +1,6 @@
 # Video.js v10 — HTML Guides
 
-> Installation, migration, concepts, playback guides, customization, and tooling for Video.js. Bundled with `@videojs/html` v10.2.0. Links are relative paths to files in this directory.
+> Installation, migration, concepts, playback guides, customization, and tooling for Video.js. Bundled with `@videojs/html` v10.3.0. Links are relative paths to files in this directory.
 
 ## Getting Started
 
@@ -68,6 +68,7 @@ Guides for one player capability each: the recommended setup, how it works, brow
 - [Remember user preferences](./user-preferences.md): Save volume and caption preferences, restore them after loading, and adapt the pattern for quality selection.
 - [Add a background video](./background-video.md): Add an accessible background video from an MP4, WebM, HLS, or Mux source
 - [Internationalize the player](./internationalization.md): Translate player labels and announcements: shipped locale packs, custom translations, runtime switching, and server rendering.
+- [Track video telemetry with Google Analytics 4](./google-analytics.md): Track video engagement, progress milestones, and playback interactions by adding the Google Analytics extension to a player
 - [Monitor playback with Mux Data](./mux-data.md): Measure startup time, rebuffering, failures, and watch time by adding the Mux Data extension to a player
 
 ## Migrate

package/docs/guides/media-sources.md

@@ -88,9 +88,12 @@ Engine options live under `source.engine`, **namespaced by engine**. Each key th
 | `engine.vimeo` | [`<vimeo-video>`](../reference/components/vimeo-video.md) | [Vimeo embed parameters](https://developer.vimeo.com/player/sdk/embed) |
 | `engine.youtube` | [`<youtube-video>`](../reference/components/youtube-video.md) | [YouTube player parameters](https://developer.chrome.com/docs/youtube/iframe_api_reference#Parameters) |
 | `engine.cloudflare` | [`<cloudflare-video>`](../reference/components/cloudflare-video.md) | [Stream player parameters](https://developers.cloudflare.com/stream/viewing-videos/using-the-stream-player/) |
+| `engine.soundcloud` | [`<soundcloud-audio>`](../reference/components/soundcloud-audio.md) | [SoundCloud Widget parameters](https://developers.soundcloud.com/docs/api/html5-widget#parameters) |
+| `engine.mixcloud` | [`<mixcloud-audio>`](../reference/components/mixcloud-audio.md) | [Mixcloud Widget options](https://www.mixcloud.com/developers/widget/) |
 | `engine.spotify` | [`<spotify-audio>`](../reference/components/spotify-audio.md) | [Spotify embed options](https://developer.spotify.com/documentation/embeds) |
 | `engine.tiktok` | [`<tiktok-video>`](../reference/components/tiktok-video.md) | [TikTok player parameters](https://developers.tiktok.com/doc/embed-player) |
 | `engine.twitch` | [`<twitch-video>`](../reference/components/twitch-video.md) | [Twitch embed parameters](https://dev.twitch.tv/docs/embed/video-and-clips/) |
+| `engine.dailymotion` | [`<dailymotion-video>`](../reference/components/dailymotion-video.md) | a Player ID and [Dailymotion runtime parameters](https://developers.dailymotion.com/reference/web-sdk-player-runtime-parameters) |
 | `engine.playerJs` | [`<playerjs-video>`](../reference/components/playerjs-video.md) | URL parameters for whichever service serves the embed |
 
 Naming the engine rather than using one generic key matters where an element has more than one to choose from. `<hlsjs-video>` plays through hls.js or through the browser depending on the platform and `preferPlayback`, and only one of them runs — so a single source can describe both paths without either engine reading the other’s options.

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

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

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

@@ -68,9 +68,9 @@ The examples keep a playback ID, analytics metadata, and a poster from two secon
 From the CDN, load the video [preset](./presets.md), the Mux media, and analytics:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/video.js"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/media/mux-video.js"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/extensions/mux-data.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.3.0/video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.3.0/media/mux-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.3.0/extensions/mux-data.js"></script>
 
 <video-player content-title="Test VOD">
   <video-skin style="aspect-ratio: 16 / 9">
@@ -288,7 +288,7 @@ Choose the smallest customization that meets your existing UI requirements: a pa
 
 ### Level 1: pick a skin
 
-Video.js has three packaged skins. The Default skin groups settings in a menu. The Neutral skin has a compact layout like a classic player control bar. The Compat skin uses plain surfaces and basic controls for broader browser support. All three bring controls, tooltips, captions, keyboard shortcuts, touch gestures, and a settings menu that appears when there’s something to put in it. See [Skins](./skins.md).
+Video.js has four packaged skins. The Default skin groups settings in a menu. The Neutral skin has a compact layout like a classic player control bar. The Compat skin has plain, unbranded surfaces with large play and seek buttons in the center. The Scaffold skin has Compat’s controls with minimal styling, as a starting point for your own design. All four bring controls, tooltips, captions, keyboard shortcuts, touch gestures, and a settings menu that appears when there’s something to put in it. See [Choose a skin](./skins.md#choose-a-skin).
 
 ### Level 2: restyle it
 
@@ -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.2.0/live-video.js"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/media/mux-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.3.0/live-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.3.0/media/mux-video.js"></script>
 
 <live-video-player>
   <live-video-skin>
@@ -452,7 +452,7 @@ Use [`createPlayer`](../reference/api/html-create-player.md) to build a player e
 The live skin already includes a live button. If you build your own controls, use that same component and style it to match your app. It keeps track of whether playback is live and returns viewers to the newest available point in the stream.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/ui/live-button.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.3.0/ui/live-button.js"></script>
 
 <media-live-button class="station-live-button">On air</media-live-button>
 ```
@@ -502,7 +502,7 @@ The video skins include a settings menu with the available quality, audio-track,
 | Quality | [Quality radio group](../reference/components/quality-radio-group.md) | Lets a viewer pick the video quality. Use `source.playback.maxResolution` to cap the stream’s available resolution; it does not force playback at that resolution. |
 | Audio tracks | [Audio track radio group](../reference/components/audio-track-radio-group.md) | For multi-language audio. |
 | Captions | [Captions radio group](../reference/components/captions-radio-group.md) | Rendered by the browser. |
-| Speed | [Playback rate radio group](../reference/components/playback-rate-radio-group.md) | The rates are a fixed set — `0.2`, `0.5`, `0.7`, `1`, `1.2`, `1.5`, `1.7`, `2` — and you can’t choose your own yet ([#1404](https://github.com/videojs/v10/issues/1404)). |
+| Speed | [Playback rate radio group](../reference/components/playback-rate-radio-group.md) | The rates default to `0.5` through `2` in steps of `0.25`. Set `defaultPlaybackRates` on the player, or `rates` on the radio group, to choose your own; see the [playback rate feature](../reference/api/feature-playback-rate.md). |
 
 When enabling captions without a previous selection in this player instance, `toggleSubtitles()` prefers a track matching `navigator.language`, then falls back to the first available caption or subtitle track. For an authored track that should show on load, add `default`. See [Show captions and subtitles](./captions.md).
 
@@ -575,7 +575,7 @@ Video.js has no Program Date Time (PDT) helpers such as `getStartDate()` or `cur
 
 Check these limitations against your required features:
 
-- The two packaged skins do not reproduce Mux Player’s themes, and there is no runtime theme switch. Plan skin customization when preserving a theme such as `classic`.
+- The packaged skins do not reproduce Mux Player’s themes, and there is no runtime theme switch. Plan skin customization when preserving a theme such as `classic`.
 - Lazy loading (`loading="viewport|page"`) has no equivalent.
 - The controls auto-hide delay isn’t configurable ([#1728](https://github.com/videojs/v10/issues/1728)). For always-visible controls, set `visibility="always"` on the controls component in a custom layout or installed skin source.
 - Player preferences such as volume, captions language, speed, and quality are not persisted automatically ([#944](https://github.com/videojs/v10/issues/944)). Mux users can set `source.playback.defaultSubtitlesLang` so the HLS playlist sets the default subtitle language. For application-managed persistence, follow [Remember user preferences](./user-preferences.md).

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.3.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.3.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.3.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.3.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.3.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.3.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.3.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.3.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.3.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.3.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.3.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.3.0/live-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.3.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.3.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.3.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
 
@@ -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,7 +26,7 @@ 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 |
 | --- | --- | --- |

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.3.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.3.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.3.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.3.0/videojs-cdn-10.3.0.zip"
         }
       }
     }
   ],
   "require": {
-    "videojs/cdn": "10.2.0"
+    "videojs/cdn": "10.3.0"
   }
 }
 ```

package/docs/guides/skins.md

@@ -8,7 +8,22 @@ 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 | Same as Compat |
+
+- **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.
+- **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 [browsers](./browser-support.md), keyboard shortcuts, and gestures. 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
 

package/docs/guides/ui-components.md

@@ -39,7 +39,7 @@ import '@videojs/html/icons/element';
 
 ### Style components with state
 
-Components add `data-*` attributes to describe their current state. For example, a play button adds `data-paused` while the media is paused. Use those attributes in CSS:
+Components add `data-*` attributes to describe their current state. For example, a play button adds `data-paused` while the media is paused, except while autoplay is pending, when the button shows pause. Use those attributes in CSS:
 
 ```css
 .my-play-button .pause-icon {

package/docs/llms.txt

@@ -1,6 +1,6 @@
 # Video.js v10 — HTML Documentation
 
-> Bundled with `@videojs/html` v10.2.0. Links are relative paths to files in this directory.
+> Bundled with `@videojs/html` v10.3.0. Links are relative paths to files in this directory.
 
 > Install the [Video.js skill](https://github.com/videojs/skills) to help AI coding agents find version-matched pages from this index.
 
@@ -82,6 +82,7 @@ Guides for one player capability each: the recommended setup, how it works, brow
 - [Remember user preferences](./guides/user-preferences.md): Save volume and caption preferences, restore them after loading, and adapt the pattern for quality selection.
 - [Add a background video](./guides/background-video.md): Add an accessible background video from an MP4, WebM, HLS, or Mux source
 - [Internationalize the player](./guides/internationalization.md): Translate player labels and announcements: shipped locale packs, custom translations, runtime switching, and server rendering.
+- [Track video telemetry with Google Analytics 4](./guides/google-analytics.md): Track video engagement, progress milestones, and playback interactions by adding the Google Analytics extension to a player
 - [Monitor playback with Mux Data](./guides/mux-data.md): Measure startup time, rebuffering, failures, and watch time by adding the Mux Data extension to a player
 
 ### Migrate
@@ -115,19 +116,19 @@ API reference for the packaged skins each preset ships.
 
 - [video-skin](./reference/components/video-skin.md): The video preset's default skin with the modern, frosted look
 - [video-neutral-skin](./reference/components/video-neutral-skin.md): The video preset's visually lighter skin, closer to a classic control bar
-- [video-compat-skin](./reference/components/video-compat-skin.md): A video skin designed for broader browser compatibility
+- [video-compat-skin](./reference/components/video-compat-skin.md): The video preset's plain, unbranded skin, a polished step above native controls
 - [video-scaffold-skin](./reference/components/video-scaffold-skin.md): A video skin with minimal styling for custom skins
 - [audio-skin](./reference/components/audio-skin.md): The audio preset's default skin with the modern, frosted look
 - [audio-neutral-skin](./reference/components/audio-neutral-skin.md): The audio preset's visually lighter skin, closer to a classic control bar
-- [audio-compat-skin](./reference/components/audio-compat-skin.md): An audio skin designed for broader browser compatibility
+- [audio-compat-skin](./reference/components/audio-compat-skin.md): The audio preset's plain, unbranded skin, a polished step above native controls
 - [audio-scaffold-skin](./reference/components/audio-scaffold-skin.md): An audio skin with minimal styling for custom skins
 - [live-video-skin](./reference/components/live-video-skin.md): The live video preset's default skin, which swaps time controls for a Live button
 - [live-video-neutral-skin](./reference/components/live-video-neutral-skin.md): The live video preset's visually lighter skin, closer to a classic control bar
-- [live-video-compat-skin](./reference/components/live-video-compat-skin.md): A live video skin designed for broader browser compatibility
+- [live-video-compat-skin](./reference/components/live-video-compat-skin.md): The live video preset's plain, unbranded skin, a polished step above native controls
 - [live-video-scaffold-skin](./reference/components/live-video-scaffold-skin.md): A live video skin with minimal styling for custom skins
 - [live-audio-skin](./reference/components/live-audio-skin.md): The live audio preset's default skin, which swaps time controls for a Live button
 - [live-audio-neutral-skin](./reference/components/live-audio-neutral-skin.md): The live audio preset's visually lighter skin, closer to a classic control bar
-- [live-audio-compat-skin](./reference/components/live-audio-compat-skin.md): A live audio skin designed for broader browser compatibility
+- [live-audio-compat-skin](./reference/components/live-audio-compat-skin.md): The live audio preset's plain, unbranded skin, a polished step above native controls
 - [live-audio-scaffold-skin](./reference/components/live-audio-scaffold-skin.md): A live audio skin with minimal styling for custom skins
 - [background-video-skin](./reference/components/background-video-skin.md): The background preset's chrome-less skin for ambient video
 
@@ -138,17 +139,20 @@ API reference for media components that handle streaming protocols and playback.
 - [audio](./reference/components/audio.md): Native audio playback that can provide media to a Video.js player
 - [background-video](./reference/components/background-video.md): Decorative background video element with automatic muting and looping
 - [cloudflare-video](./reference/components/cloudflare-video.md): Video component that plays Cloudflare Stream videos through the Stream player
+- [dailymotion-video](./reference/components/dailymotion-video.md): Video component that plays Dailymotion videos through a Dailymotion player configuration
 - [dash-video](./reference/components/dash-video.md): DASH video element powered by dash.js for adaptive bitrate streaming
 - [hls-audio](./reference/components/hls-audio.md): Audio-only HLS element that plays the audio rendition of an HLS stream
 - [hls-background-video](./reference/components/hls-background-video.md): HLS background video without controls, audio, captions, or adaptive quality
 - [hls-video](./reference/components/hls-video.md): Lightweight HLS video element with minimal bundle size
 - [hlsjs-video](./reference/components/hlsjs-video.md): HLS video element powered by hls.js for adaptive bitrate streaming
+- [mixcloud-audio](./reference/components/mixcloud-audio.md): Audio component that plays Mixcloud shows through the Mixcloud Widget
 - [mux-audio](./reference/components/mux-audio.md): Audio element for Mux-hosted HLS streams
 - [mux-background-video](./reference/components/mux-background-video.md): Mux-specific name for the HLS background video component
 - [mux-video](./reference/components/mux-video.md): Video element for Mux-hosted HLS streams
 - [native-hls-video](./reference/components/native-hls-video.md): HLS video element using the browser's built-in HLS support
 - [playerjs-video](./reference/components/playerjs-video.md): Video component that plays any embed implementing the player.js protocol, such as Mux Player, Gumlet, FrameRate, Livid, Bunny Stream, and Streamable
 - [shaka-video](./reference/components/shaka-video.md): Video element powered by Shaka Player for DASH, HLS, and progressive playback with DRM
+- [soundcloud-audio](./reference/components/soundcloud-audio.md): Audio component that plays SoundCloud tracks and sets through the SoundCloud Widget
 - [spotify-audio](./reference/components/spotify-audio.md): Audio component that plays Spotify tracks, episodes, playlists, and shows through the Spotify embed
 - [tiktok-video](./reference/components/tiktok-video.md): Video component that plays TikTok videos through the TikTok embed player
 - [twitch-video](./reference/components/twitch-video.md): Video component that plays Twitch videos and live channels through the Twitch embed player
@@ -161,6 +165,7 @@ API reference for media components that handle streaming protocols and playback.
 
 API reference for extensions that connect external services to the player.
 
+- [google-analytics](./reference/components/google-analytics.md): Options for the Google Analytics 4 extension that tracks video engagement and playback events
 - [google-cast](./reference/components/google-cast.md): Options for the Google Cast extension that configures the receiver and load request
 - [mux-data](./reference/components/mux-data.md): Options for the Mux Data extension that monitors playback quality