@videojs/html 10.3.0 → 10.4.0

package/dist/dev/media/background-video/adapter.d.ts

@@ -1,20 +1,14 @@
-import { getTemplateHTML } from "./template.js";
+import { BackgroundVideoBase } from "./base.js";
 import { Media } from "@videojs/media/dom";
 //#region src/media/background-video/adapter.d.ts
-declare const BackgroundVideo_base: {
-  new (): HTMLElement;
-  prototype: HTMLElement;
-};
-export declare class BackgroundVideo extends BackgroundVideo_base {
-  static shadowRootOptions: {
-    mode: ShadowRootMode;
-  };
-  static getTemplateHTML: typeof getTemplateHTML;
-  static get observedAttributes(): string[];
+export declare class BackgroundVideo extends BackgroundVideoBase {
   constructor();
   getMediaTarget(): Media | null;
-  attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string | null): void;
-  get target(): HTMLVideoElement | null;
+  /** URL of a video the browser can play directly. Assigning a new one restarts playback. */
+  get src(): string;
+  set src(value: string);
+  /** The inner video's `MediaError`, or `null`. */
+  get error(): MediaError | null;
 }
 //#endregion
 //# sourceMappingURL=adapter.d.ts.map

package/dist/dev/media/background-video/adapter.js

@@ -1,46 +1,24 @@
-import { MediaAttachMixin } from "../../store/media-attach-mixin.js";
-import { getTemplateHTML } from "./template.js";
-import { namedNodeMapToObject } from "@videojs/utils/dom";
+import { BackgroundVideoBase } from "./base.js";
 //#region src/media/background-video/adapter.ts
