@videojs/html 10.2.0 → 10.4.0

package/dist/dev/ui/time-slider/markers.d.ts

@@ -0,0 +1,48 @@
+import { UIElement } from "../ui-element.js";
+import { TextTrackDefinition } from "@videojs/core";
+import { PropertyValues } from "@videojs/element";
+import { TextTrackFilter, TextTrackKind } from "@videojs/media";
+//#region src/ui/time-slider/markers.d.ts
+type TextTrackQuery = TextTrackFilter | TextTrackDefinition;
+/**
+ * Draws a marker on the time slider for each cue on the text tracks a filter matches, such as ad breaks. Pick tracks
+ * with the `kind`, `label`, and `language` attributes, or with the `filter` property; with neither, nothing is drawn.
+ * The store reads the matching tracks while the element is connected, so tracks it doesn't read by default work too.
+ *
+ * Each marker clones the light-DOM template, which must contain exactly one HTML root element, or is a `<div>` without
+ * one. Markers are decorative: the slider's own value is what assistive technology reads.
+ */
+export declare class TimeSliderMarkersElement extends UIElement {
+  #private;
+  static readonly tagName = "media-time-slider-markers";
+  static properties: {
+    kind: {
+      type: StringConstructor;
+    };
+    label: {
+      type: StringConstructor;
+    };
+    language: {
+      type: StringConstructor;
+    };
+  };
+  /** Draw cues from tracks of this kind. */
+  kind: TextTrackKind | null | undefined;
+  /** Draw cues from tracks with this label. */
+  label: string | null | undefined;
+  /** Draw cues from tracks in this language. */
+  language: string | null | undefined;
+  /**
+   * Picks the tracks whose cues are drawn: a filter object, a function, or a track definition. Takes priority over the
+   * `kind`, `label`, and `language` attributes. Set as a JavaScript property; it has no attribute.
+   */
+  get filter(): TextTrackQuery | undefined;
+  set filter(value: TextTrackQuery | undefined);
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  destroyCallback(): void;
+  protected willUpdate(changed: PropertyValues): void;
+  protected update(changed: PropertyValues): void;
+}
+//#endregion
+//# sourceMappingURL=markers.d.ts.map

package/dist/dev/ui/time-slider/markers.js

