@videojs/html 10.3.0 → 10.4.0

package/dist/dev/ui/controls/element.js

@@ -3,13 +3,13 @@ import { PlayerController } from "../../player/controller.js";
 import { UIElement } from "../ui-element.js";
 import { controlsContext } from "./context.js";
 import { ControlsCore, ControlsDataAttrs, POPUP_HOST_SELECTOR } from "@videojs/core";
-import { applyStateDataAttrs, logMissingFeature, selectControls } from "@videojs/core/dom";
+import { applyStateDataAttrs, logMissingFeature, selectControls, selectPlayback } from "@videojs/core/dom";
 import { ContextProvider } from "@videojs/element/context";
 import { isFunction } from "@videojs/utils/predicate";
 //#region src/ui/controls/element.ts
 /**
-* Tracks controls visibility, reflects it as data attributes, and shares it with its descendant controls parts. Hiding
-* the controls closes any popup open inside it.
+* Tracks controls visibility and whether playback has started, reflects them as data attributes, and shares them with
+* its descendant controls parts. Hiding the controls closes any popup open inside it.
 */
 var ControlsElement = class extends UIElement {
 	constructor(..._args) {
@@ -17,6 +17,7 @@ var ControlsElement = class extends UIElement {
 		this.visibility = ControlsCore.defaultProps.visibility;
 		this.#core = new ControlsCore();
 		this.#mediaState = new PlayerController(this, playerContext, selectControls);
+		this.#playback = new PlayerController(this, playerContext, selectPlayback);
 		this.#provider = new ContextProvider(this, { context: controlsContext });
 		this.#visible = true;
 	}
@@ -28,6 +29,7 @@ var ControlsElement = class extends UIElement {
 	}
 	#core;
 	#mediaState;
+	#playback;
 	#provider;
 	#visible;
 	connectedCallback() {
@@ -38,6 +40,7 @@ var ControlsElement = class extends UIElement {
 		super.update(_changed);
 		this.#core.setProps({ visibility: this.visibility });
 		this.#core.setMedia(this.#mediaState.value ?? null);
+		this.#core.setPlayback(this.#playback.value ?? null);
 		const state = this.#core.getState();
 		if (!state) return;
 		applyStateDataAttrs(this, state, ControlsDataAttrs);

package/dist/dev/ui/controls/element.js.map

@@ -1 +1 @@
-{"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/controls/element.ts"],"sourcesContent":["import { ControlsCore, ControlsDataAttrs, type ControlsVisibility, POPUP_HOST_SELECTOR } from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectControls } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\nimport { isFunction } from '@videojs/utils/predicate';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { UIElement } from '../ui-element';\nimport { controlsContext } from './context';\n\n/**\n * Tracks controls visibility, reflects it as data attributes, and shares it with its descendant controls parts. Hiding\n * the controls closes any popup open inside it.\n */\nexport class ControlsElement extends UIElement {\n  static readonly tagName = 'media-controls';\n\n  static override properties = {\n    visibility: { type: String },\n  } satisfies PropertyDeclarationMap<'visibility'>;\n\n  visibility: ControlsVisibility = ControlsCore.defaultProps.visibility;\n\n  readonly #core = new ControlsCore();\n  readonly #mediaState = new PlayerController(this, playerContext, selectControls);\n  readonly #provider = new ContextProvider(this, { context: controlsContext });\n  #visible = true;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (__DEV__ && this.visibility === 'auto' && !this.#mediaState.value && this.#mediaState.displayName) {\n      logMissingFeature(this.localName, this.#mediaState.displayName);\n    }\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    this.#core.setProps({ visibility: this.visibility });\n    this.#core.setMedia(this.#mediaState.value ?? null);\n\n    const state = this.#core.getState();\n    if (!state) return;\n\n    applyStateDataAttrs(this, state, ControlsDataAttrs);\n\n    this.#provider.setValue({\n      state,\n      stateAttrMap: ControlsDataAttrs,\n    });\n\n    const wasVisible = this.#visible;\n\n    this.#visible = state.visible;\n\n    if (wasVisible && !state.visible) {\n      this.#closeOwnedOverlays();\n    }\n  }\n\n  #closeOwnedOverlays(): void {\n    for (const element of this.querySelectorAll(POPUP_HOST_SELECTOR)) {\n      const host = element as Element & { close?: unknown };\n      if (!isFunction(host.close)) continue;\n\n      host.close('imperative-action');\n    }\n  }\n}\n"],"mappings":";;;;;;;;;;;;;AAeA,IAAa,kBAAb,cAAqC,UAAU;;;EAOZ,KAAA,aAAA,aAAa,aAAa;EAE1C,KAAA,QAAA,IAAI,aAAa;EACX,KAAA,cAAA,IAAI,iBAAiB,MAAM,eAAe,cAAc;EAC1D,KAAA,YAAA,IAAI,gBAAgB,MAAM,EAAE,SAAS,gBAAgB,CAAC;EAChE,KAAA,WAAA;;;EAXe,KAAA,UAAA;;;EAEG,KAAA,aAAA,EAC3B,YAAY,EAAE,MAAM,OAAO,EAC7B;;CAIA;CACA;CACA;CACA;CAEA,oBAAmC;EACjC,MAAM,kBAAkB;EAExB,IAAe,KAAK,eAAe,UAAU,CAAC,KAAK,YAAY,SAAS,KAAK,YAAY,aACvF,kBAAkB,KAAK,WAAW,KAAK,YAAY,WAAW;CAElE;CAEA,OAA0B,UAAgC;EACxD,MAAM,OAAO,QAAQ;EAErB,KAAK,MAAM,SAAS,EAAE,YAAY,KAAK,WAAW,CAAC;EACnD,KAAK,MAAM,SAAS,KAAK,YAAY,SAAS,IAAI;EAElD,MAAM,QAAQ,KAAK,MAAM,SAAS;EAClC,IAAI,CAAC,OAAO;EAEZ,oBAAoB,MAAM,OAAO,iBAAiB;EAElD,KAAK,UAAU,SAAS;GACtB;GACA,cAAc;EAChB,CAAC;EAED,MAAM,aAAa,KAAK;EAExB,KAAK,WAAW,MAAM;EAEtB,IAAI,cAAc,CAAC,MAAM,SACvB,KAAK,oBAAoB;CAE7B;CAEA,sBAA4B;EAC1B,KAAK,MAAM,WAAW,KAAK,iBAAiB,mBAAmB,GAAG;GAChE,MAAM,OAAO;GACb,IAAI,CAAC,WAAW,KAAK,KAAK,GAAG;GAE7B,KAAK,MAAM,mBAAmB;EAChC;CACF;AACF"}
+{"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/controls/element.ts"],"sourcesContent":["import { ControlsCore, ControlsDataAttrs, type ControlsVisibility, POPUP_HOST_SELECTOR } from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectControls, selectPlayback } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\nimport { isFunction } from '@videojs/utils/predicate';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { UIElement } from '../ui-element';\nimport { controlsContext } from './context';\n\n/**\n * Tracks controls visibility and whether playback has started, reflects them as data attributes, and shares them with\n * its descendant controls parts. Hiding the controls closes any popup open inside it.\n */\nexport class ControlsElement extends UIElement {\n  static readonly tagName = 'media-controls';\n\n  static override properties = {\n    visibility: { type: String },\n  } satisfies PropertyDeclarationMap<'visibility'>;\n\n  visibility: ControlsVisibility = ControlsCore.defaultProps.visibility;\n\n  readonly #core = new ControlsCore();\n  readonly #mediaState = new PlayerController(this, playerContext, selectControls);\n  readonly #playback = new PlayerController(this, playerContext, selectPlayback);\n  readonly #provider = new ContextProvider(this, { context: controlsContext });\n  #visible = true;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (__DEV__ && this.visibility === 'auto' && !this.#mediaState.value && this.#mediaState.displayName) {\n      logMissingFeature(this.localName, this.#mediaState.displayName);\n    }\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    this.#core.setProps({ visibility: this.visibility });\n    this.#core.setMedia(this.#mediaState.value ?? null);\n    this.#core.setPlayback(this.#playback.value ?? null);\n\n    const state = this.#core.getState();\n    if (!state) return;\n\n    applyStateDataAttrs(this, state, ControlsDataAttrs);\n\n    this.#provider.setValue({\n      state,\n      stateAttrMap: ControlsDataAttrs,\n    });\n\n    const wasVisible = this.#visible;\n\n    this.#visible = state.visible;\n\n    if (wasVisible && !state.visible) {\n      this.#closeOwnedOverlays();\n    }\n  }\n\n  #closeOwnedOverlays(): void {\n    for (const element of this.querySelectorAll(POPUP_HOST_SELECTOR)) {\n      const host = element as Element & { close?: unknown };\n      if (!isFunction(host.close)) continue;\n\n      host.close('imperative-action');\n    }\n  }\n}\n"],"mappings":";;;;;;;;;;;;;AAeA,IAAa,kBAAb,cAAqC,UAAU;;;EAOZ,KAAA,aAAA,aAAa,aAAa;EAE1C,KAAA,QAAA,IAAI,aAAa;EACX,KAAA,cAAA,IAAI,iBAAiB,MAAM,eAAe,cAAc;EAC1D,KAAA,YAAA,IAAI,iBAAiB,MAAM,eAAe,cAAc;EACxD,KAAA,YAAA,IAAI,gBAAgB,MAAM,EAAE,SAAS,gBAAgB,CAAC;EAChE,KAAA,WAAA;;;EAZe,KAAA,UAAA;;;EAEG,KAAA,aAAA,EAC3B,YAAY,EAAE,MAAM,OAAO,EAC7B;;CAIA;CACA;CACA;CACA;CACA;CAEA,oBAAmC;EACjC,MAAM,kBAAkB;EAExB,IAAe,KAAK,eAAe,UAAU,CAAC,KAAK,YAAY,SAAS,KAAK,YAAY,aACvF,kBAAkB,KAAK,WAAW,KAAK,YAAY,WAAW;CAElE;CAEA,OAA0B,UAAgC;EACxD,MAAM,OAAO,QAAQ;EAErB,KAAK,MAAM,SAAS,EAAE,YAAY,KAAK,WAAW,CAAC;EACnD,KAAK,MAAM,SAAS,KAAK,YAAY,SAAS,IAAI;EAClD,KAAK,MAAM,YAAY,KAAK,UAAU,SAAS,IAAI;EAEnD,MAAM,QAAQ,KAAK,MAAM,SAAS;EAClC,IAAI,CAAC,OAAO;EAEZ,oBAAoB,MAAM,OAAO,iBAAiB;EAElD,KAAK,UAAU,SAAS;GACtB;GACA,cAAc;EAChB,CAAC;EAED,MAAM,aAAa,KAAK;EAExB,KAAK,WAAW,MAAM;EAEtB,IAAI,cAAc,CAAC,MAAM,SACvB,KAAK,oBAAoB;CAE7B;CAEA,sBAA4B;EAC1B,KAAK,MAAM,WAAW,KAAK,iBAAiB,mBAAmB,GAAG;GAChE,MAAM,OAAO;GACb,IAAI,CAAC,WAAW,KAAK,KAAK,GAAG;GAE7B,KAAK,MAAM,mBAAmB;EAChC;CACF;AACF"}

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.3.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.3.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

@@ -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,25 +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.
 
-These versions apply to every skin. The [Compat and Scaffold skins](./skins.md#choose-a-skin) avoid newer visual effects such as backdrop blur, anchor-positioned menu highlights, and squircle corners, so they look the same in browsers that skip them. They still need the CSS features below.
+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.
 
@@ -40,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/cdn.md

@@ -37,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.3.0/video-player.js"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.3.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.
@@ -48,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.3.0/video.js"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.3.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.
@@ -59,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.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>
+<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.
@@ -71,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.3.0/locales/es.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.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/customize-skins.md

@@ -31,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` |
@@ -40,6 +41,8 @@ If you omit `--media-accent-text-color`, the skins choose a contrasting text col
 
 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).
 
 ### Set the color scheme

package/docs/guides/installation-cdn.md

@@ -89,7 +89,7 @@ Defaulted options: project, preset, skin, source-url, media, extensions, templat
 ## Reproduce or change these instructions
 
 ```sh
-npx @videojs/cli@10.3.0 agents init --method cdn --framework html --project existing --preset video --skin default --media html5-video --extensions none --source-url https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4 --template none
+npx @videojs/cli@10.4.0 agents init --method cdn --framework html --project existing --preset video --skin default --media html5-video --extensions none --source-url https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4 --template none
 ```
 
 ## Load Video.js
@@ -101,7 +101,7 @@ Add these module scripts to the page head. Module scripts are deferred, so they
 _Merge this into the page `<head>`._
 
 ```html
-<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.4.0/video.js"></script>
 ```
 
 ## Add your player

package/docs/guides/installation-shadcn.md

@@ -94,7 +94,7 @@ Defaulted options: project, preset, skin, source-url, media, extensions, templat
 ## Reproduce or change these instructions
 
 ```sh
-npx @videojs/cli@10.3.0 agents init --method shadcn --framework html --project existing --preset video --skin default --media html5-video --extensions none --source-url https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4 --package-manager pnpm --template vite --styling css
+npx @videojs/cli@10.4.0 agents init --method shadcn --framework html --project existing --preset video --skin default --media html5-video --extensions none --source-url https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4 --package-manager pnpm --template vite --styling css
 ```
 
 ## Configure app aliases

package/docs/guides/installation-svelte.md

@@ -90,13 +90,13 @@ Defaulted options: project, preset, skin, source-url, media, extensions, templat
 ## Reproduce or change these instructions
 
 ```sh
-npx @videojs/cli@10.3.0 agents init --method packaged --framework svelte --project existing --preset video --skin default --media html5-video --extensions none --source-url https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4 --package-manager pnpm --template vite
+npx @videojs/cli@10.4.0 agents init --method packaged --framework svelte --project existing --preset video --skin default --media html5-video --extensions none --source-url https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4 --package-manager pnpm --template vite
 ```
 
 ## Install the packages
 
 ```bash
-pnpm add @videojs/html@10.3.0
+pnpm add @videojs/html@10.4.0
 ```
 
 ## Add your player

package/docs/guides/installation-vue.md

@@ -90,13 +90,13 @@ Defaulted options: project, preset, skin, source-url, media, extensions, templat
 ## Reproduce or change these instructions
 
 ```sh
-npx @videojs/cli@10.3.0 agents init --method packaged --framework vue --project existing --preset video --skin default --media html5-video --extensions none --source-url https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4 --package-manager pnpm --template vite
+npx @videojs/cli@10.4.0 agents init --method packaged --framework vue --project existing --preset video --skin default --media html5-video --extensions none --source-url https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4 --package-manager pnpm --template vite
 ```
 
 ## Install the packages
 
 ```bash
-pnpm add @videojs/html@10.3.0
+pnpm add @videojs/html@10.4.0
 ```
 
 ## Register custom elements

package/docs/guides/installation.md

@@ -92,13 +92,13 @@ Defaulted options: project, preset, skin, source-url, media, extensions, templat
 ## Reproduce or change these instructions
 
 ```sh
-npx @videojs/cli@10.3.0 agents init --method packaged --framework html --project existing --preset video --skin default --media html5-video --extensions none --source-url https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4 --package-manager pnpm --template vite
+npx @videojs/cli@10.4.0 agents init --method packaged --framework html --project existing --preset video --skin default --media html5-video --extensions none --source-url https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4 --package-manager pnpm --template vite
 ```
 
 ## Install the packages
 
 ```bash
-pnpm add @videojs/html@10.3.0
+pnpm add @videojs/html@10.4.0
 ```
 
 ## Add your player

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.3.0/locales/es.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.4.0/locales/es.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.4.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.3.0/locales/es.js';
-import { registerI18n } from 'https://cdn.jsdelivr.net/npm/@videojs/cdn@10.3.0/i18n.js';
+import 'https://cdn.jsdelivr.net/npm/@videojs/cdn@10.4.0/locales/es.js';
+import { registerI18n } from 'https://cdn.jsdelivr.net/npm/@videojs/cdn@10.4.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.3.0/video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.4.0/video.js"></script>
 ```
 
 ### Switch locale at runtime

package/docs/guides/keyboard-shortcuts.md

@@ -73,6 +73,16 @@ How the container splits into regions depends on which regions you bind for the
 
 For a packaged skin, [add the skin source to your project](./customize-skins.md#style-skin-source) and edit its `<media-hotkey>` declarations. Adding another binding alongside the packaged skin does not replace its bindings. For a custom UI, edit your own `<media-hotkey>` set directly.
 
+### Tap to play on touch
+
+The packaged skins toggle controls on a touch tap, and the center play button starts playback. To play and pause with a tap anywhere on the video instead, bind `togglePaused` in place of `toggleControls` for touch:
+
+```html
+<media-gesture type="tap" action="togglePaused" pointer="touch"></media-gesture>
+```
+
+A tap then pauses playback as well, and taps no longer show or hide the controls.
+
 ### Seek step size
 
 Set the `seekStep` distance with `value`. Match it to your content: 5 seconds for short clips, 15 or 30 seconds for long-form video.