@videojs/html 10.0.0-beta.8 → 10.0.0-rc.1

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

@@ -0,0 +1,51 @@
+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.
+*
+* 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.
+*/
+function getTemplateHTML(attrs) {
+	return `
+    <style>
+      :host {
+        position: relative;
+      }
+
+      video {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: var(--media-object-fit, inherit);
+        object-position: var(--media-object-position, 50% 50%);
+      }
+    </style>
+    <slot></slot>
+    <video${serializeAttributes(pick(attrs, [...VideoAttributes]))}></video>
+  `;
+}
+//#endregion
+export { VideoAttributes, getTemplateHTML };
+
+//# sourceMappingURL=template.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,23 @@
+import { CloudflareAdapter } from "@videojs/cloudflare-video";
+//#region src/media/cloudflare-video/adapter.d.ts
+declare const CloudflareCustomMediaElement_base: import("@videojs/utils/types").Constructor<HTMLElement & CloudflareAdapter & {
+  readonly adapter: CloudflareAdapter;
+  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}> & {
+  properties: Record<string, {
+    type: any;
+    attribute?: string;
+    empty?: unknown;
+  }>;
+  getTemplateHTML: (attrs: Record<string, string>) => string;
+  shadowRootOptions: ShadowRootInit;
+  readonly observedAttributes: string[];
+};
+declare class CloudflareCustomMediaElement extends CloudflareCustomMediaElement_base {
+  static getTemplateHTML: (attrs: Record<string, string>) => string;
+}
+declare const CloudflareVideo_base: typeof CloudflareCustomMediaElement;
+declare class CloudflareVideo extends CloudflareVideo_base {}
+//#endregion
+export { CloudflareVideo };
+//# sourceMappingURL=adapter.d.ts.map

package/dist/dev/media/cloudflare-video/adapter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"adapter.d.ts","names":[],"sources":["../../../../src/media/cloudflare-video/adapter.ts"],"mappings":";;;;;;;;;;;;;;;cAMM,qCAAqC;SACzB,kBAAe,OAAW;;;cAiD/B,wBAAwB"}

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