@@ -0,0 +1,165 @@
+import { playerContext } from "../../player/context.js";
+import { PlayerController } from "../../player/controller.js";
+import { UIElement } from "../ui-element.js";
+import { sliderContext } from "../slider/context.js";
+import { TimeSliderMarkerCSSVars, TimeSliderMarkerDataAttrs, TimeSliderMarkersCore, getActiveTextCues, getTextCues } from "@videojs/core";
+import { applyStateDataAttrs, selectBuffer, selectTextCues, selectTime } from "@videojs/core/dom";
+import { getTimeRangeEnd } from "@videojs/media";
+import { ContextConsumer } from "@videojs/element/context";
+import { cloneTemplateRoot, getTemplateElement, getTemplateRoot } from "@videojs/utils/dom";
+import { isNil } from "@videojs/utils/predicate";
+//#region src/ui/time-slider/markers.ts
+/**
+* Draws a marker on the time slider for each cue on the text tracks a filter matches, such as ad breaks. Pick tracks
+* with the `kind`, `label`, and `language` attributes, or with the `filter` property; with neither, nothing is drawn.
+* The store reads the matching tracks while the element is connected, so tracks it doesn't read by default work too.
+*
+* Each marker clones the light-DOM template, which must contain exactly one HTML root element, or is a `<div>` without
+* one. Markers are decorative: the slider's own value is what assistive technology reads.
+*/
+var TimeSliderMarkersElement = class extends UIElement {
+	static {
+		this.tagName = "media-time-slider-markers";
+	}
+	static {
+		this.properties = {
+			kind: { type: String },
+			label: { type: String },
+			language: { type: String }
+		};
+	}
+	#core = new TimeSliderMarkersCore();
+	#slider = new ContextConsumer(this, {
+		context: sliderContext,
+		subscribe: true
+	});
+	#textCues = new PlayerController(this, playerContext, selectTextCues);
+	#time = new PlayerController(this, playerContext, selectTime);
+	#buffer = new PlayerController(this, playerContext, selectBuffer);
+	#rendered = /* @__PURE__ */ new Map();
+	#filter;
+	#attributeFilter;
+	#watching = null;
+	#templateRoot = null;
+	#templateChecked = false;
+	/**
+	* Picks the tracks whose cues are drawn: a filter object, a function, or a track definition. Takes priority over the
+	* `kind`, `label`, and `language` attributes. Set as a JavaScript property; it has no attribute.
+	*/
+	get filter() {
+		return this.#filter;
+	}
+	set filter(value) {
+		this.#filter = value;
+		this.requestUpdate();
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.setAttribute("aria-hidden", "true");
+	}
+	disconnectedCallback() {
+		this.#unwatch();
+		super.disconnectedCallback();
+	}
+	destroyCallback() {
+		this.#unwatch();
+		super.destroyCallback();
+	}
+	willUpdate(changed) {
+		super.willUpdate(changed);
+		if (changed.has("kind") || changed.has("label") || changed.has("language")) this.#attributeFilter = this.#getAttributeFilter();
+		this.#watch(this.#getFilter());
+	}
+	update(changed) {
+		super.update(changed);
+		const slider = this.#slider.value;
+		const templateRoot = this.#getTemplateRoot();
+		if (!slider) return;
+		applyStateDataAttrs(this, slider.state, slider.stateAttrMap);
+		const filter = this.#getFilter();
+		const textCues = this.#textCues.value;
+		const time = this.#time.value;
+		const max = getTimeRangeEnd({
+			duration: time?.duration ?? 0,
+			seekable: this.#buffer.value?.seekable ?? []
+		});
+		const markers = filter && textCues ? this.#core.getMarkers({
+			cues: getTextCues(textCues, filter),
+			activeCues: getActiveTextCues(textCues, filter),
+			min: 0,
+			max,
+			orientation: slider.state.orientation
+		}) : [];
+		const next = /* @__PURE__ */ new Map();
+		for (const marker of markers) {
+			const root = this.#rendered.get(marker.key) ?? this.#createMarker(templateRoot);
+			root.style.setProperty(TimeSliderMarkerCSSVars.start, marker.startPercent);
+			root.style.setProperty(TimeSliderMarkerCSSVars.end, marker.endPercent);
+			root.style.setProperty(TimeSliderMarkerCSSVars.width, marker.width ?? marker.height ?? "0%");
+			applyStateDataAttrs(root, slider.state, slider.stateAttrMap);
+			applyStateDataAttrs(root, marker, TimeSliderMarkerDataAttrs);
+			next.set(marker.key, root);
+		}
+		for (const [key, root] of this.#rendered) if (!next.has(key)) root.remove();
+		let before = null;
+		for (const root of [...next.values()].reverse()) {
+			if (root.parentNode !== this || root.nextSibling !== before) this.insertBefore(root, before);
+			before = root;
+		}
+		this.#rendered.clear();
+		for (const [key, rendered] of next) this.#rendered.set(key, rendered);
+	}
+	#getFilter() {
+		return this.#filter ?? this.#attributeFilter;
+	}
+	/** A filter from the attributes that are present, or none when no attribute is. */
+	#getAttributeFilter() {
+		const { kind, label, language } = this;
+		if (isNil(kind) && isNil(label) && isNil(language)) return void 0;
+		return {
+			kind: kind ?? void 0,
+			label: label ?? void 0,
+			language: language ?? void 0
+		};
+	}
+	/** Ask the store to read the tracks the filter matches while the element is connected. */
+	#watch(filter) {
+		const watch = this.isConnected ? this.#textCues.value?.watchTextCues : void 0;
+		if (this.#watching?.watch === watch && this.#watching?.filter === filter) return;
+		this.#unwatch();
+		if (watch && filter) this.#watching = {
+			watch,
+			filter,
+			stop: watch(filter)
+		};
+	}
+	#unwatch() {
+		this.#watching?.stop();
+		this.#watching = null;
+	}
+	#createMarker(templateRoot) {
+		return templateRoot ? cloneTemplateRoot(templateRoot, this.ownerDocument) : this.ownerDocument.createElement("div");
+	}
+	/** The template's root, found once; until there is a template, other content is cleared and markers are `<div>`s. */
+	#getTemplateRoot() {
+		if (this.#templateChecked) return this.#templateRoot;
+		const template = getTemplateElement(this);
+		const rendered = new Set(this.#rendered.values());
+		for (const node of [...this.childNodes]) if (node !== template && !rendered.has(node)) node.remove();
+		if (!template) return null;
+		this.#templateChecked = true;
+		for (const node of rendered) node.remove();
+		this.#rendered.clear();
+		const root = getTemplateRoot(template);
+		if (root?.namespaceURI !== "http://www.w3.org/1999/xhtml") {
+			console.warn(`[${this.localName}] template must contain exactly one HTML root element.`);
+			return null;
+		}
+		this.#templateRoot = root;
+		return this.#templateRoot;
+	}
+};
+//#endregion
+export { TimeSliderMarkersElement };
+
+//# sourceMappingURL=markers.js.map