-const HTMLElementBase = globalThis.HTMLElement ?? class {};
-var BackgroundVideo = class extends MediaAttachMixin(HTMLElementBase) {
-	static {
-		this.shadowRootOptions = { mode: "open" };
-	}
-	static {
-		this.getTemplateHTML = getTemplateHTML;
-	}
-	static get observedAttributes() {
-		return ["src"];
-	}
+var BackgroundVideo = class extends BackgroundVideoBase {
 	constructor() {
 		super();
-		if (!this.shadowRoot) {
-			this.attachShadow(this.constructor.shadowRootOptions);
-			const attrs = {
-				...namedNodeMapToObject(this.attributes),
-				...!this.hasAttribute("nomuted") && { muted: "" },
-				...!this.hasAttribute("noloop") && { loop: "" },
-				...!this.hasAttribute("noautoplay") && { autoplay: "" },
-				playsinline: "",
-				disableremoteplayback: "",
-				disablepictureinpicture: ""
-			};
-			this.shadowRoot.innerHTML = getTemplateHTML(attrs);
-		}
-		this.target.muted = !this.hasAttribute("nomuted");
+		this.target?.addEventListener("error", () => this.dispatchEvent(new Event("error")));
 	}
 	getMediaTarget() {
 		return this.target;
 	}
-	attributeChangedCallback(attrName, oldValue, newValue) {
-		if (attrName === "src" && oldValue !== newValue) this.target.src = newValue ?? "";
+	/** URL of a video the browser can play directly. Assigning a new one restarts playback. */
+	get src() {
+		return this.target?.src ?? "";
+	}
+	set src(value) {
+		const target = this.target;
+		if (target) target.src = value;
 	}
-	get target() {
-		const slotted = this.querySelector(":scope > [slot=media]");
-		if (slotted instanceof HTMLVideoElement) return slotted;
-		const video = this.querySelector("video") ?? this.shadowRoot?.querySelector("video");
-		return video instanceof HTMLVideoElement ? video : null;
+	/** The inner video's `MediaError`, or `null`. */
+	get error() {
+		return this.target?.error ?? null;
 	}
 };
 //#endregion

package/dist/dev/media/background-video/adapter.js.map

@@ -1 +1 @@
-{"version":3,"file":"adapter.js","names":[],"sources":["../../../../src/media/background-video/adapter.ts"],"sourcesContent":["import type { Media } from '@videojs/media/dom';\nimport { namedNodeMapToObject } from '@videojs/utils/dom';\n\nimport { MediaAttachMixin } from '../../store/media-attach-mixin';\nimport { getTemplateHTML } from './template';\n\nconst HTMLElementBase = globalThis.HTMLElement ?? class {};\n\n// Don't extend CustomMediaMixin to save some bytes, background videos don't need the full Media API.\nexport class BackgroundVideo extends MediaAttachMixin(HTMLElementBase) {\n  static shadowRootOptions = { mode: 'open' as ShadowRootMode };\n  static getTemplateHTML = getTemplateHTML;\n  static get observedAttributes() {\n    return ['src'];\n  }\n\n  constructor() {\n    super();\n\n    if (!this.shadowRoot) {\n      this.attachShadow((this.constructor as typeof BackgroundVideo).shadowRootOptions);\n\n      const attrs = {\n        ...namedNodeMapToObject(this.attributes),\n        ...(!this.hasAttribute('nomuted') && { muted: '' }),\n        ...(!this.hasAttribute('noloop') && { loop: '' }),\n        ...(!this.hasAttribute('noautoplay') && { autoplay: '' }),\n        playsinline: '',\n        disableremoteplayback: '',\n        disablepictureinpicture: '',\n      };\n\n      this.shadowRoot!.innerHTML = getTemplateHTML(attrs);\n    }\n\n    // Neither Chrome or Firefox support setting the muted attribute\n    // after using document.createElement.\n    // Get around this by setting the muted property manually.\n    this.target!.muted = !this.hasAttribute('nomuted');\n  }\n\n  // Register the inner <video> (not `this`) with the provider.\n  getMediaTarget(): Media | null {\n    return this.target;\n  }\n\n  attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string | null): void {\n    if (attrName === 'src' && oldValue !== newValue) {\n      this.target!.src = newValue ?? '';\n    }\n  }\n\n  get target(): HTMLVideoElement | null {\n    const slotted = this.querySelector(':scope > [slot=media]');\n    if (slotted instanceof HTMLVideoElement) return slotted;\n\n    const video = this.querySelector('video') ?? this.shadowRoot?.querySelector('video');\n\n    return video instanceof HTMLVideoElement ? video : null;\n  }\n}\n"],"mappings":";;;;AAMA,MAAM,kBAAkB,WAAW,eAAe,MAAM,CAAC;AAGzD,IAAa,kBAAb,cAAqC,iBAAiB,eAAe,CAAC,CAAC;;EAC1C,KAAA,oBAAA,EAAE,MAAM,OAAyB;;;EACnC,KAAA,kBAAA;;CACzB,WAAW,qBAAqB;EAC9B,OAAO,CAAC,KAAK;CACf;CAEA,cAAc;EACZ,MAAM;EAEN,IAAI,CAAC,KAAK,YAAY;GACpB,KAAK,aAAc,KAAK,YAAuC,iBAAiB;GAEhF,MAAM,QAAQ;IACZ,GAAG,qBAAqB,KAAK,UAAU;IACvC,GAAI,CAAC,KAAK,aAAa,SAAS,KAAK,EAAE,OAAO,GAAG;IACjD,GAAI,CAAC,KAAK,aAAa,QAAQ,KAAK,EAAE,MAAM,GAAG;IAC/C,GAAI,CAAC,KAAK,aAAa,YAAY,KAAK,EAAE,UAAU,GAAG;IACvD,aAAa;IACb,uBAAuB;IACvB,yBAAyB;GAC3B;GAEA,KAAK,WAAY,YAAY,gBAAgB,KAAK;EACpD;EAKA,KAAK,OAAQ,QAAQ,CAAC,KAAK,aAAa,SAAS;CACnD;CAGA,iBAA+B;EAC7B,OAAO,KAAK;CACd;CAEA,yBAAyB,UAAkB,UAAyB,UAA+B;EACjG,IAAI,aAAa,SAAS,aAAa,UACrC,KAAK,OAAQ,MAAM,YAAY;CAEnC;CAEA,IAAI,SAAkC;EACpC,MAAM,UAAU,KAAK,cAAc,uBAAuB;EAC1D,IAAI,mBAAmB,kBAAkB,OAAO;EAEhD,MAAM,QAAQ,KAAK,cAAc,OAAO,KAAK,KAAK,YAAY,cAAc,OAAO;EAEnF,OAAO,iBAAiB,mBAAmB,QAAQ;CACrD;AACF"}
+{"version":3,"file":"adapter.js","names":[],"sources":["../../../../src/media/background-video/adapter.ts"],"sourcesContent":["import type { Media } from '@videojs/media/dom';\n\nimport { BackgroundVideoBase } from './base';\n\n// Don't extend CustomMediaMixin to save some bytes, background videos don't need the full Media API.\nexport class BackgroundVideo extends BackgroundVideoBase {\n  constructor() {\n    super();\n\n    // `error` doesn't cross the shadow boundary, so re-fire it from the host,\n    // matching `<hls-background-video>`.\n    this.target?.addEventListener('error', () => this.dispatchEvent(new Event('error')));\n  }\n\n  // Register the inner <video> (not `this`) with the provider.\n  getMediaTarget(): Media | null {\n    return this.target;\n  }\n\n  /** URL of a video the browser can play directly. Assigning a new one restarts playback. */\n  override get src(): string {\n    return this.target?.src ?? '';\n  }\n\n  override set src(value: string) {\n    const target = this.target;\n\n    if (target) target.src = value;\n  }\n\n  /** The inner video's `MediaError`, or `null`. */\n  get error(): MediaError | null {\n    return this.target?.error ?? null;\n  }\n}\n"],"mappings":";;AAKA,IAAa,kBAAb,cAAqC,oBAAoB;CACvD,cAAc;EACZ,MAAM;EAIN,KAAK,QAAQ,iBAAiB,eAAe,KAAK,cAAc,IAAI,MAAM,OAAO,CAAC,CAAC;CACrF;CAGA,iBAA+B;EAC7B,OAAO,KAAK;CACd;;CAGA,IAAa,MAAc;EACzB,OAAO,KAAK,QAAQ,OAAO;CAC7B;CAEA,IAAa,IAAI,OAAe;EAC9B,MAAM,SAAS,KAAK;EAEpB,IAAI,QAAQ,OAAO,MAAM;CAC3B;;CAGA,IAAI,QAA2B;EAC7B,OAAO,KAAK,QAAQ,SAAS;CAC/B;AACF"}

package/dist/dev/media/background-video/base.d.ts

@@ -0,0 +1,44 @@
+import { getTemplateHTML } from "./template.js";
+//#region src/media/background-video/base.d.ts
+interface LifecycleElement extends HTMLElement {
+  connectedCallback?(): void;
+  disconnectedCallback?(): void;
+  adoptedCallback?(): void;
+  attributeChangedCallback?(name: string, oldValue: string | null, newValue: string | null): void;
+}
+declare const MediaAttachBase: new () => LifecycleElement;
+declare const PLAYBACK_DEFAULTS: readonly ['muted', 'loop', 'autoplay'];
+/** A playback default an element can let authors turn off with a `no*` attribute. */
+export type BackgroundVideoOptOut = (typeof PLAYBACK_DEFAULTS)[number];
+/**
+ * The shadow setup, `src` wiring, and `target` that `<background-video>` and `<hls-background-video>` share. Each
+ * subclass supplies its own `src` and declares which playback defaults authors may opt out of.
+ *
+ * @internal
+ */
+export declare abstract class BackgroundVideoBase extends MediaAttachBase {
+  #private;
+  static shadowRootOptions: {
+    mode: ShadowRootMode;
+  };
+  static getTemplateHTML: typeof getTemplateHTML;
+  /** Defaults that a matching `no*` attribute turns off. Every other default is fixed on. */
+  static optOuts: readonly BackgroundVideoOptOut[];
+  /** Host attributes copied onto the inner video at creation and mirrored as they change. */
+  static passthroughAttributes: readonly string[];
+  static get observedAttributes(): string[];
+  constructor();
+  /**
+   * Writes muted, loop, and autoplay onto the inner video as properties. The template's attributes only cover markup
+   * parsed with its attributes in place; an element created by script gets its `no*` attributes afterwards, and neither
+   * Chrome nor Firefox honor a `muted` attribute set after `document.createElement`.
+   */
+  protected syncPlaybackDefaults(): void;
+  abstract get src(): string;
+  abstract set src(value: string);
+  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+  /** The inner `<video>` in the shadow root: what plays, and what `play()` / `pause()` belong on. */
+  get target(): HTMLVideoElement | null;
+}
+//#endregion
+//# sourceMappingURL=base.d.ts.map

package/dist/dev/media/background-video/base.js

@@ -0,0 +1,97 @@
+import { MediaAttachMixin } from "../../store/media-attach-mixin.js";
+import { getTemplateHTML, getTemplateVideo } from "./template.js";
+import { namedNodeMapToObject } from "@videojs/utils/dom";
+import { pick } from "@videojs/utils/object";
+//#region src/media/background-video/base.ts
+const HTMLElementBase = globalThis.HTMLElement ?? class {};
+const MediaAttachBase = MediaAttachMixin(HTMLElementBase);
+const PLAYBACK_DEFAULTS = [
+	"muted",
+	"loop",
+	"autoplay"
+];
+/**
+* The shadow setup, `src` wiring, and `target` that `<background-video>` and `<hls-background-video>` share. Each
+* subclass supplies its own `src` and declares which playback defaults authors may opt out of.
+*
+* @internal
+*/
+var BackgroundVideoBase = class extends MediaAttachBase {
+	static {
+		this.shadowRootOptions = { mode: "open" };
+	}
+	static {
+		this.getTemplateHTML = getTemplateHTML;
+	}
+	static {
+		this.optOuts = [
+			"muted",
+			"loop",
+			"autoplay"
+		];
+	}
+	static {
+		this.passthroughAttributes = [
+			"controls",
+			"controlslist",
+			"crossorigin",
+			"preload"
+		];
+	}
+	static get observedAttributes() {
+		return [
+			"src",
+			...this.optOuts,
+			...this.optOuts.map((name) => `no${name}`),
+			...this.passthroughAttributes
+		];
+	}
+	constructor() {
+		super();
+		const ctor = this.constructor;
+		if (!this.shadowRoot) {
+			const attrs = {
+				...pick(namedNodeMapToObject(this.attributes), ctor.passthroughAttributes),
+				playsinline: "",
+				disableremoteplayback: "",
+				disablepictureinpicture: ""
+			};
+			for (const name of PLAYBACK_DEFAULTS) if (this.#isDefaultOn(name)) attrs[name] = "";
+			this.attachShadow(ctor.shadowRootOptions);
+			this.shadowRoot.innerHTML = ctor.getTemplateHTML(attrs);
+		}
+		this.syncPlaybackDefaults();
+	}
+	/**
+	* Writes muted, loop, and autoplay onto the inner video as properties. The template's attributes only cover markup
+	* parsed with its attributes in place; an element created by script gets its `no*` attributes afterwards, and neither
+	* Chrome nor Firefox honor a `muted` attribute set after `document.createElement`.
+	*/
+	syncPlaybackDefaults() {
+		const target = this.target;
+		if (!target) return;
+		for (const name of PLAYBACK_DEFAULTS) target[name] = this.#isDefaultOn(name);
+	}
+	/** On unless its `no*` attribute is set and allowed; an explicit attribute such as `muted` wins over its opt-out. */
+	#isDefaultOn(name) {
+		const { optOuts } = this.constructor;
+		return this.hasAttribute(name) || !optOuts.includes(name) || !this.hasAttribute(`no${name}`);
+	}
+	attributeChangedCallback(name, oldValue, newValue) {
+		if (oldValue === newValue) return;
+		const { passthroughAttributes } = this.constructor;
+		if (name === "src") this.src = newValue ?? "";
+		else if (passthroughAttributes.includes(name)) {
+			if (newValue === null) this.target?.removeAttribute(name);
+			else this.target?.setAttribute(name, newValue);
+		} else this.syncPlaybackDefaults();
+	}
+	/** The inner `<video>` in the shadow root: what plays, and what `play()` / `pause()` belong on. */
+	get target() {
+		return getTemplateVideo(this.shadowRoot);
+	}
+};
+//#endregion
+export { BackgroundVideoBase };
+
+//# sourceMappingURL=base.js.map

package/dist/dev/media/background-video/base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.js","names":[],"sources":["../../../../src/media/background-video/base.ts"],"sourcesContent":["import { namedNodeMapToObject } from '@videojs/utils/dom';\nimport { pick } from '@videojs/utils/object';\n\nimport { MediaAttachMixin } from '../../store/media-attach-mixin';\nimport { getTemplateHTML, getTemplateVideo } from './template';\n\nconst HTMLElementBase = globalThis.HTMLElement ?? class {};\n\n// `MediaAttachMixin` is typed as returning its base, so its lifecycle callbacks\n// aren't visible for `super` to reach. Method syntax lets subclasses override them.\ninterface LifecycleElement extends HTMLElement {\n  connectedCallback?(): void;\n  disconnectedCallback?(): void;\n  adoptedCallback?(): void;\n  attributeChangedCallback?(name: string, oldValue: string | null, newValue: string | null): void;\n}\n\nconst MediaAttachBase = MediaAttachMixin(HTMLElementBase) as unknown as new () => LifecycleElement;\n\nconst PLAYBACK_DEFAULTS = ['muted', 'loop', 'autoplay'] as const;\n\n/** A playback default an element can let authors turn off with a `no*` attribute. */\nexport type BackgroundVideoOptOut = (typeof PLAYBACK_DEFAULTS)[number];\n\n/**\n * The shadow setup, `src` wiring, and `target` that `<background-video>` and `<hls-background-video>` share. Each\n * subclass supplies its own `src` and declares which playback defaults authors may opt out of.\n *\n * @internal\n */\nexport abstract class BackgroundVideoBase extends MediaAttachBase {\n  static shadowRootOptions = { mode: 'open' as ShadowRootMode };\n  static getTemplateHTML = getTemplateHTML;\n  /** Defaults that a matching `no*` attribute turns off. Every other default is fixed on. */\n  static optOuts: readonly BackgroundVideoOptOut[] = ['muted', 'loop', 'autoplay'];\n  /** Host attributes copied onto the inner video at creation and mirrored as they change. */\n  static passthroughAttributes: readonly string[] = ['controls', 'controlslist', 'crossorigin', 'preload'];\n\n  static get observedAttributes(): string[] {\n    return ['src', ...this.optOuts, ...this.optOuts.map((name) => `no${name}`), ...this.passthroughAttributes];\n  }\n\n  constructor() {\n    super();\n\n    const ctor = this.constructor as typeof BackgroundVideoBase;\n\n    if (!this.shadowRoot) {\n      const attrs: Record<string, string> = {\n        ...pick(namedNodeMapToObject(this.attributes), ctor.passthroughAttributes),\n        playsinline: '',\n        disableremoteplayback: '',\n        disablepictureinpicture: '',\n      };\n\n      for (const name of PLAYBACK_DEFAULTS) {\n        if (this.#isDefaultOn(name)) attrs[name] = '';\n      }\n\n      this.attachShadow(ctor.shadowRootOptions);\n      this.shadowRoot!.innerHTML = ctor.getTemplateHTML(attrs);\n    }\n\n    this.syncPlaybackDefaults();\n  }\n\n  /**\n   * Writes muted, loop, and autoplay onto the inner video as properties. The template's attributes only cover markup\n   * parsed with its attributes in place; an element created by script gets its `no*` attributes afterwards, and neither\n   * Chrome nor Firefox honor a `muted` attribute set after `document.createElement`.\n   */\n  protected syncPlaybackDefaults(): void {\n    const target = this.target;\n    if (!target) return;\n\n    for (const name of PLAYBACK_DEFAULTS) target[name] = this.#isDefaultOn(name);\n  }\n\n  /** On unless its `no*` attribute is set and allowed; an explicit attribute such as `muted` wins over its opt-out. */\n  #isDefaultOn(name: BackgroundVideoOptOut): boolean {\n    const { optOuts } = this.constructor as typeof BackgroundVideoBase;\n\n    return this.hasAttribute(name) || !optOuts.includes(name) || !this.hasAttribute(`no${name}`);\n  }\n\n  abstract get src(): string;\n  abstract set src(value: string);\n\n  override attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void {\n    if (oldValue === newValue) return;\n\n    const { passthroughAttributes } = this.constructor as typeof BackgroundVideoBase;\n\n    if (name === 'src') {\n      this.src = newValue ?? '';\n    } else if (passthroughAttributes.includes(name)) {\n      if (newValue === null) this.target?.removeAttribute(name);\n      else this.target?.setAttribute(name, newValue);\n    } else {\n      this.syncPlaybackDefaults();\n    }\n  }\n\n  /** The inner `<video>` in the shadow root: what plays, and what `play()` / `pause()` belong on. */\n  get target(): HTMLVideoElement | null {\n    return getTemplateVideo(this.shadowRoot);\n  }\n}\n"],"mappings":";;;;;AAMA,MAAM,kBAAkB,WAAW,eAAe,MAAM,CAAC;AAWzD,MAAM,kBAAkB,iBAAiB,eAAe;AAExD,MAAM,oBAAoB;CAAC;CAAS;CAAQ;AAAU;;;;;;;AAWtD,IAAsB,sBAAtB,cAAkD,gBAAgB;;EACrC,KAAA,oBAAA,EAAE,MAAM,OAAyB;;;EACnC,KAAA,kBAAA;;;EAE0B,KAAA,UAAA;GAAC;GAAS;GAAQ;EAAU;;;EAE7B,KAAA,wBAAA;GAAC;GAAY;GAAgB;GAAe;EAAS;;CAEvG,WAAW,qBAA+B;EACxC,OAAO;GAAC;GAAO,GAAG,KAAK;GAAS,GAAG,KAAK,QAAQ,KAAK,SAAS,KAAK,MAAM;GAAG,GAAG,KAAK;EAAqB;CAC3G;CAEA,cAAc;EACZ,MAAM;EAEN,MAAM,OAAO,KAAK;EAElB,IAAI,CAAC,KAAK,YAAY;GACpB,MAAM,QAAgC;IACpC,GAAG,KAAK,qBAAqB,KAAK,UAAU,GAAG,KAAK,qBAAqB;IACzE,aAAa;IACb,uBAAuB;IACvB,yBAAyB;GAC3B;GAEA,KAAK,MAAM,QAAQ,mBACjB,IAAI,KAAK,aAAa,IAAI,GAAG,MAAM,QAAQ;GAG7C,KAAK,aAAa,KAAK,iBAAiB;GACxC,KAAK,WAAY,YAAY,KAAK,gBAAgB,KAAK;EACzD;EAEA,KAAK,qBAAqB;CAC5B;;;;;;CAOA,uBAAuC;EACrC,MAAM,SAAS,KAAK;EACpB,IAAI,CAAC,QAAQ;EAEb,KAAK,MAAM,QAAQ,mBAAmB,OAAO,QAAQ,KAAK,aAAa,IAAI;CAC7E;;CAGA,aAAa,MAAsC;EACjD,MAAM,EAAE,YAAY,KAAK;EAEzB,OAAO,KAAK,aAAa,IAAI,KAAK,CAAC,QAAQ,SAAS,IAAI,KAAK,CAAC,KAAK,aAAa,KAAK,MAAM;CAC7F;CAKA,yBAAkC,MAAc,UAAyB,UAA+B;EACtG,IAAI,aAAa,UAAU;EAE3B,MAAM,EAAE,0BAA0B,KAAK;EAEvC,IAAI,SAAS,OACX,KAAK,MAAM,YAAY;OAClB,IAAI,sBAAsB,SAAS,IAAI,GAAG;GAC/C,IAAI,aAAa,MAAM,KAAK,QAAQ,gBAAgB,IAAI;QACnD,KAAK,QAAQ,aAAa,MAAM,QAAQ;EAC/C,OACE,KAAK,qBAAqB;CAE9B;;CAGA,IAAI,SAAkC;EACpC,OAAO,iBAAiB,KAAK,UAAU;CACzC;AACF"}

package/dist/dev/media/background-video/template.d.ts

@@ -3,6 +3,9 @@
  * The shadow template both background-video elements render: a `<slot>` for a placeholder image, and a `<video>`
  * stretched over the host.
  *
+ * `attrs` go onto the `<video>` as given; each element decides which of its own attributes to forward. `src` is never
+ * among them, since serializing it would start a native load before an engine could take it.
+ *
  * Shared so the two can't drift in presentation. `object-fit` and `object-position` are the only styling hooks — a
  * background video has no controls to theme.
  */

package/dist/dev/media/background-video/template.js

@@ -1,27 +1,12 @@
 import { serializeAttributes } from "@videojs/utils/dom";
-import { pick } from "@videojs/utils/object";
 //#region src/media/background-video/template.ts
 /**
-* Attributes forwarded to the inner `<video>`. `src` is deliberately not one of them: each element decides what to do
-* with it, whether that is assigning the inner video or handing it to a playback engine, and serializing it into the
-* template would start a native load either way.
-*/
-const VideoAttributes = [
-	"autoplay",
-	"controls",
-	"controlslist",
-	"crossorigin",
-	"disablepictureinpicture",
-	"disableremoteplayback",
-	"loop",
-	"muted",
-	"playsinline",
-	"preload"
-];
-/**
 * The shadow template both background-video elements render: a `<slot>` for a placeholder image, and a `<video>`
 * stretched over the host.
 *
+* `attrs` go onto the `<video>` as given; each element decides which of its own attributes to forward. `src` is never
+* among them, since serializing it would start a native load before an engine could take it.
+*
 * Shared so the two can't drift in presentation. `object-fit` and `object-position` are the only styling hooks — a
 * background video has no controls to theme.
 */
@@ -42,10 +27,18 @@ function getTemplateHTML(attrs) {
       }
     </style>
     <slot></slot>
-    <video${serializeAttributes(pick(attrs, [...VideoAttributes]))}></video>
+    <video${serializeAttributes(attrs)}></video>
   `;
 }
+/**
+* The `<video>` from `getTemplateHTML`. Always the shadow one: the template has no slot that would render a light-DOM
+* `<video>`, so anything found there is either the placeholder or not displayed at all.
+*/
+function getTemplateVideo(shadowRoot) {
+	const video = shadowRoot?.querySelector("video");
+	return video instanceof HTMLVideoElement ? video : null;
+}
 //#endregion
-export { VideoAttributes, getTemplateHTML };
+export { getTemplateHTML, getTemplateVideo };
 
 //# sourceMappingURL=template.js.map

package/dist/dev/media/background-video/template.js.map

@@ -1 +1 @@
-{"version":3,"file":"template.js","names":[],"sources":["../../../../src/media/background-video/template.ts"],"sourcesContent":["import { serializeAttributes } from '@videojs/utils/dom';\nimport { pick } from '@videojs/utils/object';\n\n/**\n * Attributes forwarded to the inner `<video>`. `src` is deliberately not one of them: each element decides what to do\n * with it, whether that is assigning the inner video or handing it to a playback engine, and serializing it into the\n * template would start a native load either way.\n */\nexport const VideoAttributes = [\n  'autoplay',\n  'controls',\n  'controlslist',\n  'crossorigin',\n  'disablepictureinpicture',\n  'disableremoteplayback',\n  'loop',\n  'muted',\n  'playsinline',\n  'preload',\n] as const;\n\n/**\n * The shadow template both background-video elements render: a `<slot>` for a placeholder image, and a `<video>`\n * stretched over the host.\n *\n * Shared so the two can't drift in presentation. `object-fit` and `object-position` are the only styling hooks — a\n * background video has no controls to theme.\n */\nexport function getTemplateHTML(attrs: Record<string, string>) {\n  return /*html*/ `\n    <style>\n      :host {\n        position: relative;\n      }\n\n      video {\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        object-fit: var(--media-object-fit, inherit);\n        object-position: var(--media-object-position, 50% 50%);\n      }\n    </style>\n    <slot></slot>\n    <video${serializeAttributes(pick(attrs, [...VideoAttributes]))}></video>\n  `;\n}\n"],"mappings":";;;;;;;;AAQA,MAAa,kBAAkB;CAC7B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;;;;;;;;AASA,SAAgB,gBAAgB,OAA+B;CAC7D,OAAgB;;;;;;;;;;;;;;;;YAgBN,oBAAoB,KAAK,OAAO,CAAC,GAAG,eAAe,CAAC,CAAC,EAAE;;AAEnE"}
+{"version":3,"file":"template.js","names":[],"sources":["../../../../src/media/background-video/template.ts"],"sourcesContent":["import { serializeAttributes } from '@videojs/utils/dom';\n\n/**\n * The shadow template both background-video elements render: a `<slot>` for a placeholder image, and a `<video>`\n * stretched over the host.\n *\n * `attrs` go onto the `<video>` as given; each element decides which of its own attributes to forward. `src` is never\n * among them, since serializing it would start a native load before an engine could take it.\n *\n * Shared so the two can't drift in presentation. `object-fit` and `object-position` are the only styling hooks — a\n * background video has no controls to theme.\n */\nexport function getTemplateHTML(attrs: Record<string, string>) {\n  return /*html*/ `\n    <style>\n      :host {\n        position: relative;\n      }\n\n      video {\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        object-fit: var(--media-object-fit, inherit);\n        object-position: var(--media-object-position, 50% 50%);\n      }\n    </style>\n    <slot></slot>\n    <video${serializeAttributes(attrs)}></video>\n  `;\n}\n\n/**\n * The `<video>` from `getTemplateHTML`. Always the shadow one: the template has no slot that would render a light-DOM\n * `<video>`, so anything found there is either the placeholder or not displayed at all.\n */\nexport function getTemplateVideo(shadowRoot: ShadowRoot | null): HTMLVideoElement | null {\n  const video = shadowRoot?.querySelector('video');\n\n  return video instanceof HTMLVideoElement ? video : null;\n}\n"],"mappings":";;;;;;;;;;;;AAYA,SAAgB,gBAAgB,OAA+B;CAC7D,OAAgB;;;;;;;;;;;;;;;;YAgBN,oBAAoB,KAAK,EAAE;;AAEvC;;;;;AAMA,SAAgB,iBAAiB,YAAwD;CACvF,MAAM,QAAQ,YAAY,cAAc,OAAO;CAE/C,OAAO,iBAAiB,mBAAmB,QAAQ;AACrD"}

package/dist/dev/media/hls-background-video/adapter.d.ts

@@ -1,14 +1,7 @@
-import { getTemplateHTML } from "../background-video/template.js";
+import { BackgroundVideoBase, BackgroundVideoOptOut } from "../background-video/base.js";
 import { Media } from "@videojs/media/dom";
 import { HlsBackgroundVideoAdapter, HlsVideoMediaError } from "@videojs/spf/adapters/hls-background-video";
 //#region src/media/hls-background-video/adapter.d.ts
-interface LifecycleElement extends HTMLElement {
-  connectedCallback?(): void;
-  disconnectedCallback?(): void;
-  adoptedCallback?(): void;
-  attributeChangedCallback?(name: string, oldValue: string | null, newValue: string | null): void;
-}
-declare const HlsBackgroundVideoBase: new () => LifecycleElement;
 /**
  * A muted, looping, chrome-less video over the SPF background-video engine.
  *
@@ -20,8 +13,9 @@ declare const HlsBackgroundVideoBase: new () => LifecycleElement;
  * package, whose `audio`, `debug`, `preload`, and `max-resolution` attributes are all deliberately absent. Capping
  * which rendition is fetched is a delivery param on the URL — `?max_resolution=720p` on a Mux stream, for one — which
  * keeps the renditions it excludes out of the manifest rather than merely unpicked; `preload` would have nothing to
- * say, since the engine loads from the moment it has a source. And unlike `<background-video>` there are no `nomuted` /
- * `noloop` / `noautoplay` opt-outs: those three are what this element is for, so the adapter fixes them on at attach.
+ * say, since the engine loads from the moment it has a source. Muted is fixed on: the engine drops audio, so there is
+ * nothing to unmute. `noloop` and `noautoplay` opt out as on `<background-video>`, so a page can play the video once,
+ * or hold it until it has checked the motion preference.
  *
  * Takes no structured `source` — `src` is an HLS URL, as the package it replaces required. Mux playback-ID identity,
  * poster, and storyboard belong to `<mux-video>`; none of them mean anything without controls to hang them on.
@@ -43,13 +37,10 @@ declare const HlsBackgroundVideoBase: new () => LifecycleElement;
  *   `<mux-background-video>` is this element under the name the package it replaces used. Same class, so the tag is a
  *   naming choice and nothing more.
  */
-export declare class HlsBackgroundVideo extends HlsBackgroundVideoBase {
+export declare class HlsBackgroundVideo extends BackgroundVideoBase {
   #private;
-  static shadowRootOptions: {
-    mode: ShadowRootMode;
-  };
-  static getTemplateHTML: typeof getTemplateHTML;
-  static get observedAttributes(): string[];
+  static optOuts: readonly BackgroundVideoOptOut[];
+  static passthroughAttributes: readonly string[];
   constructor();
   /** Register the Media (not the inner `<video>`) with the provider. */
   getMediaTarget(): Media | null;
@@ -59,8 +50,7 @@ export declare class HlsBackgroundVideo extends HlsBackgroundVideoBase {
    */
   get adapter(): HlsBackgroundVideoAdapter;
   disconnectedCallback(): void;
-  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
-  /** The inner `<video>` the engine renders into. */
+  /** Same element as `target`. */
   get video(): HTMLVideoElement | null;
   /**
    * What made the current source unplayable, or `null`. An SVTA code rather than a `MediaError` one — 99001 where this

package/dist/dev/media/hls-background-video/adapter.js

@@ -1,10 +1,6 @@
-import { MediaAttachMixin } from "../../store/media-attach-mixin.js";
-import { getTemplateHTML } from "../background-video/template.js";
-import { namedNodeMapToObject } from "@videojs/utils/dom";
+import { BackgroundVideoBase } from "../background-video/base.js";
 import { HlsBackgroundVideoAdapter } from "@videojs/spf/adapters/hls-background-video";
 //#region src/media/hls-background-video/adapter.ts
-const HTMLElementBase = globalThis.HTMLElement ?? class {};
-const HlsBackgroundVideoBase = MediaAttachMixin(HTMLElementBase);
 /**
 * A muted, looping, chrome-less video over the SPF background-video engine.
 *
@@ -16,8 +12,9 @@ const HlsBackgroundVideoBase = MediaAttachMixin(HTMLElementBase);
 * package, whose `audio`, `debug`, `preload`, and `max-resolution` attributes are all deliberately absent. Capping
 * which rendition is fetched is a delivery param on the URL — `?max_resolution=720p` on a Mux stream, for one — which
 * keeps the renditions it excludes out of the manifest rather than merely unpicked; `preload` would have nothing to
-* say, since the engine loads from the moment it has a source. And unlike `<background-video>` there are no `nomuted` /
-* `noloop` / `noautoplay` opt-outs: those three are what this element is for, so the adapter fixes them on at attach.
+* say, since the engine loads from the moment it has a source. Muted is fixed on: the engine drops audio, so there is
+* nothing to unmute. `noloop` and `noautoplay` opt out as on `<background-video>`, so a page can play the video once,
+* or hold it until it has checked the motion preference.
 *
 * Takes no structured `source` — `src` is an HLS URL, as the package it replaces required. Mux playback-ID identity,
 * poster, and storyboard belong to `<mux-video>`; none of them mean anything without controls to hang them on.
@@ -39,34 +36,23 @@ const HlsBackgroundVideoBase = MediaAttachMixin(HTMLElementBase);
 *   `<mux-background-video>` is this element under the name the package it replaces used. Same class, so the tag is a
 *   naming choice and nothing more.
 */
-var HlsBackgroundVideo = class extends HlsBackgroundVideoBase {
+var HlsBackgroundVideo = class extends BackgroundVideoBase {
 	static {
-		this.shadowRootOptions = { mode: "open" };
+		this.optOuts = ["loop", "autoplay"];
 	}
 	static {
-		this.getTemplateHTML = getTemplateHTML;
-	}
-	static get observedAttributes() {
-		return ["src"];
+		this.passthroughAttributes = [
+			"controls",
+			"controlslist",
+			"crossorigin"
+		];
 	}
 	#media = new HlsBackgroundVideoAdapter();
 	constructor() {
 		super();
-		if (!this.shadowRoot) {
-			this.attachShadow(this.constructor.shadowRootOptions);
-			const attrs = {
-				...namedNodeMapToObject(this.attributes),
-				muted: "",
-				loop: "",
-				autoplay: "",
-				playsinline: "",
-				disableremoteplayback: "",
-				disablepictureinpicture: ""
-			};
-			this.shadowRoot.innerHTML = getTemplateHTML(attrs);
-		}
-		const video = this.video;
-		if (video) this.#media.attach(video);
+		const target = this.target;
+		if (target) this.#media.attach(target);
+		this.syncPlaybackDefaults();
 		this.#media.addEventListener("error", () => this.dispatchEvent(new Event("error")));
 	}
 	/** Register the Media (not the inner `<video>`) with the provider. */
@@ -87,14 +73,9 @@ var HlsBackgroundVideo = class extends HlsBackgroundVideoBase {
 			if (!this.isConnected) this.#media.destroy();
 		});
 	}
-	attributeChangedCallback(name, oldValue, newValue) {
-		if (oldValue === newValue) return;
-		if (name === "src") this.src = newValue ?? "";
-	}
-	/** The inner `<video>` the engine renders into. */
+	/** Same element as `target`. */
 	get video() {
-		const video = this.shadowRoot?.querySelector("video");
-		return video instanceof HTMLVideoElement ? video : null;
+		return this.target;
 	}
 	/**
 	* What made the current source unplayable, or `null`. An SVTA code rather than a `MediaError` one — 99001 where this

package/dist/dev/media/hls-background-video/adapter.js.map

@@ -1 +1 @@
-{"version":3,"file":"adapter.js","names":[],"sources":["../../../../src/media/hls-background-video/adapter.ts"],"sourcesContent":["import type { Media } from '@videojs/media/dom';\nimport { HlsBackgroundVideoAdapter, type HlsVideoMediaError } from '@videojs/spf/adapters/hls-background-video';\nimport { namedNodeMapToObject } from '@videojs/utils/dom';\n\nimport { MediaAttachMixin } from '../../store/media-attach-mixin';\nimport { getTemplateHTML } from '../background-video/template';\n\nconst HTMLElementBase = globalThis.HTMLElement ?? class {};\n\n// `MediaAttachMixin` is typed as returning its base, so its `disconnectedCallback`\n// isn't visible for `super` to reach. `LifecycleElement` declares the lifecycle\n// callbacks this element overrides; method syntax lets a subclass override them.\ninterface LifecycleElement extends HTMLElement {\n  connectedCallback?(): void;\n  disconnectedCallback?(): void;\n  adoptedCallback?(): void;\n  attributeChangedCallback?(name: string, oldValue: string | null, newValue: string | null): void;\n}\n\nconst HlsBackgroundVideoBase = MediaAttachMixin(HTMLElementBase) as unknown as new () => LifecycleElement;\n\n/**\n * A muted, looping, chrome-less video over the SPF background-video engine.\n *\n * The SPF-backed counterpart to `<background-video>`, which plays its source natively. This one streams HLS through the\n * engine, which pins a single rendition for the session rather than adapting, and drops audio and text handling\n * entirely — the shape an ambient hero video actually wants.\n *\n * Nearer an image than a player, and `src` is the whole surface. Replaces the standalone `mux-background-video`\n * package, whose `audio`, `debug`, `preload`, and `max-resolution` attributes are all deliberately absent. Capping\n * which rendition is fetched is a delivery param on the URL — `?max_resolution=720p` on a Mux stream, for one — which\n * keeps the renditions it excludes out of the manifest rather than merely unpicked; `preload` would have nothing to\n * say, since the engine loads from the moment it has a source. And unlike `<background-video>` there are no `nomuted` /\n * `noloop` / `noautoplay` opt-outs: those three are what this element is for, so the adapter fixes them on at attach.\n *\n * Takes no structured `source` — `src` is an HLS URL, as the package it replaces required. Mux playback-ID identity,\n * poster, and storyboard belong to `<mux-video>`; none of them mean anything without controls to hang them on.\n *\n * Nothing about an unplayable source reaches the inner `<video>` on its own, so `error` on it stays null and the\n * element sits at `readyState 0`. The engine reports each condition and logs it, the Media promotes the fatal one, and\n * this element re-fires it as its own `error` / `'error'` — the one place a consumer holding the element can see a\n * source that never appears.\n *\n * @example\n *   ```html\n *   <hls-background-video src=\"https://stream.mux.com/PLAYBACK_ID.m3u8?max_resolution=720p\">\n *   <img src=\"https://image.mux.com/PLAYBACK_ID/thumbnail.webp?time=0\" alt=\"\" />\n *   </hls-background-video>\n *   ```;\n *\n * @fires error - Fired when a fatal condition is reported. Read `error` for it.\n *\n *   `<mux-background-video>` is this element under the name the package it replaces used. Same class, so the tag is a\n *   naming choice and nothing more.\n */\n// Deliberately not `CustomMediaElement`, matching `<background-video>`: a\n// background video needs one property, not the full WHATWG media API.\nexport class HlsBackgroundVideo extends HlsBackgroundVideoBase {\n  static shadowRootOptions = { mode: 'open' as ShadowRootMode };\n  static getTemplateHTML = getTemplateHTML;\n\n  static get observedAttributes(): string[] {\n    return ['src'];\n  }\n\n  #media = new HlsBackgroundVideoAdapter();\n\n  constructor() {\n    super();\n\n    if (!this.shadowRoot) {\n      this.attachShadow((this.constructor as typeof HlsBackgroundVideo).shadowRootOptions);\n\n      const attrs = {\n        ...namedNodeMapToObject(this.attributes),\n        muted: '',\n        loop: '',\n        autoplay: '',\n        playsinline: '',\n        disableremoteplayback: '',\n        disablepictureinpicture: '',\n      };\n\n      this.shadowRoot!.innerHTML = getTemplateHTML(attrs);\n    }\n\n    // Neither Chrome nor Firefox honor a `muted` attribute set after\n    // `document.createElement`, and autoplay is refused without it. Attaching is\n    // what sets the property — along with the rest of the fixed behavior — so\n    // nothing here needs to repeat it.\n    const video = this.video;\n\n    if (video) this.#media.attach(video);\n\n    // Re-fired rather than bridged on demand the way `CustomMediaElement` does\n    // it: one listener for the one event this element has, on a Media it owns\n    // for its whole life, is less than the machinery to defer it would cost.\n    this.#media.addEventListener('error', () => this.dispatchEvent(new Event('error')));\n  }\n\n  /** Register the Media (not the inner `<video>`) with the provider. */\n  getMediaTarget(): Media | null {\n    return this.#media as unknown as Media;\n  }\n\n  /**\n   * The Media driving the inner `<video>`, matching `adapter` on `CustomMediaElement`. Call `adapter.destroy()` to\n   * release the engine after `keep-alive` kept it running past removal.\n   */\n  get adapter(): HlsBackgroundVideoAdapter {\n    return this.#media;\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback?.();\n\n    // Only the element's own `keep-alive` counts: an ancestor's `destroy()` can't reach this engine, so inheriting it\n    // would leave the engine running with nothing to release it.\n    if (this.hasAttribute('keep-alive')) return;\n\n    // Deferred so a synchronous reparent (remove then insert) doesn't tear down\n    // the engine, matching `CustomMediaElement`.\n    queueMicrotask(() => {\n      if (!this.isConnected) this.#media.destroy();\n    });\n  }\n\n  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void {\n    if (oldValue === newValue) return;\n\n    if (name === 'src') this.src = newValue ?? '';\n  }\n\n  /** The inner `<video>` the engine renders into. */\n  get video(): HTMLVideoElement | null {\n    const video = this.shadowRoot?.querySelector('video');\n\n    return video instanceof HTMLVideoElement ? video : null;\n  }\n\n  /**\n   * What made the current source unplayable, or `null`. An SVTA code rather than a `MediaError` one — 99001 where this\n   * player has no pipeline for what the source needs, with the specifics logged. Reset by a new source, and not on the\n   * inner `<video>`, which never learns of it.\n   */\n  get error(): HlsVideoMediaError | null {\n    return this.#media.error;\n  }\n\n  /** HLS manifest URL. Assigning a new one restarts playback from scratch. */\n  get src(): string {\n    return this.#media.src;\n  }\n\n  set src(value: string) {\n    this.#media.src = value;\n  }\n}\n"],"mappings":";;;;;AAOA,MAAM,kBAAkB,WAAW,eAAe,MAAM,CAAC;AAYzD,MAAM,yBAAyB,iBAAiB,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsC/D,IAAa,qBAAb,cAAwC,uBAAuB;;EAClC,KAAA,oBAAA,EAAE,MAAM,OAAyB;;;EACnC,KAAA,kBAAA;;CAEzB,WAAW,qBAA+B;EACxC,OAAO,CAAC,KAAK;CACf;CAEA,SAAS,IAAI,0BAA0B;CAEvC,cAAc;EACZ,MAAM;EAEN,IAAI,CAAC,KAAK,YAAY;GACpB,KAAK,aAAc,KAAK,YAA0C,iBAAiB;GAEnF,MAAM,QAAQ;IACZ,GAAG,qBAAqB,KAAK,UAAU;IACvC,OAAO;IACP,MAAM;IACN,UAAU;IACV,aAAa;IACb,uBAAuB;IACvB,yBAAyB;GAC3B;GAEA,KAAK,WAAY,YAAY,gBAAgB,KAAK;EACpD;EAMA,MAAM,QAAQ,KAAK;EAEnB,IAAI,OAAO,KAAK,OAAO,OAAO,KAAK;EAKnC,KAAK,OAAO,iBAAiB,eAAe,KAAK,cAAc,IAAI,MAAM,OAAO,CAAC,CAAC;CACpF;;CAGA,iBAA+B;EAC7B,OAAO,KAAK;CACd;;;;;CAMA,IAAI,UAAqC;EACvC,OAAO,KAAK;CACd;CAEA,uBAAsC;EACpC,MAAM,uBAAuB;EAI7B,IAAI,KAAK,aAAa,YAAY,GAAG;EAIrC,qBAAqB;GACnB,IAAI,CAAC,KAAK,aAAa,KAAK,OAAO,QAAQ;EAC7C,CAAC;CACH;CAEA,yBAAyB,MAAc,UAAyB,UAA+B;EAC7F,IAAI,aAAa,UAAU;EAE3B,IAAI,SAAS,OAAO,KAAK,MAAM,YAAY;CAC7C;;CAGA,IAAI,QAAiC;EACnC,MAAM,QAAQ,KAAK,YAAY,cAAc,OAAO;EAEpD,OAAO,iBAAiB,mBAAmB,QAAQ;CACrD;;;;;;CAOA,IAAI,QAAmC;EACrC,OAAO,KAAK,OAAO;CACrB;;CAGA,IAAI,MAAc;EAChB,OAAO,KAAK,OAAO;CACrB;CAEA,IAAI,IAAI,OAAe;EACrB,KAAK,OAAO,MAAM;CACpB;AACF"}
+{"version":3,"file":"adapter.js","names":[],"sources":["../../../../src/media/hls-background-video/adapter.ts"],"sourcesContent":["import type { Media } from '@videojs/media/dom';\nimport { HlsBackgroundVideoAdapter, type HlsVideoMediaError } from '@videojs/spf/adapters/hls-background-video';\n\nimport { BackgroundVideoBase, type BackgroundVideoOptOut } from '../background-video/base';\n\n/**\n * A muted, looping, chrome-less video over the SPF background-video engine.\n *\n * The SPF-backed counterpart to `<background-video>`, which plays its source natively. This one streams HLS through the\n * engine, which pins a single rendition for the session rather than adapting, and drops audio and text handling\n * entirely — the shape an ambient hero video actually wants.\n *\n * Nearer an image than a player, and `src` is the whole surface. Replaces the standalone `mux-background-video`\n * package, whose `audio`, `debug`, `preload`, and `max-resolution` attributes are all deliberately absent. Capping\n * which rendition is fetched is a delivery param on the URL — `?max_resolution=720p` on a Mux stream, for one — which\n * keeps the renditions it excludes out of the manifest rather than merely unpicked; `preload` would have nothing to\n * say, since the engine loads from the moment it has a source. Muted is fixed on: the engine drops audio, so there is\n * nothing to unmute. `noloop` and `noautoplay` opt out as on `<background-video>`, so a page can play the video once,\n * or hold it until it has checked the motion preference.\n *\n * Takes no structured `source` — `src` is an HLS URL, as the package it replaces required. Mux playback-ID identity,\n * poster, and storyboard belong to `<mux-video>`; none of them mean anything without controls to hang them on.\n *\n * Nothing about an unplayable source reaches the inner `<video>` on its own, so `error` on it stays null and the\n * element sits at `readyState 0`. The engine reports each condition and logs it, the Media promotes the fatal one, and\n * this element re-fires it as its own `error` / `'error'` — the one place a consumer holding the element can see a\n * source that never appears.\n *\n * @example\n *   ```html\n *   <hls-background-video src=\"https://stream.mux.com/PLAYBACK_ID.m3u8?max_resolution=720p\">\n *   <img src=\"https://image.mux.com/PLAYBACK_ID/thumbnail.webp?time=0\" alt=\"\" />\n *   </hls-background-video>\n *   ```;\n *\n * @fires error - Fired when a fatal condition is reported. Read `error` for it.\n *\n *   `<mux-background-video>` is this element under the name the package it replaces used. Same class, so the tag is a\n *   naming choice and nothing more.\n */\n// Deliberately not `CustomMediaElement`, matching `<background-video>`: a\n// background video needs one property, not the full WHATWG media API.\nexport class HlsBackgroundVideo extends BackgroundVideoBase {\n  static override optOuts: readonly BackgroundVideoOptOut[] = ['loop', 'autoplay'];\n  // No `preload`: the engine loads as soon as it has a source, and attaching fixes `preload=\"auto\"`.\n  static override passthroughAttributes: readonly string[] = ['controls', 'controlslist', 'crossorigin'];\n\n  #media = new HlsBackgroundVideoAdapter();\n\n  constructor() {\n    super();\n\n    const target = this.target;\n\n    if (target) this.#media.attach(target);\n\n    // Attaching fixes loop and autoplay on, so their opt-outs have to be reapplied after it.\n    this.syncPlaybackDefaults();\n\n    // Re-fired rather than bridged on demand the way `CustomMediaElement` does\n    // it: one listener for the one event this element has, on a Media it owns\n    // for its whole life, is less than the machinery to defer it would cost.\n    this.#media.addEventListener('error', () => this.dispatchEvent(new Event('error')));\n  }\n\n  /** Register the Media (not the inner `<video>`) with the provider. */\n  getMediaTarget(): Media | null {\n    return this.#media as unknown as Media;\n  }\n\n  /**\n   * The Media driving the inner `<video>`, matching `adapter` on `CustomMediaElement`. Call `adapter.destroy()` to\n   * release the engine after `keep-alive` kept it running past removal.\n   */\n  get adapter(): HlsBackgroundVideoAdapter {\n    return this.#media;\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback?.();\n\n    // Only the element's own `keep-alive` counts: an ancestor's `destroy()` can't reach this engine, so inheriting it\n    // would leave the engine running with nothing to release it.\n    if (this.hasAttribute('keep-alive')) return;\n\n    // Deferred so a synchronous reparent (remove then insert) doesn't tear down\n    // the engine, matching `CustomMediaElement`.\n    queueMicrotask(() => {\n      if (!this.isConnected) this.#media.destroy();\n    });\n  }\n\n  /** Same element as `target`. */\n  get video(): HTMLVideoElement | null {\n    return this.target;\n  }\n\n  /**\n   * What made the current source unplayable, or `null`. An SVTA code rather than a `MediaError` one — 99001 where this\n   * player has no pipeline for what the source needs, with the specifics logged. Reset by a new source, and not on the\n   * inner `<video>`, which never learns of it.\n   */\n  get error(): HlsVideoMediaError | null {\n    return this.#media.error;\n  }\n\n  /** HLS manifest URL. Assigning a new one restarts playback from scratch. */\n  override get src(): string {\n    return this.#media.src;\n  }\n\n  override set src(value: string) {\n    this.#media.src = value;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA,IAAa,qBAAb,cAAwC,oBAAoB;;EACE,KAAA,UAAA,CAAC,QAAQ,UAAU;;;EAEpB,KAAA,wBAAA;GAAC;GAAY;GAAgB;EAAa;;CAErG,SAAS,IAAI,0BAA0B;CAEvC,cAAc;EACZ,MAAM;EAEN,MAAM,SAAS,KAAK;EAEpB,IAAI,QAAQ,KAAK,OAAO,OAAO,MAAM;EAGrC,KAAK,qBAAqB;EAK1B,KAAK,OAAO,iBAAiB,eAAe,KAAK,cAAc,IAAI,MAAM,OAAO,CAAC,CAAC;CACpF;;CAGA,iBAA+B;EAC7B,OAAO,KAAK;CACd;;;;;CAMA,IAAI,UAAqC;EACvC,OAAO,KAAK;CACd;CAEA,uBAAsC;EACpC,MAAM,uBAAuB;EAI7B,IAAI,KAAK,aAAa,YAAY,GAAG;EAIrC,qBAAqB;GACnB,IAAI,CAAC,KAAK,aAAa,KAAK,OAAO,QAAQ;EAC7C,CAAC;CACH;;CAGA,IAAI,QAAiC;EACnC,OAAO,KAAK;CACd;;;;;;CAOA,IAAI,QAAmC;EACrC,OAAO,KAAK,OAAO;CACrB;;CAGA,IAAa,MAAc;EACzB,OAAO,KAAK,OAAO;CACrB;CAEA,IAAa,IAAI,OAAe;EAC9B,KAAK,OAAO,MAAM;CACpB;AACF"}

package/dist/dev/ui/captions-button/element.d.ts

@@ -40,6 +40,8 @@ export declare class CaptionsButtonElement extends MediaButtonElement<CaptionsBu
     selectSubtitlesTrack: (id: string | null) => void;
     chaptersCues: import("@videojs/media").MediaTextCue[];
     thumbnailsTrack: import("@videojs/media").MediaThumbnailsTrack | null;
+    addTextTrack: import("@videojs/core").AddTextTrack;
+    removeTextTrack: (id: string) => void;
   } | undefined>;
   protected readonly hotkeyAction = "toggleSubtitles";
   connectedCallback(): void;

package/dist/dev/ui/captions-radio-group/element.d.ts

@@ -6,7 +6,8 @@ import { Text } from "@videojs/core/i18n";
 /**
  * Menu radio group that generates an Off `<media-menu-radio-item>` plus one per captions and subtitles track, and
  * shares the selected label and availability with an enclosing menu. An optional `<template>` holding one
- * `<media-menu-radio-item>` customizes each generated item.
+ * `<media-menu-radio-item>` customizes each generated item; its `data-part` `label` and `badge` descendants receive the
+ * track's text.
  */
 export declare class CaptionsRadioGroupElement extends MenuRadioGroupElement {
   #private;

package/dist/dev/ui/captions-radio-group/element.js

@@ -11,7 +11,8 @@ import { translateText } from "@videojs/core/i18n";
 /**
 * Menu radio group that generates an Off `<media-menu-radio-item>` plus one per captions and subtitles track, and
 * shares the selected label and availability with an enclosing menu. An optional `<template>` holding one
-* `<media-menu-radio-item>` customizes each generated item.
+* `<media-menu-radio-item>` customizes each generated item; its `data-part` `label` and `badge` descendants receive the
+* track's text.
 */
 var CaptionsRadioGroupElement = class extends MenuRadioGroupElement {
 	constructor(..._args) {
@@ -23,6 +24,8 @@ var CaptionsRadioGroupElement = class extends MenuRadioGroupElement {
 		this.#i18n = new I18nController(this, i18nContext);
 		this.#mediaState = new PlayerController(this, playerContext, selectTextTrack);
 		this.#options = new RadioOptionsController(this, {
+			renderItem: (item, label, option) => this.#setContent(item, label, option.badge),
+			getOptionCacheKey: (option) => option.badge ?? "",
 			setItemAttributes: (item, option) => item.setAttribute("data-track", option.value),
 			onValueChange: (value) => {
 				const media = this.#mediaState.value;
@@ -67,6 +70,16 @@ var CaptionsRadioGroupElement = class extends MenuRadioGroupElement {
 		super.update(changed);
 		if (state) applyStateDataAttrs(this, state, CaptionsRadioGroupDataAttrs);
 	}
+	#setContent(item, label, badge) {
+		const labelPart = item.querySelector("[data-part~=\"label\"]");
+		const badgePart = item.querySelector("[data-part~=\"badge\"]");
+		if (labelPart) labelPart.textContent = label;
+		if (badgePart) {
+			badgePart.textContent = badge ?? "";
+			badgePart.hidden = !badge;
+		}
+		if (!labelPart && !badgePart) item.textContent = [label, badge].filter(Boolean).join(" ");
+	}
 };
 //#endregion
 export { CaptionsRadioGroupElement };

package/dist/dev/ui/captions-radio-group/element.js.map

@@ -1 +1 @@
-{"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/captions-radio-group/element.ts"],"sourcesContent":["import {\n  CaptionsRadioGroupCore,\n  CaptionsRadioGroupDataAttrs,\n  type CaptionsRadioGroupOption,\n  type CaptionsRadioGroupState,\n} from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectTextTrack } from '@videojs/core/dom';\nimport { type Text, translateText } from '@videojs/core/i18n';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\n\nimport { i18nContext } from '../../i18n/context';\nimport { I18nController } from '../../i18n/controller';\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { MenuRadioGroupElement } from '../menu/radio-group';\nimport { RadioOptionsController } from '../radio-options/controller';\n\n/**\n * Menu radio group that generates an Off `<media-menu-radio-item>` plus one per captions and subtitles track, and\n * shares the selected label and availability with an enclosing menu. An optional `<template>` holding one\n * `<media-menu-radio-item>` customizes each generated item.\n */\nexport class CaptionsRadioGroupElement extends MenuRadioGroupElement {\n  static override readonly tagName = 'media-captions-radio-group';\n\n  static override properties = {\n    ...MenuRadioGroupElement.properties,\n    disabled: { type: Boolean },\n    label: { type: String },\n  } satisfies PropertyDeclarationMap<'value' | 'label' | 'disabled'>;\n\n  disabled = false;\n  label: Text | string = '';\n  formatTrack = CaptionsRadioGroupCore.defaultProps.formatTrack;\n\n  readonly #core = new CaptionsRadioGroupCore();\n  readonly #i18n = new I18nController(this, i18nContext);\n  readonly #mediaState = new PlayerController(this, playerContext, selectTextTrack);\n  readonly #options = new RadioOptionsController<CaptionsRadioGroupOption>(this, {\n    setItemAttributes: (item, option) => item.setAttribute('data-track', option.value),\n    onValueChange: (value) => {\n      const media = this.#mediaState.value;\n\n      if (media) this.#core.selectValue(media, value);\n    },\n  });\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.destroyed) return;\n\n    if (__DEV__ && !this.#mediaState.value && this.#mediaState.displayName) {\n      logMissingFeature(this.localName, this.#mediaState.displayName);\n    }\n  }\n\n  protected override update(changed: PropertyValues): void {\n    const media = this.#mediaState.value;\n    let state: CaptionsRadioGroupState | null = null;\n\n    if (media) {\n      this.#core.setProps({ formatTrack: this.formatTrack, disabled: this.disabled, label: this.label });\n      this.#core.setMedia(media);\n      state = this.#core.getState();\n\n      this.applyDefaultAriaLabel(translateText(this.#core.getLabel(state), this.#i18n.value));\n      this.#options.sync(state, this.#i18n.value, this.#i18n.locale);\n      this.publishMenuOptionState(state.disabled, state.hidden, state.availability);\n    } else {\n      this.publishMenuOptionState(true, true, 'unsupported');\n    }\n\n    super.update(changed);\n\n    if (state) applyStateDataAttrs(this, state, CaptionsRadioGroupDataAttrs);\n  }\n}\n\nexport namespace CaptionsRadioGroupElement {\n  export type State = CaptionsRadioGroupState;\n}\n"],"mappings":";;;;;;;;;;;;;;;AAsBA,IAAa,4BAAb,cAA+C,sBAAsB;;;EASxD,KAAA,WAAA;EACY,KAAA,QAAA;EACT,KAAA,cAAA,uBAAuB,aAAa;EAEjC,KAAA,QAAA,IAAI,uBAAuB;EAC3B,KAAA,QAAA,IAAI,eAAe,MAAM,WAAW;EAC9B,KAAA,cAAA,IAAI,iBAAiB,MAAM,eAAe,eAAe;EAC5D,KAAA,WAAA,IAAI,uBAAiD,MAAM;GAC7E,oBAAoB,MAAM,WAAW,KAAK,aAAa,cAAc,OAAO,KAAK;GACjF,gBAAgB,UAAU;IACxB,MAAM,QAAQ,KAAK,YAAY;IAE/B,IAAI,OAAO,KAAK,MAAM,YAAY,OAAO,KAAK;GAChD;EACF,CAAC;;;EAtBkC,KAAA,UAAA;;;EAEN,KAAA,aAAA;GAC3B,GAAG,sBAAsB;GACzB,UAAU,EAAE,MAAM,QAAQ;GAC1B,OAAO,EAAE,MAAM,OAAO;EACxB;;CAMA;CACA;CACA;CACA;CASA,oBAAmC;EACjC,MAAM,kBAAkB;EAExB,IAAI,KAAK,WAAW;EAEpB,IAAe,CAAC,KAAK,YAAY,SAAS,KAAK,YAAY,aACzD,kBAAkB,KAAK,WAAW,KAAK,YAAY,WAAW;CAElE;CAEA,OAA0B,SAA+B;EACvD,MAAM,QAAQ,KAAK,YAAY;EAC/B,IAAI,QAAwC;EAE5C,IAAI,OAAO;GACT,KAAK,MAAM,SAAS;IAAE,aAAa,KAAK;IAAa,UAAU,KAAK;IAAU,OAAO,KAAK;GAAM,CAAC;GACjG,KAAK,MAAM,SAAS,KAAK;GACzB,QAAQ,KAAK,MAAM,SAAS;GAE5B,KAAK,sBAAsB,cAAc,KAAK,MAAM,SAAS,KAAK,GAAG,KAAK,MAAM,KAAK,CAAC;GACtF,KAAK,SAAS,KAAK,OAAO,KAAK,MAAM,OAAO,KAAK,MAAM,MAAM;GAC7D,KAAK,uBAAuB,MAAM,UAAU,MAAM,QAAQ,MAAM,YAAY;EAC9E,OACE,KAAK,uBAAuB,MAAM,MAAM,aAAa;EAGvD,MAAM,OAAO,OAAO;EAEpB,IAAI,OAAO,oBAAoB,MAAM,OAAO,2BAA2B;CACzE;AACF"}
+{"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/captions-radio-group/element.ts"],"sourcesContent":["import {\n  CaptionsRadioGroupCore,\n  CaptionsRadioGroupDataAttrs,\n  type CaptionsRadioGroupOption,\n  type CaptionsRadioGroupState,\n} from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectTextTrack } from '@videojs/core/dom';\nimport { type Text, translateText } from '@videojs/core/i18n';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\n\nimport { i18nContext } from '../../i18n/context';\nimport { I18nController } from '../../i18n/controller';\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { MenuRadioGroupElement } from '../menu/radio-group';\nimport type { MenuRadioItemElement } from '../menu/radio-item';\nimport { RadioOptionsController } from '../radio-options/controller';\n\n/**\n * Menu radio group that generates an Off `<media-menu-radio-item>` plus one per captions and subtitles track, and\n * shares the selected label and availability with an enclosing menu. An optional `<template>` holding one\n * `<media-menu-radio-item>` customizes each generated item; its `data-part` `label` and `badge` descendants receive the\n * track's text.\n */\nexport class CaptionsRadioGroupElement extends MenuRadioGroupElement {\n  static override readonly tagName = 'media-captions-radio-group';\n\n  static override properties = {\n    ...MenuRadioGroupElement.properties,\n    disabled: { type: Boolean },\n    label: { type: String },\n  } satisfies PropertyDeclarationMap<'value' | 'label' | 'disabled'>;\n\n  disabled = false;\n  label: Text | string = '';\n  formatTrack = CaptionsRadioGroupCore.defaultProps.formatTrack;\n\n  readonly #core = new CaptionsRadioGroupCore();\n  readonly #i18n = new I18nController(this, i18nContext);\n  readonly #mediaState = new PlayerController(this, playerContext, selectTextTrack);\n  readonly #options = new RadioOptionsController<CaptionsRadioGroupOption>(this, {\n    renderItem: (item, label, option) => this.#setContent(item, label, option.badge),\n    getOptionCacheKey: (option) => option.badge ?? '',\n    setItemAttributes: (item, option) => item.setAttribute('data-track', option.value),\n    onValueChange: (value) => {\n      const media = this.#mediaState.value;\n\n      if (media) this.#core.selectValue(media, value);\n    },\n  });\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.destroyed) return;\n\n    if (__DEV__ && !this.#mediaState.value && this.#mediaState.displayName) {\n      logMissingFeature(this.localName, this.#mediaState.displayName);\n    }\n  }\n\n  protected override update(changed: PropertyValues): void {\n    const media = this.#mediaState.value;\n    let state: CaptionsRadioGroupState | null = null;\n\n    if (media) {\n      this.#core.setProps({ formatTrack: this.formatTrack, disabled: this.disabled, label: this.label });\n      this.#core.setMedia(media);\n      state = this.#core.getState();\n\n      this.applyDefaultAriaLabel(translateText(this.#core.getLabel(state), this.#i18n.value));\n      this.#options.sync(state, this.#i18n.value, this.#i18n.locale);\n      this.publishMenuOptionState(state.disabled, state.hidden, state.availability);\n    } else {\n      this.publishMenuOptionState(true, true, 'unsupported');\n    }\n\n    super.update(changed);\n\n    if (state) applyStateDataAttrs(this, state, CaptionsRadioGroupDataAttrs);\n  }\n\n  #setContent(item: MenuRadioItemElement, label: string, badge: string | undefined): void {\n    const labelPart = item.querySelector<HTMLElement>('[data-part~=\"label\"]');\n    const badgePart = item.querySelector<HTMLElement>('[data-part~=\"badge\"]');\n\n    if (labelPart) {\n      labelPart.textContent = label;\n    }\n\n    if (badgePart) {\n      badgePart.textContent = badge ?? '';\n      badgePart.hidden = !badge;\n    }\n\n    if (!labelPart && !badgePart) {\n      item.textContent = [label, badge].filter(Boolean).join(' ');\n    }\n  }\n}\n\nexport namespace CaptionsRadioGroupElement {\n  export type State = CaptionsRadioGroupState;\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAwBA,IAAa,4BAAb,cAA+C,sBAAsB;;;EASxD,KAAA,WAAA;EACY,KAAA,QAAA;EACT,KAAA,cAAA,uBAAuB,aAAa;EAEjC,KAAA,QAAA,IAAI,uBAAuB;EAC3B,KAAA,QAAA,IAAI,eAAe,MAAM,WAAW;EAC9B,KAAA,cAAA,IAAI,iBAAiB,MAAM,eAAe,eAAe;EAC5D,KAAA,WAAA,IAAI,uBAAiD,MAAM;GAC7E,aAAa,MAAM,OAAO,WAAW,KAAK,YAAY,MAAM,OAAO,OAAO,KAAK;GAC/E,oBAAoB,WAAW,OAAO,SAAS;GAC/C,oBAAoB,MAAM,WAAW,KAAK,aAAa,cAAc,OAAO,KAAK;GACjF,gBAAgB,UAAU;IACxB,MAAM,QAAQ,KAAK,YAAY;IAE/B,IAAI,OAAO,KAAK,MAAM,YAAY,OAAO,KAAK;GAChD;EACF,CAAC;;;EAxBkC,KAAA,UAAA;;;EAEN,KAAA,aAAA;GAC3B,GAAG,sBAAsB;GACzB,UAAU,EAAE,MAAM,QAAQ;GAC1B,OAAO,EAAE,MAAM,OAAO;EACxB;;CAMA;CACA;CACA;CACA;CAWA,oBAAmC;EACjC,MAAM,kBAAkB;EAExB,IAAI,KAAK,WAAW;EAEpB,IAAe,CAAC,KAAK,YAAY,SAAS,KAAK,YAAY,aACzD,kBAAkB,KAAK,WAAW,KAAK,YAAY,WAAW;CAElE;CAEA,OAA0B,SAA+B;EACvD,MAAM,QAAQ,KAAK,YAAY;EAC/B,IAAI,QAAwC;EAE5C,IAAI,OAAO;GACT,KAAK,MAAM,SAAS;IAAE,aAAa,KAAK;IAAa,UAAU,KAAK;IAAU,OAAO,KAAK;GAAM,CAAC;GACjG,KAAK,MAAM,SAAS,KAAK;GACzB,QAAQ,KAAK,MAAM,SAAS;GAE5B,KAAK,sBAAsB,cAAc,KAAK,MAAM,SAAS,KAAK,GAAG,KAAK,MAAM,KAAK,CAAC;GACtF,KAAK,SAAS,KAAK,OAAO,KAAK,MAAM,OAAO,KAAK,MAAM,MAAM;GAC7D,KAAK,uBAAuB,MAAM,UAAU,MAAM,QAAQ,MAAM,YAAY;EAC9E,OACE,KAAK,uBAAuB,MAAM,MAAM,aAAa;EAGvD,MAAM,OAAO,OAAO;EAEpB,IAAI,OAAO,oBAAoB,MAAM,OAAO,2BAA2B;CACzE;CAEA,YAAY,MAA4B,OAAe,OAAiC;EACtF,MAAM,YAAY,KAAK,cAA2B,wBAAsB;EACxE,MAAM,YAAY,KAAK,cAA2B,wBAAsB;EAExE,IAAI,WACF,UAAU,cAAc;EAG1B,IAAI,WAAW;GACb,UAAU,cAAc,SAAS;GACjC,UAAU,SAAS,CAAC;EACtB;EAEA,IAAI,CAAC,aAAa,CAAC,WACjB,KAAK,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAE9D;AACF"}

package/dist/dev/ui/controls/element.d.ts

@@ -3,8 +3,8 @@ import { ControlsVisibility } from "@videojs/core";
 import { PropertyValues } from "@videojs/element";
 //#region src/ui/controls/element.d.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.
  */
 export declare class ControlsElement extends UIElement {
   #private;