@@ -0,0 +1,57 @@
+import { MediaAttachMixin } from "../../store/media-attach-mixin.js";
+import { CustomMediaElement } from "@videojs/media/dom";
+import { escapeHtml } from "@videojs/utils/string";
+import { CloudflareAdapter, buildCloudflareIframeSrc } from "@videojs/cloudflare-video";
+//#region src/media/cloudflare-video/adapter.ts
+var CloudflareCustomMediaElement = class extends CustomMediaElement("iframe", CloudflareAdapter) {
+	static {
+		this.getTemplateHTML = (attrs) => {
+			const initialSrc = buildCloudflareIframeSrc(attrs.src ?? "", templateAttrsToEmbedProps(attrs));
+			return `
+      <style>
+        :host {
+          display: inline-block;
+          min-width: 300px;
+          min-height: 150px;
+          position: relative;
+        }
+        iframe {
+          position: absolute;
+          inset: 0;
+          width: 100%;
+          height: 100%;
+          border: 0;
+        }
+        :host(:not([controls])) {
+          pointer-events: none;
+        }
+      </style>
+      <iframe
+        part="iframe"
+        ${initialSrc ? ` src="${escapeHtml(initialSrc)}"` : ""}
+        allow="accelerometer; fullscreen; autoplay; encrypted-media; gyroscope; picture-in-picture"
+        allowfullscreen
+        frameborder="0"
+        width="100%"
+        height="100%"
+        referrerpolicy="${escapeHtml(attrs.referrerpolicy ?? "")}"
+      ></iframe>
+    `;
+		};
+	}
+};
+function templateAttrsToEmbedProps(attrs) {
+	return {
+		autoplay: attrs.autoplay !== void 0,
+		defaultMuted: attrs.muted !== void 0,
+		loop: attrs.loop !== void 0,
+		controls: attrs.controls !== void 0,
+		preload: attrs.preload ?? "metadata",
+		poster: attrs.poster ?? ""
+	};
+}
+var CloudflareVideo = class extends MediaAttachMixin(CloudflareCustomMediaElement) {};
+//#endregion
+export { CloudflareVideo };
+
+//# sourceMappingURL=adapter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"adapter.js","names":[],"sources":["../../../../src/media/cloudflare-video/adapter.ts"],"sourcesContent":["import { buildCloudflareIframeSrc, CloudflareAdapter } from '@videojs/cloudflare-video';\nimport { CustomMediaElement } from '@videojs/media/dom';\nimport { escapeHtml } from '@videojs/utils/string';\n\nimport { MediaAttachMixin } from '../../store/media-attach-mixin';\n\nclass CloudflareCustomMediaElement extends CustomMediaElement('iframe', CloudflareAdapter) {\n  static override getTemplateHTML = (attrs: Record<string, string>): string => {\n    const initialSrc = buildCloudflareIframeSrc(attrs.src ?? '', templateAttrsToEmbedProps(attrs));\n    const srcAttr = initialSrc ? ` src=\"${escapeHtml(initialSrc)}\"` : '';\n\n    return /*html*/ `\n      <style>\n        :host {\n          display: inline-block;\n          min-width: 300px;\n          min-height: 150px;\n          position: relative;\n        }\n        iframe {\n          position: absolute;\n          inset: 0;\n          width: 100%;\n          height: 100%;\n          border: 0;\n        }\n        :host(:not([controls])) {\n          pointer-events: none;\n        }\n      </style>\n      <iframe\n        part=\"iframe\"\n        ${srcAttr}\n        allow=\"accelerometer; fullscreen; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n        allowfullscreen\n        frameborder=\"0\"\n        width=\"100%\"\n        height=\"100%\"\n        referrerpolicy=\"${escapeHtml(attrs.referrerpolicy ?? '')}\"\n      ></iframe>\n    `;\n  };\n}\n\nfunction templateAttrsToEmbedProps(attrs: Record<string, string>) {\n  return {\n    autoplay: attrs.autoplay !== undefined,\n    defaultMuted: attrs.muted !== undefined,\n    loop: attrs.loop !== undefined,\n    controls: attrs.controls !== undefined,\n    preload: (attrs.preload as 'none' | 'metadata' | 'auto' | undefined) ?? 'metadata',\n    // The Stream embed paints the poster itself, so it is part of the URL.\n    poster: attrs.poster ?? '',\n  };\n}\n\nexport class CloudflareVideo extends MediaAttachMixin(CloudflareCustomMediaElement) {}\n"],"mappings":";;;;;AAMA,IAAM,+BAAN,cAA2C,mBAAmB,UAAU,iBAAiB,CAAC,CAAC;;EACtD,KAAA,mBAAA,UAA0C;GAC3E,MAAM,aAAa,yBAAyB,MAAM,OAAO,IAAI,0BAA0B,KAAK,CAAC;GAG7F,OAAgB;;;;;;;;;;;;;;;;;;;;;UAFA,aAAa,SAAS,WAAW,UAAU,EAAE,KAAK,GAuBpD;;;;;;0BAMQ,WAAW,MAAM,kBAAkB,EAAE,EAAE;;;EAG/D;;AACF;AAEA,SAAS,0BAA0B,OAA+B;CAChE,OAAO;EACL,UAAU,MAAM,aAAa,KAAA;EAC7B,cAAc,MAAM,UAAU,KAAA;EAC9B,MAAM,MAAM,SAAS,KAAA;EACrB,UAAU,MAAM,aAAa,KAAA;EAC7B,SAAU,MAAM,WAAwD;EAExE,QAAQ,MAAM,UAAU;CAC1B;AACF;AAEA,IAAa,kBAAb,cAAqC,iBAAiB,4BAA4B,CAAC,CAAC,CAAC"}