package/dist/dev/ui/time-slider/markers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"markers.js","names":[],"sources":["../../../../src/ui/time-slider/markers.ts"],"sourcesContent":["import {\n  getActiveTextCues,\n  getTextCues,\n  type TextTrackDefinition,\n  TimeSliderMarkerCSSVars,\n  TimeSliderMarkerDataAttrs,\n  TimeSliderMarkersCore,\n} from '@videojs/core';\nimport { applyStateDataAttrs, selectBuffer, selectTextCues, selectTime } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\nimport { getTimeRangeEnd, type TextTrackFilter, type TextTrackKind } from '@videojs/media';\nimport { cloneTemplateRoot, getTemplateElement, getTemplateRoot } from '@videojs/utils/dom';\nimport { isNil } from '@videojs/utils/predicate';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { sliderContext } from '../slider/context';\nimport { UIElement } from '../ui-element';\n\ntype TextTrackQuery = TextTrackFilter | TextTrackDefinition;\n\ninterface TextCuesWatch {\n  watch: (filter: TextTrackFilter) => () => void;\n  filter: TextTrackQuery;\n  stop: () => void;\n}\n\n/**\n * Draws a marker on the time slider for each cue on the text tracks a filter matches, such as ad breaks. Pick tracks\n * with the `kind`, `label`, and `language` attributes, or with the `filter` property; with neither, nothing is drawn.\n * The store reads the matching tracks while the element is connected, so tracks it doesn't read by default work too.\n *\n * Each marker clones the light-DOM template, which must contain exactly one HTML root element, or is a `<div>` without\n * one. Markers are decorative: the slider's own value is what assistive technology reads.\n */\nexport class TimeSliderMarkersElement extends UIElement {\n  static readonly tagName = 'media-time-slider-markers';\n\n  static override properties = {\n    kind: { type: String },\n    label: { type: String },\n    language: { type: String },\n  } satisfies PropertyDeclarationMap<'kind' | 'label' | 'language'>;\n\n  /** Draw cues from tracks of this kind. */\n  kind: TextTrackKind | null | undefined;\n  /** Draw cues from tracks with this label. */\n  label: string | null | undefined;\n  /** Draw cues from tracks in this language. */\n  language: string | null | undefined;\n\n  readonly #core = new TimeSliderMarkersCore();\n  readonly #slider = new ContextConsumer(this, { context: sliderContext, subscribe: true });\n  readonly #textCues = new PlayerController(this, playerContext, selectTextCues);\n  readonly #time = new PlayerController(this, playerContext, selectTime);\n  readonly #buffer = new PlayerController(this, playerContext, selectBuffer);\n  readonly #rendered = new Map<string, HTMLElement>();\n  #filter: TextTrackQuery | undefined;\n  #attributeFilter: TextTrackFilter | undefined;\n  #watching: TextCuesWatch | null = null;\n  #templateRoot: HTMLElement | null = null;\n  #templateChecked = false;\n\n  /**\n   * Picks the tracks whose cues are drawn: a filter object, a function, or a track definition. Takes priority over the\n   * `kind`, `label`, and `language` attributes. Set as a JavaScript property; it has no attribute.\n   */\n  get filter(): TextTrackQuery | undefined {\n    return this.#filter;\n  }\n\n  set filter(value: TextTrackQuery | undefined) {\n    this.#filter = value;\n    this.requestUpdate();\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('aria-hidden', 'true');\n  }\n\n  override disconnectedCallback(): void {\n    this.#unwatch();\n    super.disconnectedCallback();\n  }\n\n  override destroyCallback(): void {\n    this.#unwatch();\n    super.destroyCallback();\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n\n    if (changed.has('kind') || changed.has('label') || changed.has('language')) {\n      this.#attributeFilter = this.#getAttributeFilter();\n    }\n\n    this.#watch(this.#getFilter());\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    const slider = this.#slider.value;\n    const templateRoot = this.#getTemplateRoot();\n\n    if (!slider) return;\n\n    applyStateDataAttrs(this, slider.state, slider.stateAttrMap);\n\n    const filter = this.#getFilter();\n    const textCues = this.#textCues.value;\n    const time = this.#time.value;\n    const max = getTimeRangeEnd({ duration: time?.duration ?? 0, seekable: this.#buffer.value?.seekable ?? [] });\n\n    const markers =\n      filter && textCues\n        ? this.#core.getMarkers({\n            cues: getTextCues(textCues, filter),\n            activeCues: getActiveTextCues(textCues, filter),\n            min: 0,\n            max,\n            orientation: slider.state.orientation,\n          })\n        : [];\n\n    const next = new Map<string, HTMLElement>();\n\n    for (const marker of markers) {\n      const root = this.#rendered.get(marker.key) ?? this.#createMarker(templateRoot);\n\n      root.style.setProperty(TimeSliderMarkerCSSVars.start, marker.startPercent);\n      root.style.setProperty(TimeSliderMarkerCSSVars.end, marker.endPercent);\n      root.style.setProperty(TimeSliderMarkerCSSVars.width, marker.width ?? marker.height ?? '0%');\n      applyStateDataAttrs(root, slider.state, slider.stateAttrMap);\n      applyStateDataAttrs(root, marker, TimeSliderMarkerDataAttrs);\n\n      next.set(marker.key, root);\n    }\n\n    for (const [key, root] of this.#rendered) {\n      if (!next.has(key)) root.remove();\n    }\n\n    let before: ChildNode | null = null;\n\n    for (const root of [...next.values()].reverse()) {\n      if (root.parentNode !== this || root.nextSibling !== before) this.insertBefore(root, before);\n\n      before = root;\n    }\n\n    this.#rendered.clear();\n\n    for (const [key, rendered] of next) this.#rendered.set(key, rendered);\n  }\n\n  #getFilter(): TextTrackQuery | undefined {\n    return this.#filter ?? this.#attributeFilter;\n  }\n\n  /** A filter from the attributes that are present, or none when no attribute is. */\n  #getAttributeFilter(): TextTrackFilter | undefined {\n    const { kind, label, language } = this;\n    if (isNil(kind) && isNil(label) && isNil(language)) return undefined;\n\n    return { kind: kind ?? undefined, label: label ?? undefined, language: language ?? undefined };\n  }\n\n  /** Ask the store to read the tracks the filter matches while the element is connected. */\n  #watch(filter: TextTrackQuery | undefined): void {\n    const watch = this.isConnected ? this.#textCues.value?.watchTextCues : undefined;\n    if (this.#watching?.watch === watch && this.#watching?.filter === filter) return;\n\n    this.#unwatch();\n\n    if (watch && filter) this.#watching = { watch, filter, stop: watch(filter) };\n  }\n\n  #unwatch(): void {\n    this.#watching?.stop();\n    this.#watching = null;\n  }\n\n  #createMarker(templateRoot: HTMLElement | null): HTMLElement {\n    return templateRoot ? cloneTemplateRoot(templateRoot, this.ownerDocument) : this.ownerDocument.createElement('div');\n  }\n\n  /** The template's root, found once; until there is a template, other content is cleared and markers are `<div>`s. */\n  #getTemplateRoot(): HTMLElement | null {\n    if (this.#templateChecked) return this.#templateRoot;\n\n    const template = getTemplateElement(this);\n    const rendered = new Set<ChildNode>(this.#rendered.values());\n\n    for (const node of [...this.childNodes]) {\n      if (node !== template && !rendered.has(node)) node.remove();\n    }\n\n    if (!template) return null;\n\n    this.#templateChecked = true;\n\n    // Markers drawn before the template arrived are redrawn from it.\n    for (const node of rendered) node.remove();\n\n    this.#rendered.clear();\n\n    const root = getTemplateRoot(template);\n\n    if (root?.namespaceURI !== 'http://www.w3.org/1999/xhtml') {\n      if (__DEV__) {\n        console.warn(`[${this.localName}] template must contain exactly one HTML root element.`);\n      }\n\n      return null;\n    }\n\n    // SAFETY: the root was just checked to be in the XHTML namespace, so it is an HTML element.\n    this.#templateRoot = root as HTMLElement;\n    return this.#templateRoot;\n  }\n}\n"],"mappings":"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"}

