@videojs/html 10.1.0 → 10.3.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.1.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.1.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.1.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.1.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.1.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.1.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.1.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

@@ -4,7 +4,7 @@ Move a Video.js 8 integration to v10, mapping the options object, techs, plugins
 
 Move your Video.js 8 setup to v10 by replacing `videojs()` with a player, media component, and skin. This guide maps your options, techs, plugins, and imperative calls to those pieces.
 
-Video.js 10 ships as scoped `@videojs/*` packages. The `video.js` npm package remains Video.js 8; its [repository](https://github.com/videojs/videojs-v8) and [docs](https://legacy.videojs.org) remain available.
+Video.js 10 ships as scoped `@videojs/*` packages. The `video.js` npm package contains no player; install `video.js@8` to stay on Video.js 8, whose [repository](https://github.com/videojs/videojs-v8) and [docs](https://legacy.videojs.org) remain available.
 
 ## Before you migrate
 
@@ -65,7 +65,7 @@ Here’s a standard v8 setup: one file, captions, a poster, and the default skin
 Load the video [preset](./presets.md) from the CDN and put your media inside its skin:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.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.1.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.1.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.1.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.1.0/live-video.js"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.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.1.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.1.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
 
@@ -755,7 +755,7 @@ import '@videojs/html/media/hlsjs-video';
 ```
 
 - **DVR comes from the stream.** `live:dvr` becomes `targetLiveWindow === Infinity`, which the media reports for event playlists. There’s no way to force DVR on a sliding window. Add a time slider in skin source to let viewers seek.
-- **The live edge moved to the live button.** `liveEdge`, `userBehindLiveEdge`, and `seekToLiveEdge()` become the live button’s state and behavior. It counts playback as live within 5 seconds of the stream’s live edge start, which already sits behind the seekable end by the playlist’s hold-back. Vidstack counted the last `liveEdgeTolerance` seconds before the seekable end, 10 by default and configurable ([#1730](https://github.com/videojs/v10/issues/1730)).
+- **The live edge moved to the live button.** `liveEdge`, `userBehindLiveEdge`, and `seekToLiveEdge()` become the live button’s state and behavior. It counts playback as live within 5 seconds of the stream’s live edge start, which already sits behind the seekable end by the media’s live latency. The hls.js media uses the hls.js target latency, which `source.engine.hlsJs` can change; the other media derive it from the stream. Vidstack counted the last `liveEdgeTolerance` seconds before the seekable end, 10 by default and configurable ([#1730](https://github.com/videojs/v10/issues/1730)).
 - **`streamType` needs a feature.** No preset includes `streamTypeFeature`; add it to a custom player when one player switches between live and on-demand UI.
 - **Live presets are narrower.** They leave out playback rate, quality, and audio-track state. Build a player from a feature list to add them back.
 
@@ -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.1.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.1.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,22 +67,25 @@ For Composer-based projects such as Drupal, declare the archive as a package:
       "type": "package",
       "package": {
         "name": "videojs/cdn",
-        "version": "10.1.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.1.0/videojs-cdn-10.1.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.1.0"
+    "videojs/cdn": "10.3.0"
   }
 }
 ```
 
-Composer strips the archive’s top-level directory, so the player lands directly in your libraries path.
+Composer strips the archive’s top-level directory, and `installer-name` sets the install directory, so the player lands in `libraries/videojs-cdn/`.
 
 ### Mirror the prebuilt CDN files
 

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
 
@@ -51,6 +66,7 @@ The skin source contains the complete interface. You can add, remove, rearrange,
 
 You can also build an interface without starting from a skin. In that model, you choose and arrange individual [UI components](./ui-components.md) around the media. This takes more work, but it avoids inheriting a skin’s layout and interactions.
 
+- [Build your own skin](./build-your-own-skin.md)
 - [Build your own component](./build-your-own-component.md)
 
 ## Skins, features, and presets

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,10 +1,10 @@
 # Video.js v10 — HTML Documentation
 
-> Bundled with `@videojs/html` v10.1.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.
 
-> The `video.js` package on npm is still Video.js 8. Video.js 10 ships as `@videojs/html`; to move existing Video.js 8 code, read https://videojs.org/docs/framework/html/guides/migrate-from-video-js-8.md
+> The `video.js` package on npm contains no player; install `video.js@8` to stay on Video.js 8. Video.js 10 ships as `@videojs/html`; to move existing Video.js 8 code, read https://videojs.org/docs/framework/html/guides/migrate-from-video-js-8.md
 
 > Vidstack Player is in security-only maintenance. To move existing `vidstack` code, read https://videojs.org/docs/framework/html/guides/migrate-from-vidstack.md
 
@@ -28,6 +28,7 @@ Install Video.js, customize a skin, understand its main pieces, check browser an
 - [Build your own UI component](./guides/build-your-own-component.md): Create custom player controls that read state, dispatch actions, and stay accessible.
 - [Architecture](./guides/architecture.md): How Video.js players are structured — state, UI, media, and extensions
 - [Customize skins](./guides/customize-skins.md): Style a packaged Video.js skin or add its source to change controls, layout, styles, and interactions
+- [Build your own skin](./guides/build-your-own-skin.md): Create a skin project, preview it locally, and compose your own player interface from Video.js UI components
 - [Why Video.js?](./guides/why-videojs.md): The open-source video player for React and HTML. Lightweight, accessible components built for performance and streaming.
 - [Browser support](./guides/browser-support.md): Browsers and rendering environments supported by Video.js 10, and how the packaged skins reach them
 - [Build with AI](./guides/build-with-ai.md): Install the Video.js skill and give AI coding agents version-matched docs for building and migrating players
@@ -81,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
@@ -114,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
 
@@ -137,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
@@ -160,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
 

package/docs/reference/api/feature-playback-rate.md

@@ -2,7 +2,7 @@
 
 Playback speed state and actions for the player store
 
-Controls speed of playback.
+Controls speed of playback. `playbackRateAvailability` is `unsupported` when the media has no playback rate, such as an embed whose provider takes no speed command.
 
 ## Import
 
@@ -14,23 +14,74 @@ The `audioFeatures` and `videoFeatures` [feature bundles](../../guides/presets.m
 
 ## API Reference
 
+### Configuration
+
+Attributes and matching properties the player element accepts. They exist only while this feature is selected.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `defaultPlaybackRates` (attribute `default-playback-rates`) | `undefined \| null \| readonly number[] \| string` | `[0.5, 0.75, 1, 1.25, 1.5, 1.75, 2]` | Rates the player's controls offer, in the order they cycle through them, unless a control sets its own `rates`. HTML takes a space-separated list, such as `default-playback-rates="0.5 1 1.5 2"`. Missing or empty input restores the defaults. Rates outside the media's range are left out, so YouTube, which plays up to `2`, may offer fewer. |
+
 ### State
 
 | Property | Type | Description |
 | --- | --- | --- |
-| `playbackRates` | `readonly number[]` | Available playback rates. |
 | `playbackRate` | `number` | Current playback rate. |
+| `playbackRateAvailability` | `'available' \| 'unavailable' \| 'unsupported'` | Whether the media can change its playback rate. `unsupported` when the attached media has no `playbackRate` at all, such as an embed whose provider takes no speed command. |
+| `playbackRates` | `readonly number[]` | The default rates that fit the media's range. Set them through the player, not through the store. They are listed even when the media cannot change its rate, so check `playbackRateAvailability` before offering them. |
 
 ### Actions
 
 | Action | Type | Description |
 | --- | --- | --- |
-| `setPlaybackRate` | `(rate: number) => void` | Set the playback rate. |
+| `setPlaybackRate` | `(rate: number) => void` | Set the playback rate, clamped to the rates the media accepts. |
+
+### Playback rates
+
+The player offers `0.5` through `2` in steps of `0.25` unless you set your own list. The [playback rate button](../components/playback-rate-button.md), the [playback rate radio group](../components/playback-rate-radio-group.md), and the `speedUp` and `speedDown` [hotkeys](../../guides/keyboard-shortcuts.md) use this list unless you give one of them its own.
+
+Set the `default-playback-rates` attribute on [`<video-player>`](../components/player.md) to a space-separated list:
+
+```html
+<video-player default-playback-rates="0.5 1 1.25 1.5 2">
+  <media-container>
+    <video src="/video.mp4"></video>
+  </media-container>
+</video-player>
+```
+
+The `defaultPlaybackRates` property also takes an array, such as `player.defaultPlaybackRates = [1, 2]`. Removing the attribute restores the defaults.
+
+The button cycles through the rates in the order you list them, and the menu shows them in that order. `speedUp` and `speedDown` move to the next faster or slower rate whatever the order, and do nothing at the fastest or slowest rate. The player ignores values that aren’t positive numbers, and repeated rates. If nothing usable is left, it falls back to the defaults.
+
+### Rates for one control
+
+To give one control a different list, set `rates` on it. The rest of the player keeps the default list. The control offers these rates as given, even ones outside the media’s range, which play at the nearest end of the range.
+
+```html
+<media-playback-rate-button rates="1 1.5 2"></media-playback-rate-button>
+```
+
+To make the speed hotkeys change speed in fixed steps instead, give `speedUp` and `speedDown` a `value`. A `value` of `0.1` moves from `1` to `1.1`, then `1.2`, and so on.
+
+### Rates outside the list
+
+The media owns the current rate, so it can be one the menu doesn’t offer, such as `1.1` set through the media API or a stepped hotkey. The menu then shows that rate as an extra item, slotted before the next faster rate. Skins set it in italics, and its accessible name is “Custom, 1.1×”. The item goes away once the rate is back on the list. Normal speed (`1`) is added the same way when your list leaves it out, but isn’t marked custom.
+
+### Media range
+
+Each media accepts rates within a range. Browsers play `0.0625` through `16`, YouTube `0.25` through `2`, and Vimeo up to `2`. The player leaves out any `defaultPlaybackRates` outside that range and keeps the rest in your order. If none are left, it offers the defaults within the range and warns in development. `setPlaybackRate` clamps a rate outside the range to the nearest end, and warns in development. That includes `0`, which would stop the picture while the player still reports playback; call `pause()` instead.
+
+`playbackRates` lists rates even for a media that can’t change its rate, so check `playbackRateAvailability` before offering them.
+
+YouTube rounds rates down to a step of `0.05`, so asking for `1.13` plays at `1.1`.
 
 ### Selector
 
 Pass `selectPlaybackRate` to [`PlayerController`](./player-controller.md) to subscribe to playback rate state. Returns `undefined` if the playback rate feature is not configured.
 
+Check `playbackRateAvailability` before showing a playback rate control.
+
 **rate-display.ts**
 
 ```ts

package/docs/reference/api/feature-playback.md

@@ -4,6 +4,8 @@ Play/pause state and actions for the player store
 
 Controls play/pause state and tracks whether playback has started or is stalled.
 
+When the media has `autoplay`, `autoplaying` is true from the moment a source loads until playback starts. It also turns false when the autoplay is refused: browsers don’t announce that, so it shows as the media being able to play through but staying paused, and embeds report it with a `pause` or `error` event. Treat it as playback about to begin: the play button shows pause and the buffering indicator shows while it’s true, and `pause()` cancels it.
+
 ## Import
 
 ```ts
@@ -22,13 +24,15 @@ The `audioFeatures`, `liveAudioFeatures`, `liveVideoFeatures`, and `videoFeature
 | `ended` | `boolean` | Whether playback has reached the end. |
 | `started` | `boolean` | Whether playback has started (played or seeked). |
 | `waiting` | `boolean` | Whether playback is stalled waiting for data. |
+| `autoplay` | `boolean` | Whether the media starts playing on its own once it can. |
+| `autoplaying` | `boolean` | Whether the media is trying to autoplay: `autoplay` is set, and playback hasn't started yet. Clears when playback starts, when `pause()` cancels it, and when the autoplay is refused. Browsers don't announce a refusal, so it shows as the media being able to play through but staying paused; embeds report one with a `pause` or `error` event. Controls treat it as playback that's about to begin. |
 
 ### Actions
 
 | Action | Type | Description |
 | --- | --- | --- |
 | `play` | `() => Promise<void>` | Start playback. Updates `paused` immediately when the media starts. |
-| `pause` | `() => void` | Pause playback. Updates `paused` immediately. |
+| `pause` | `() => void` | Pause playback. Updates `paused` immediately, and cancels a pending autoplay. |
 
 ### Selector
 

package/docs/reference/api/html-create-player.md

@@ -175,7 +175,7 @@ Creates a typed HTML player class and bound controller.
 
 | Parameter | Type | Default | Description |
 | --- | --- | --- | --- |
-| `config` (required) | `{ features: [PlayerFeature<MediaPlaybackState>, PlayerFeature<MediaPlaybackRateState>, PlayerFeature<MediaQualityState>, PlayerFeature<MediaAudioTrackState>, PlayerFeature<MediaVolumeState>, PlayerFeature<MediaTimeState>, PlayerFeature<MediaSourceState>, PlayerFeature<MediaBufferState>, PlayerFeature<MediaFullscreenState>, PlayerFeature<MediaPictureInPictureState>, PlayerFeature<MediaRemotePlaybackState>, PlayerFeature<MediaControlsState>, PlayerFeature<MediaTextTrackState>, PlayerFeature<MediaErrorState>, typeof metadataFeature] }` | — | Player configuration with features. |
+| `config` (required) | `{ features: [PlayerFeature<MediaPlaybackState>, typeof playbackRateFeature, PlayerFeature<MediaQualityState>, PlayerFeature<MediaAudioTrackState>, PlayerFeature<MediaVolumeState>, PlayerFeature<MediaTimeState>, PlayerFeature<MediaSourceState>, PlayerFeature<MediaBufferState>, PlayerFeature<MediaFullscreenState>, PlayerFeature<MediaPictureInPictureState>, PlayerFeature<MediaRemotePlaybackState>, PlayerFeature<MediaControlsState>, PlayerFeature<MediaTextTrackState>, PlayerFeature<MediaErrorState>, typeof metadataFeature] }` | — | Player configuration with features. |
 
 #### Return Value
 
@@ -195,7 +195,7 @@ Creates a typed HTML audio player class and bound controller.
 
 | Parameter | Type | Default | Description |
 | --- | --- | --- | --- |
-| `config` (required) | `{ features: [PlayerFeature<MediaPlaybackState>, PlayerFeature<MediaPlaybackRateState>, PlayerFeature<MediaVolumeState>, PlayerFeature<MediaTimeState>, PlayerFeature<MediaSourceState>, PlayerFeature<MediaBufferState>, PlayerFeature<MediaErrorState>, typeof metadataFeature] }` | — | Player configuration with features. |
+| `config` (required) | `{ features: [PlayerFeature<MediaPlaybackState>, typeof playbackRateFeature, PlayerFeature<MediaVolumeState>, PlayerFeature<MediaTimeState>, PlayerFeature<MediaSourceState>, PlayerFeature<MediaBufferState>, PlayerFeature<MediaErrorState>, typeof metadataFeature] }` | — | Player configuration with features. |
 
 #### Return Value
 

package/docs/reference/api/llms.txt

@@ -1,6 +1,6 @@
 # Video.js v10 — HTML API
 
-> API reference for the player factory, presets, store controllers, features, translation tools, and utilities. Bundled with `@videojs/html` v10.1.0. Links are relative paths to files in this directory.
+> API reference for the player factory, presets, store controllers, features, translation tools, and utilities. Bundled with `@videojs/html` v10.3.0. Links are relative paths to files in this directory.
 
 ## Player