package/dist/dev/media/cloudflare-video/index.d.ts

@@ -0,0 +1,2 @@
+import { CloudflareVideo } from "./adapter.js";
+export { CloudflareVideo };

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

@@ -0,0 +1,19 @@
+import { DashAdapter } from "@videojs/dash-video";
+//#region src/media/dash-video/adapter.d.ts
+declare const DashVideo_base: import("@videojs/utils/types").Constructor<HTMLElement & DashAdapter & {
+  readonly adapter: DashAdapter;
+  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}> & {
+  properties: Record<string, {
+    type: any;
+    attribute?: string;
+    empty?: unknown;
+  }>;
+  getTemplateHTML: (attrs: Record<string, string>) => string;
+  shadowRootOptions: ShadowRootInit;
+  readonly observedAttributes: string[];
+};
+declare class DashVideo extends DashVideo_base {}
+//#endregion
+export { DashVideo };
+//# sourceMappingURL=adapter.d.ts.map

package/dist/dev/media/dash-video/adapter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"adapter.d.ts","names":[],"sources":["../../../../src/media/dash-video/adapter.ts"],"mappings":";;;;;;;;;;;;;;;cAKa,kBAAkB"}

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

@@ -0,0 +1,9 @@
+import { MediaAttachMixin } from "../../store/media-attach-mixin.js";
+import { CustomMediaElement } from "@videojs/media/dom";
+import { DashAdapter } from "@videojs/dash-video";
+//#region src/media/dash-video/adapter.ts
+var DashVideo = class extends MediaAttachMixin(CustomMediaElement("video", DashAdapter)) {};
+//#endregion
+export { DashVideo };
+
+//# sourceMappingURL=adapter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"adapter.js","names":[],"sources":["../../../../src/media/dash-video/adapter.ts"],"sourcesContent":["import { DashAdapter } from '@videojs/dash-video';\nimport { CustomMediaElement } from '@videojs/media/dom';\n\nimport { MediaAttachMixin } from '../../store/media-attach-mixin';\n\nexport class DashVideo extends MediaAttachMixin(CustomMediaElement('video', DashAdapter)) {}\n"],"mappings":";;;;AAKA,IAAa,YAAb,cAA+B,iBAAiB,mBAAmB,SAAS,WAAW,CAAC,CAAC,CAAC,CAAC"}

package/dist/dev/media/dash-video/index.d.ts

@@ -1,13 +1,2 @@
-import { DashCustomMedia } from "@videojs/core/dom/media/dash";
-
-//#region src/media/dash-video/index.d.ts
-declare const DashVideo_base: typeof DashCustomMedia;
-declare class DashVideo extends DashVideo_base {
-  static getTemplateHTML(attrs: Record<string, string>): string;
-  constructor();
-  attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string | null): void;
-  disconnectedCallback(): void;
-}
-//#endregion
-export { DashVideo };
-//# sourceMappingURL=index.d.ts.map
+import { DashVideo } from "./adapter.js";
+export { DashVideo };

package/dist/dev/media/hls-audio/adapter.d.ts

@@ -0,0 +1,19 @@
+import { HlsAudioAdapter } from "@videojs/spf/hls-audio";
+//#region src/media/hls-audio/adapter.d.ts
+declare const HlsAudio_base: import("@videojs/utils/types").Constructor<HTMLElement & HlsAudioAdapter & {
+  readonly adapter: HlsAudioAdapter;
+  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}> & {
+  properties: Record<string, {
+    type: any;
+    attribute?: string;
+    empty?: unknown;
+  }>;
+  getTemplateHTML: (attrs: Record<string, string>) => string;
+  shadowRootOptions: ShadowRootInit;
+  readonly observedAttributes: string[];
+};
+declare class HlsAudio extends HlsAudio_base {}
+//#endregion
+export { HlsAudio };
+//# sourceMappingURL=adapter.d.ts.map