package/dist/dev/version.js

@@ -1,7 +1,7 @@
 //#region src/version.ts
 const readVersion = () => {
 	try {
-		return "10.2.0";
+		return "10.4.0";
 	} catch {}
 	return "UNKNOWN";
 };

package/docs/README.md

@@ -1,6 +1,6 @@
 # @videojs/html documentation
 
-Bundled markdown documentation for `@videojs/html` v10.2.0.
+Bundled markdown documentation for `@videojs/html` v10.4.0.
 
 Start at [`./llms.txt`](./llms.txt) — it's the structured index of every page in this directory.
 

package/docs/guides/autoplay.md

@@ -87,7 +87,7 @@ import '@videojs/html/ui/play-button';
 
 The `autoplay`, `muted`, and `playsinline` attributes on `<video>` and similar media components pass through to the underlying media element. The media element applies the attributes it supports and requests playback as soon as it has enough data.
 
-The [playback feature](../reference/api/feature-playback.md) reflects the result in player state. When autoplay succeeds, `paused` becomes `false` and `started` becomes `true`. When the browser blocks autoplay, the player stays `paused: true` with `started: false`, and the [Play button](../reference/components/play-button.md) renders its play state. There is no separate autoplay failure event: a blocked autoplay looks like media that never started.
+The [playback feature](../reference/api/feature-playback.md) reflects the result in player state. While the media is trying to autoplay, `autoplaying` is `true`: the [Play button](../reference/components/play-button.md) shows pause, so clicking it cancels the autoplay, and the [Buffering indicator](../reference/components/buffering-indicator.md) appears after its delay. When autoplay succeeds, `paused` becomes `false` and `started` becomes `true`. When the browser blocks autoplay, the player stays `paused: true` with `started: false`, and the [Play button](../reference/components/play-button.md) renders its play state. There is no separate autoplay failure event: a blocked autoplay looks like media that never started.
 
 Calling `play()` from player state returns the native promise from the media element. When the browser blocks playback, that promise rejects with a `NotAllowedError`.
 
@@ -106,7 +106,7 @@ Calling `play()` from player state returns the native promise from the media ele
 
 Use `<background-video>` for an MP4 or WebM file, `<hls-background-video>` for an HLS stream, or `<mux-background-video>` for a complete Mux HLS URL.
 
-These components default to muted, looping playback without player controls. Provide a separate motion control and respect reduced-motion preferences. For setup and motion controls, follow [Add a background video](./background-video.md). That guide also covers streaming backgrounds, which always autoplay and need conditional mounting.
+These components default to muted, looping playback without player controls. Provide a separate motion control and respect reduced-motion preferences. For setup and motion controls, follow [Add a background video](./background-video.md). That guide also covers streaming backgrounds, which use the same pause and play pattern.
 
 ### Autoplay with sound
 

package/docs/guides/background-video.md

@@ -190,7 +190,7 @@ Set size, position, and transforms on the decorative wrapper so the poster and v
 - Use a source the browser can play directly, such as MP4 or WebM.
 - Safari can play HLS URLs directly. Other browsers cannot do so reliably, so use an HLS variation below when the same `.m3u8` URL must work across browsers.
 - `<background-video>` does not create a poster or report analytics. Keep the poster in your page and add analytics only when you need them.
-- Provide a way to pause or hide persistent background motion. The example includes that control and follows `prefers-reduced-motion`. For the streaming variations below, stop and restart motion by adding and removing the element.
+- Provide a way to pause or hide persistent background motion. The example includes that control and follows `prefers-reduced-motion`. The streaming variations below pause and play through the same `target` property.
 - If the video communicates information, remove `aria-hidden`, give it an accessible name and controls, and use a regular video player.
 
 ## Common variations
@@ -202,9 +202,7 @@ Choose a variation based on the source you already have:
 | Cross-browser HLS with a small background-only player | [`<hls-background-video>`](../reference/components/hls-background-video.md) |
 | The same background-only player for a Mux HLS URL | [`<mux-background-video>`](../reference/components/mux-background-video.md) |
 
-These streaming background components always autoplay. They ignore `autoPlay={false}` and `noautoplay`.
-
-Keep the poster and motion button from the primary example. Change `setMotion` to create and append a streaming element only when motion is enabled, and remove it when motion is disabled. Do not set `keep-alive`: removal must destroy playback. Create a new element each time motion is enabled; do not reuse the removed one. These elements expose the inner video as `video`, rather than the native background element’s `target`.
+The primary example works unchanged with the streaming elements: replace `<background-video>` with `<hls-background-video>` or `<mux-background-video>`, keep `noautoplay`, and update the selector in the script. Like `<background-video>`, they expose the native video as `target` for `play()` and `pause()`. Pausing keeps the stream and its position, so motion resumes where it stopped. To stop network activity as well, remove the element instead. Without `keep-alive`, removal releases the engine.
 
 ### Play an HLS video
 

package/docs/guides/browser-support.md