package/dist/dev/media/hls-audio/adapter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"adapter.d.ts","names":[],"sources":["../../../../src/media/hls-audio/adapter.ts"],"mappings":";;;;;;;;;;;;;;;cAKa,iBAAiB"}

package/dist/dev/media/hls-audio/adapter.js

@@ -0,0 +1,9 @@
+import { MediaAttachMixin } from "../../store/media-attach-mixin.js";
+import { CustomMediaElement } from "@videojs/media/dom";
+import { HlsAudioAdapter } from "@videojs/spf/hls-audio";
+//#region src/media/hls-audio/adapter.ts
+var HlsAudio = class extends MediaAttachMixin(CustomMediaElement("audio", HlsAudioAdapter)) {};
+//#endregion
+export { HlsAudio };
+
+//# sourceMappingURL=adapter.js.map

package/dist/dev/media/hls-audio/adapter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"adapter.js","names":[],"sources":["../../../../src/media/hls-audio/adapter.ts"],"sourcesContent":["import { CustomMediaElement } from '@videojs/media/dom';\nimport { HlsAudioAdapter } from '@videojs/spf/hls-audio';\n\nimport { MediaAttachMixin } from '../../store/media-attach-mixin';\n\nexport class HlsAudio extends MediaAttachMixin(CustomMediaElement('audio', HlsAudioAdapter)) {}\n"],"mappings":";;;;AAKA,IAAa,WAAb,cAA8B,iBAAiB,mBAAmB,SAAS,eAAe,CAAC,CAAC,CAAC,CAAC"}

package/dist/dev/media/hls-audio/index.d.ts

@@ -0,0 +1,2 @@
+import { HlsAudio } from "./adapter.js";
+export { HlsAudio };

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

@@ -0,0 +1,68 @@
+import { getTemplateHTML } from "../background-video/template.js";
+import { Media } from "@videojs/media/dom";
+import { CustomElement } from "@videojs/utils/dom";
+import { HlsVideoMediaError } from "@videojs/spf/hls-background-video";
+import { Constructor } from "@videojs/utils/types";
+//#region src/media/hls-background-video/adapter.d.ts
+declare const HlsBackgroundVideoBase: Constructor<CustomElement>;
+/**
+ * A muted, looping, chrome-less video over the SPF background-video engine.
+ *
+ * The SPF-backed counterpart to `<background-video>`, which plays its source natively. This one streams HLS through the
+ * engine, which pins a single rendition for the session rather than adapting, and drops audio and text handling
+ * entirely — the shape an ambient hero video actually wants.
+ *
+ * Nearer an image than a player, and `src` is the whole surface. Replaces the standalone `mux-background-video`
+ * 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.
+ *
+ * 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.
+ *
+ * Nothing about an unplayable source reaches the inner `<video>` on its own, so `error` on it stays null and the
+ * element sits at `readyState 0`. The engine reports each condition and logs it, the Media promotes the fatal one, and
+ * this element re-fires it as its own `error` / `'error'` — the one place a consumer holding the element can see a
+ * source that never appears.
+ *
+ * @example
+ *   ```html
+ *   <hls-background-video src="https://stream.mux.com/PLAYBACK_ID.m3u8?max_resolution=720p">
+ *   <img src="https://image.mux.com/PLAYBACK_ID/thumbnail.webp?time=0" alt="" />
+ *   </hls-background-video>
+ *   ```;
+ *
+ * @fires error - Fired when a fatal condition is reported. Read `error` for it.
+ *
+ *   `<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.
+ */
+declare class HlsBackgroundVideo extends HlsBackgroundVideoBase {
+  #private;
+  static shadowRootOptions: {
+    mode: ShadowRootMode;
+  };
+  static getTemplateHTML: typeof getTemplateHTML;
+  static get observedAttributes(): string[];
+  constructor();
+  /** Register the Media (not the inner `<video>`) with the provider. */
+  getMediaTarget(): Media | null;
+  disconnectedCallback(): void;
+  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+  /** The inner `<video>` the engine renders into. */
+  get video(): HTMLVideoElement | null;
+  /**
+   * What made the current source unplayable, or `null`. An SVTA code rather than a `MediaError` one — 99001 where this
+   * player has no pipeline for what the source needs, with the specifics logged. Reset by a new source, and not on the
+   * inner `<video>`, which never learns of it.
+   */
+  get error(): HlsVideoMediaError | null;
+  /** HLS manifest URL. Assigning a new one restarts playback from scratch. */
+  get src(): string;
+  set src(value: string);
+}
+//#endregion
+export { HlsBackgroundVideo };
+//# sourceMappingURL=adapter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"adapter.d.ts","names":[],"sources":["../../../../src/media/hls-background-video/adapter.ts"],"mappings":";;;;;;cAaM,wBAAyE,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAsC9E,2BAA2B;;SAC/B;IAAsB,MAAgB;;SACtC,wBAAe;aAEX;EAMX;;EAkCA,kBAAkB;EAIT;EAYT,yBAAyB,cAAc,yBAAyB;;MAO5D,SAAS;;;;;;MAWT,SAAS;;MAKT;MAIA,IAAI"}

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

@@ -0,0 +1,111 @@
+import { MediaAttachMixin } from "../../store/media-attach-mixin.js";
+import { getTemplateHTML } from "../background-video/template.js";
+import { namedNodeMapToObject } from "@videojs/utils/dom";
+import { HlsBackgroundVideoAdapter } from "@videojs/spf/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.
+*
+* The SPF-backed counterpart to `<background-video>`, which plays its source natively. This one streams HLS through the
+* engine, which pins a single rendition for the session rather than adapting, and drops audio and text handling
+* entirely — the shape an ambient hero video actually wants.
+*
+* Nearer an image than a player, and `src` is the whole surface. Replaces the standalone `mux-background-video`
+* 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.
+*
+* 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.
+*
+* Nothing about an unplayable source reaches the inner `<video>` on its own, so `error` on it stays null and the
+* element sits at `readyState 0`. The engine reports each condition and logs it, the Media promotes the fatal one, and
+* this element re-fires it as its own `error` / `'error'` — the one place a consumer holding the element can see a
+* source that never appears.
+*
+* @example
+*   ```html
+*   <hls-background-video src="https://stream.mux.com/PLAYBACK_ID.m3u8?max_resolution=720p">
+*   <img src="https://image.mux.com/PLAYBACK_ID/thumbnail.webp?time=0" alt="" />
+*   </hls-background-video>
+*   ```;
+*
+* @fires error - Fired when a fatal condition is reported. Read `error` for it.
+*
+*   `<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 {
+	static {
+		this.shadowRootOptions = { mode: "open" };
+	}
+	static {
+		this.getTemplateHTML = getTemplateHTML;
+	}
+	static get observedAttributes() {
+		return ["src"];
+	}
+	#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);
+		this.#media.addEventListener("error", () => this.dispatchEvent(new Event("error")));
+	}
+	/** Register the Media (not the inner `<video>`) with the provider. */
+	getMediaTarget() {
+		return this.#media;
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback?.();
+		if (this.hasAttribute("keep-alive")) return;
+		queueMicrotask(() => {
+			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. */
+	get video() {
+		const video = this.shadowRoot?.querySelector("video");
+		return video instanceof HTMLVideoElement ? video : null;
+	}
+	/**
+	* What made the current source unplayable, or `null`. An SVTA code rather than a `MediaError` one — 99001 where this
+	* player has no pipeline for what the source needs, with the specifics logged. Reset by a new source, and not on the
+	* inner `<video>`, which never learns of it.
+	*/
+	get error() {
+		return this.#media.error;
+	}
+	/** HLS manifest URL. Assigning a new one restarts playback from scratch. */
+	get src() {
+		return this.#media.src;
+	}
+	set src(value) {
+		this.#media.src = value;
+	}
+};
+//#endregion
+export { HlsBackgroundVideo };
+
+//# sourceMappingURL=adapter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"adapter.js","names":["#media"],"sources":["../../../../src/media/hls-background-video/adapter.ts"],"sourcesContent":["import type { Media } from '@videojs/media/dom';\nimport { HlsBackgroundVideoAdapter, type HlsVideoMediaError } from '@videojs/spf/hls-background-video';\nimport { type CustomElement, namedNodeMapToObject } from '@videojs/utils/dom';\nimport type { Constructor } from '@videojs/utils/types';\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. `CustomElement` declares the lifecycle\n// callbacks this element overrides.\nconst HlsBackgroundVideoBase = MediaAttachMixin(HTMLElementBase) as unknown as Constructor<CustomElement>;\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  override disconnectedCallback(): void {\n    super.disconnectedCallback?.();\n\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":";;;;;AAQA,MAAM,kBAAkB,WAAW,eAAe,MAAM,CAAC;AAKzD,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,KAAKA,OAAO,OAAO,KAAK;EAKnC,KAAKA,OAAO,iBAAiB,eAAe,KAAK,cAAc,IAAI,MAAM,OAAO,CAAC,CAAC;CACpF;;CAGA,iBAA+B;EAC7B,OAAO,KAAKA;CACd;CAEA,uBAAsC;EACpC,MAAM,uBAAuB;EAE7B,IAAI,KAAK,aAAa,YAAY,GAAG;EAIrC,qBAAqB;GACnB,IAAI,CAAC,KAAK,aAAa,KAAKA,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,KAAKA,OAAO;CACrB;;CAGA,IAAI,MAAc;EAChB,OAAO,KAAKA,OAAO;CACrB;CAEA,IAAI,IAAI,OAAe;EACrB,KAAKA,OAAO,MAAM;CACpB;AACF"}

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

@@ -0,0 +1,2 @@
+import { HlsBackgroundVideo } from "./adapter.js";
+export { HlsBackgroundVideo };

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

@@ -0,0 +1,19 @@
+import { HlsVideoAdapter } from "@videojs/spf/hls-video";
+//#region src/media/hls-video/adapter.d.ts
+declare const HlsVideo_base: import("@videojs/utils/types").Constructor<HTMLElement & HlsVideoAdapter & {
+  readonly adapter: HlsVideoAdapter;
+  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}> & {
+  properties: Record<string, {
+    type: any;
+    attribute?: string;
+    empty?: unknown;
+  }>;
+  getTemplateHTML: (attrs: Record<string, string>) => string;
+  shadowRootOptions: ShadowRootInit;
+  readonly observedAttributes: string[];
+};
+declare class HlsVideo extends HlsVideo_base {}
+//#endregion
+export { HlsVideo };
+//# sourceMappingURL=adapter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"adapter.d.ts","names":[],"sources":["../../../../src/media/hls-video/adapter.ts"],"mappings":";;;;;;;;;;;;;;;cAKa,iBAAiB"}

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

@@ -0,0 +1,9 @@
+import { MediaAttachMixin } from "../../store/media-attach-mixin.js";
+import { CustomMediaElement } from "@videojs/media/dom";
+import { HlsVideoAdapter } from "@videojs/spf/hls-video";
+//#region src/media/hls-video/adapter.ts
+var HlsVideo = class extends MediaAttachMixin(CustomMediaElement("video", HlsVideoAdapter)) {};
+//#endregion
+export { HlsVideo };
+
+//# sourceMappingURL=adapter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"adapter.js","names":[],"sources":["../../../../src/media/hls-video/adapter.ts"],"sourcesContent":["import { CustomMediaElement } from '@videojs/media/dom';\nimport { HlsVideoAdapter } from '@videojs/spf/hls-video';\n\nimport { MediaAttachMixin } from '../../store/media-attach-mixin';\n\nexport class HlsVideo extends MediaAttachMixin(CustomMediaElement('video', HlsVideoAdapter)) {}\n"],"mappings":";;;;AAKA,IAAa,WAAb,cAA8B,iBAAiB,mBAAmB,SAAS,eAAe,CAAC,CAAC,CAAC,CAAC"}

package/dist/dev/media/hls-video/index.d.ts

@@ -1,13 +1,2 @@
-import { HlsCustomMedia } from "@videojs/core/dom/media/hls";
-
-//#region src/media/hls-video/index.d.ts
-declare const HlsVideo_base: typeof HlsCustomMedia;
-declare class HlsVideo extends HlsVideo_base {
-  static getTemplateHTML(attrs: Record<string, string>): string;
-  constructor();
-  attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string | null): void;
-  disconnectedCallback(): void;
-}
-//#endregion
-export { HlsVideo };
-//# sourceMappingURL=index.d.ts.map
+import { HlsVideo } from "./adapter.js";
+export { HlsVideo };

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

@@ -0,0 +1,19 @@
+import { HlsJsAdapter } from "@videojs/hlsjs-video";
+//#region src/media/hlsjs-video/adapter.d.ts
+declare const HlsJsVideo_base: import("@videojs/utils/types").Constructor<HTMLElement & HlsJsAdapter & {
+  readonly adapter: HlsJsAdapter;
+  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}> & {
+  properties: Record<string, {
+    type: any;
+    attribute?: string;
+    empty?: unknown;
+  }>;
+  getTemplateHTML: (attrs: Record<string, string>) => string;
+  shadowRootOptions: ShadowRootInit;
+  readonly observedAttributes: string[];
+};
+declare class HlsJsVideo extends HlsJsVideo_base {}
+//#endregion
+export { HlsJsVideo };
+//# sourceMappingURL=adapter.d.ts.map

package/dist/dev/media/hlsjs-video/adapter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"adapter.d.ts","names":[],"sources":["../../../../src/media/hlsjs-video/adapter.ts"],"mappings":";;;;;;;;;;;;;;;cAKa,mBAAmB"}

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

@@ -0,0 +1,9 @@
+import { MediaAttachMixin } from "../../store/media-attach-mixin.js";
+import { CustomMediaElement } from "@videojs/media/dom";
+import { HlsJsAdapter } from "@videojs/hlsjs-video";
+//#region src/media/hlsjs-video/adapter.ts
+var HlsJsVideo = class extends MediaAttachMixin(CustomMediaElement("video", HlsJsAdapter)) {};
+//#endregion
+export { HlsJsVideo };
+
+//# sourceMappingURL=adapter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"adapter.js","names":[],"sources":["../../../../src/media/hlsjs-video/adapter.ts"],"sourcesContent":["import { HlsJsAdapter } from '@videojs/hlsjs-video';\nimport { CustomMediaElement } from '@videojs/media/dom';\n\nimport { MediaAttachMixin } from '../../store/media-attach-mixin';\n\nexport class HlsJsVideo extends MediaAttachMixin(CustomMediaElement('video', HlsJsAdapter)) {}\n"],"mappings":";;;;AAKA,IAAa,aAAb,cAAgC,iBAAiB,mBAAmB,SAAS,YAAY,CAAC,CAAC,CAAC,CAAC"}

package/dist/dev/media/hlsjs-video/index.d.ts

@@ -0,0 +1,2 @@
+import { HlsJsVideo } from "./adapter.js";
+export { HlsJsVideo };

package/dist/dev/media/mux-audio/hls-js.d.ts

@@ -0,0 +1,19 @@
+import { MuxAudioAdapter } from "@videojs/mux-audio";
+//#region src/media/mux-audio/hls-js.d.ts
+declare const MuxAudioBase: import("@videojs/utils/types").Constructor<HTMLElement & MuxAudioAdapter & {
+  readonly adapter: MuxAudioAdapter;
+  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}> & {
+  properties: Record<string, {
+    type: any;
+    attribute?: string;
+    empty?: unknown;
+  }>;
+  getTemplateHTML: (attrs: Record<string, string>) => string;
+  shadowRootOptions: ShadowRootInit;
+  readonly observedAttributes: string[];
+};
+declare class MuxAudio extends MuxAudioBase {}
+//#endregion
+export { MuxAudio };
+//# sourceMappingURL=hls-js.d.ts.map

package/dist/dev/media/mux-audio/hls-js.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hls-js.d.ts","names":[],"sources":["../../../../src/media/mux-audio/hls-js.ts"],"mappings":";;cAMM,6CAAY,YAAA,cAAA;;;;;;;;;;;;;cAEL,iBAAiB"}

package/dist/dev/media/mux-audio/hls-js.js

@@ -0,0 +1,11 @@
+import { MediaAttachMixin } from "../../store/media-attach-mixin.js";
+import { MuxAudioMixin } from "./mixin.js";
+import { CustomMediaElement } from "@videojs/media/dom";
+import { MuxAudioAdapter } from "@videojs/mux-audio";
+//#region src/media/mux-audio/hls-js.ts
+const MuxAudioBase = MuxAudioMixin(MediaAttachMixin(CustomMediaElement("audio", MuxAudioAdapter)));
+var MuxAudio = class extends MuxAudioBase {};
+//#endregion
+export { MuxAudio };
+
+//# sourceMappingURL=hls-js.js.map

package/dist/dev/media/mux-audio/hls-js.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hls-js.js","names":[],"sources":["../../../../src/media/mux-audio/hls-js.ts"],"sourcesContent":["import { CustomMediaElement } from '@videojs/media/dom';\nimport { MuxAudioAdapter } from '@videojs/mux-audio';\n\nimport { MediaAttachMixin } from '../../store/media-attach-mixin';\nimport { MuxAudioMixin } from './mixin';\n\nconst MuxAudioBase = MuxAudioMixin(MediaAttachMixin(CustomMediaElement('audio', MuxAudioAdapter)));\n\nexport class MuxAudio extends MuxAudioBase {}\n"],"mappings":";;;;;AAMA,MAAM,eAAe,cAAc,iBAAiB,mBAAmB,SAAS,eAAe,CAAC,CAAC;AAEjG,IAAa,WAAb,cAA8B,aAAa,CAAC"}

package/dist/dev/media/mux-audio/mixin.js

@@ -0,0 +1,29 @@
+//#region src/media/mux-audio/mixin.ts
+/**
+* The Mux-specific element behavior for audio, over any Mux Media: reflecting the derived `src` back to the attribute.
+*
+* Much thinner than {@link MuxVideoMixin} because the rest of what that one does has no meaning here — Mux publishes no
+* poster or storyboard for an audio-only asset, and an `<audio>` element renders neither.
+*
+* A mixin rather than a base class for the same reason as the video one: each flavor's element is built on a different
+* `CustomMediaElement`, so there is no common class to extend, only a common adapter contract.
+*/
+function MuxAudioMixin(BaseClass) {
+	class MuxAudioElement extends BaseClass {
+		constructor(...args) {
+			super(...args);
+			this.adapter.addEventListener("sourcechange", () => this.#reflectSrc());
+		}
+		#reflectSrc() {
+			const src = this.adapter.src;
+			if (src) {
+				if (this.getAttribute("src") !== src) this.setAttribute("src", src);
+			} else if (this.hasAttribute("src")) this.removeAttribute("src");
+		}
+	}
+	return MuxAudioElement;
+}
+//#endregion
+export { MuxAudioMixin };
+
+//# sourceMappingURL=mixin.js.map