@@ -2,23 +2,31 @@
 
 Browsers and rendering environments supported by Video.js 10, and how the packaged skins reach them
 
-*Supported browsers and the versions of each that Video.js supports*
+*Supported browsers, the versions of each that Video.js supports, and the older versions the Compat skin also reaches*
 
-| Browser | Versions |
-| --- | --- |
-| Chrome | 111 and later |
-| Edge | 111 and later |
-| Firefox | 121 and later |
-| Safari | 16.4 and later |
-| Safari on iOS | 16.4 and later |
+| Browser | Versions | Compat skin |
+| --- | --- | --- |
+| Chrome | 111 and later | 99 and later |
+| Edge | 111 and later | 99 and later |
+| Firefox | 121 and later | 97 and later |
+| Safari | 16.4 and later | 15.4 and later |
+| Safari on iOS | 16.4 and later | 15.4 and later |
 
-These versions account for 92.5% of global web usage according to [caniuse-lite](https://github.com/browserslist/caniuse-lite) 1.0.30001815, and this figure updates when we update that data.
+These versions account for 92.5% of global web usage according to [caniuse-lite](https://github.com/browserslist/caniuse-lite) 1.0.30001815, and the Compat versions account for 94.4%. These figures update when we update that data.
 
-We test in and fix bugs for these versions. Each minimum comes from a feature with no fallback: `:has()` sets Firefox, [`color-mix()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix) and [`oklch()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch) set Chrome and Edge (Chrome 111, Firefox 113, Safari 16.2), and the JavaScript sets Safari, because it uses ES2022 syntax and [`adoptedStyleSheets`](https://developer.mozilla.org/en-US/docs/Web/API/Document/adoptedStyleSheets). Newer JavaScript APIs are feature-detected.
+We test in and fix bugs for the main versions. Each of those minimums comes from a feature with no fallback: `:has()` sets Firefox, [`color-mix()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix) and [`oklch()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch) set Chrome and Edge (Chrome 111, Firefox 113, Safari 16.2), and the JavaScript sets Safari, because it uses ES2022 syntax and [`adoptedStyleSheets`](https://developer.mozilla.org/en-US/docs/Web/API/Document/adoptedStyleSheets). Newer JavaScript APIs are feature-detected.
+
+The [Compat skin](./skins.md#choose-a-skin) also reaches the older versions in the last column. It leaves out backdrop blur, anchor-positioned menu highlights, and squircle corners, and its stylesheets fall back to plain colors where `color-mix()` and `oklch()` are missing. Below the main versions, it keeps its narrow layout and default size, because container queries and media query ranges are missing, and the time slider preview stays hidden on keyboard focus. Every build checks its stylesheets against these older versions, and our browser tests run at the main versions.
+
+The Scaffold skin, a starting point for your own design, reaches the same older versions.
+
+The HTML player’s JavaScript needs Firefox 101 and Safari 16.4, so with HTML the Compat skin reaches Chrome and Edge 99, Firefox 101, and Safari 16.4.
+
+The older versions apply to the packaged skins. Tailwind skins follow Tailwind’s own browser support, and registry skins in plain CSS need `@scope` unless you [flatten it](#flatten-scope-in-registry-skins). If your build lowers CSS for its own targets, include these older versions in them, or it may rewrite the fallbacks.
 
 ## CSS requirements
 
-The packaged skins are generated CSS, and the build lowers them for the browsers above. It flattens CSS nesting, adds vendor prefixes such as `-webkit-backdrop-filter`, and writes each skin’s scope as a [`:where()`](https://developer.mozilla.org/en-US/docs/Web/CSS/:where) selector, which adds no specificity, rather than [`@scope`](https://developer.mozilla.org/en-US/docs/Web/CSS/@scope).
+The packaged skins are generated CSS, and the build lowers them for the main versions above. It flattens CSS nesting, adds vendor prefixes such as `-webkit-backdrop-filter`, and writes each skin’s scope as a [`:where()`](https://developer.mozilla.org/en-US/docs/Web/CSS/:where) selector, which adds no specificity, rather than [`@scope`](https://developer.mozilla.org/en-US/docs/Web/CSS/@scope).
 
 Skins you add as source through the [Shadcn registry](./installation-shadcn.md) keep `@scope`, which reads more clearly in files you edit. Their plain CSS versions need Chrome and Edge 118, Firefox 146, and Safari and iOS 17.4 unless you [flatten `@scope` in your build](#flatten-scope-in-registry-skins); the Tailwind versions style elements with utility classes and follow the versions above.
 
@@ -38,16 +46,16 @@ The table reads the first fully supporting version of each feature from [caniuse
 | --- | --- | --- | --- | --- |
 | [`@scope`](https://caniuse.com/css-cascade-scope) Has a fallback. Packaged skins use :where() selectors instead; registry CSS skins need it. | 118 | 146 | 17.4 | 91.7% |
 | [`@layer`](https://caniuse.com/css-cascade-layers) Required. No component styling. | 99 | 97 | 15.4 | 96.0% |
-| [`:has()`](https://caniuse.com/css-has) Required. Menu and slider focus states are lost. | 105 | 121 | 15.4 | 94.8% |
-| [`@container`](https://caniuse.com/css-container-queries) Required. Controls do not adapt to player width. | 106 | 110 | 16 | 94.8% |
+| [`:has()`](https://caniuse.com/css-has) Required. Menu and slider focus states are lost. Compat loses only the time slider preview on keyboard focus. | 105 | 121 | 15.4 | 94.8% |
+| [`@container`](https://caniuse.com/css-container-queries) Required. Controls do not adapt to player width. Compat keeps its narrow layout, without the center controls or the duration. | 106 | 110 | 16 | 94.8% |
 | [`Media query range syntax`](https://caniuse.com/css-media-range-syntax) Required. Large-screen sizing is lost. | 104 | 63 | 16.4 | 94.8% |
 | [`:dir()`](https://caniuse.com/css-dir-pseudo) Has a fallback. Right-to-left layout follows the dir attribute instead. | 120 | 17 | 16.4 | 92.5% |
 | [`Relative color syntax`](https://caniuse.com/css-relative-colors) Degrades. Control scrims fall back to color-mix(), and subtle shadows are lost. | 131 | 133 | 18 | 87.0% |
 | [`scrollbar-color and scrollbar-width`](https://caniuse.com/css-scrollbar) Degrades. Menus show default scrollbars. | 121 | 64 | 26.2 | 87.0% |
-| [`backdrop-filter`](https://caniuse.com/css-backdrop-filter) Degrades. Surfaces lose their blur. | 76 / 17 | 103 | 9 | 96.4% |
+| [`backdrop-filter`](https://caniuse.com/css-backdrop-filter) Degrades. Surfaces lose their blur. Compat does not use it. | 76 / 17 | 103 | 9 | 96.4% |
 | [`Anchor positioning`](https://caniuse.com/css-anchor-positioning) Has a fallback. Popups are positioned by JavaScript. | Not supported | Not supported | 27 | 0.0% |
 
-Older browsers than the baseline are not tested. Without `:has()`, `@container`, `@layer`, `color-mix()`, or `oklch()`, the skins lose focus states, layout, or colors.
+Below the main versions, only the Compat and Scaffold skins are supported. Without `:has()`, `@container`, `@layer`, `color-mix()`, or `oklch()`, the Default and Neutral skins lose focus states, layout, or colors.
 
 ## Build the skin CSS yourself
 

package/docs/guides/build-your-own-skin.md

@@ -8,7 +8,7 @@ If a packaged skin is already close to what you want, [Customize skins](./custom
 
 ## Create a skin project
 
-The quickest way to start is a standalone skin project:
+The quickest way to start is a standalone skin project. You need [Node.js](https://nodejs.org/) to create the project, run the workbench that previews your skin, and deploy it. Run `node -v` to see which version you have. If you don’t have Node.js, or yours is a few years old, install the latest LTS release.
 
 **npm**
 
@@ -107,6 +107,8 @@ If you work with a coding agent, such as Claude Code, Codex, or Cursor, it can d
 npx @videojs/cli agents skills
 ```
 
+The agent runs the same commands as you would, so it needs Node.js too. If Node.js isn’t installed, you can ask the agent to install it, but it may need your permission or your password to do so.
+
 Then ask your agent something like “Help me design my own Video.js skin for our podcast player.” It asks for the same choices as the command, creates the project, starts the workbench, and agrees a design with you before styling. It can also match an existing player’s look from a screenshot or a link, then checks its work against the reference and for accessibility before handing back. [Build with AI](./build-with-ai.md) covers installing the skills in each agent.
 
 ## Other starting points

package/docs/guides/cdn.md

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

package/docs/guides/content-security-policy.md

@@ -40,9 +40,12 @@ Add only the origins for the providers you use. Extend `script-src` with their s
 | --- | --- | --- |
 | YouTube | `https://www.youtube.com` | `https://www.youtube.com` or `https://www.youtube-nocookie.com`, depending on your source URL |
 | Vimeo | — | `https://player.vimeo.com`; `https://vimeo.com` for live events |
+| SoundCloud | — | `https://w.soundcloud.com` |
+| Mixcloud | \- | `https://player-widget.mixcloud.com` |
 | Spotify | `https://open.spotify.com` | `https://open.spotify.com` |
 | TikTok | — | `https://www.tiktok.com` |
 | Twitch | — | `https://player.twitch.tv` |
+| Dailymotion | `https://geo.dailymotion.com` | `https://geo.dailymotion.com` |
 | Cloudflare | `https://embed.videodelivery.net` | `https://iframe.videodelivery.net` or your `https://customer-<code>.cloudflarestream.com` origin |
 | Google Cast | `https://www.gstatic.com` | — |
 | Wistia | `https://fast.wistia.com` and `https://fast.wistia.net` | `https://fast.wistia.com` and `https://fast.wistia.net` if the SDK falls back to an iframe |

package/docs/guides/customize-skins.md

@@ -2,7 +2,9 @@
 
 Style a packaged Video.js skin or add its source to change controls, layout, styles, and interactions
 
-Start with the path that matches the change you want:
+Pick the skin closest to the design you want first. To apply your brand to a finished design, the Neutral skin is the usual starting point. To build your own design, start from the Scaffold skin. See [Choose a skin](./skins.md#choose-a-skin).
+
+Then start with the path that matches the change you want:
 
 | If you want to… | Use this path |
 | --- | --- |
@@ -29,6 +31,7 @@ Packaged skins expose [CSS custom properties](https://developer.mozilla.org/en-U
 | `--media-accent-text-color` | Text and icons shown on the accent color | [`<color>`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) | `black` |
 | `--media-border-color` | The hairline around the player | [`<color>`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) | `transparent` |
 | `--media-border-radius` | The player corner radius | A valid [border-radius value](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/border-radius#values) | `1rem` |
+| `--media-controls-before-start` | Whether the video skins show their controls before playback starts | `hidden` (default) or `visible` | `visible` |
 | `--media-font-family` | The player interface font stack | A valid [font-family value](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-family) | `Roboto, sans-serif` |
 | `--media-object-fit` | How the media and poster fill the player | A valid [object-fit value](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/object-fit) | `cover` |
 | `--media-object-position` | Where the media and poster sit when they do not fill the player | A valid [object-position value](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/object-position) | `top` |
@@ -36,7 +39,9 @@ Packaged skins expose [CSS custom properties](https://developer.mozilla.org/en-U
 
 If you omit `--media-accent-text-color`, the skins choose a contrasting text color from `--media-accent-color` using [`contrast-color()`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/contrast-color). Browsers before Chrome 147, Firefox 146, and Safari 26 lack `contrast-color()` and use the theme’s default text color instead, which suits only the default accent, so set both properties together if you support those browsers.
 
-The skins use [`Inter`](https://rsms.me/inter/) when your page loads it and fall back to the system UI font. Video.js does not load the webfont for you. Set `--media-font-family` to use another font.
+The skins use [`Inter`](https://rsms.me/inter/) when your page loads it and fall back to the system UI font. Video.js does not load the webfont for you. Set `--media-font-family` to use another font. The Scaffold skin inherits your page’s font instead, and it has no hairline, so `--media-border-color` doesn’t change it.
+
+Before playback starts, the video and live video skins show only the large center play button. The controls appear once playback starts or the media begins to autoplay. Set `--media-controls-before-start: visible` to show the controls from the start, for example so viewers can pick captions or quality before they press play.
 
 The media component and poster share `--media-object-fit` and `--media-object-position`, so a `cover` poster stays aligned with `cover` video. See [Add a poster and loading placeholder](./poster.md).
 

package/docs/guides/features.md

@@ -74,7 +74,7 @@ if (media?.paused) media.play();
 
 ## Feature availability
 
-Volume, fullscreen, and picture-in-picture expose availability properties because platform support varies. Volume has two independent properties: `volumeAvailability` for changing the volume level and `mutedAvailability` for toggling mute. For example, iOS Safari allows muting but doesn’t allow programmatic volume control.
+Volume, playback rate, fullscreen, and picture-in-picture expose availability properties because platform and media support varies. Volume has two independent properties: `volumeAvailability` for changing the volume level and `mutedAvailability` for toggling mute. For example, iOS Safari allows muting but doesn’t allow programmatic volume control.
 
 | Value | Meaning |
 | --- | --- |