@videojs/html 10.0.0-alpha.3 → 10.0.0-alpha.4

package/dist/default/define/background/skin.css

@@ -0,0 +1,27 @@
+background-video-player {
+  display: contents;
+}
+
+background-video-skin {
+  display: block;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  --media-object-fit: cover;
+  object-fit: var(--media-object-fit);
+}
+
+background-video-skin > [slot="media"] {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: inherit;
+}
+
+background-video-skin > img,
+background-video-skin > picture {
+  width: 100%;
+  height: 100%;
+  object-fit: inherit;
+}

package/dist/default/define/background/skin.js

@@ -0,0 +1,34 @@
+import { ReactiveElement } from "@videojs/element";
+import { namedNodeMapToObject } from "@videojs/utils/dom";
+
+//#region src/define/background/skin.ts
+function getTemplateHTML(_attrs) {
+	return `
+    <media-container>
+      <slot name="media" slot="media"></slot>
+    </media-container>
+  `;
+}
+var BackgroundVideoSkinElement = class extends ReactiveElement {
+	static {
+		this.tagName = "background-video-skin";
+	}
+	static {
+		this.shadowRootOptions = { mode: "open" };
+	}
+	static {
+		this.getTemplateHTML = getTemplateHTML;
+	}
+	constructor() {
+		super();
+		if (!this.shadowRoot) {
+			this.attachShadow(this.constructor.shadowRootOptions);
+			this.shadowRoot.innerHTML = getTemplateHTML(namedNodeMapToObject(this.attributes));
+		}
+	}
+};
+customElements.define(BackgroundVideoSkinElement.tagName, BackgroundVideoSkinElement);
+
+//#endregion
+export { BackgroundVideoSkinElement };
+//# sourceMappingURL=skin.js.map

package/dist/default/define/background/skin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skin.js","names":[],"sources":["../../../../src/define/background/skin.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { namedNodeMapToObject } from '@videojs/utils/dom';\n\nfunction getTemplateHTML(_attrs: Record<string, string>) {\n  return /*html*/ `\n    <media-container>\n      <slot name=\"media\" slot=\"media\"></slot>\n    </media-container>\n  `;\n}\n\nexport class BackgroundVideoSkinElement extends ReactiveElement {\n  static readonly tagName = 'background-video-skin';\n  static shadowRootOptions = { mode: 'open' as ShadowRootMode };\n  static getTemplateHTML = getTemplateHTML;\n\n  constructor() {\n    super();\n\n    if (!this.shadowRoot) {\n      this.attachShadow((this.constructor as typeof BackgroundVideoSkinElement).shadowRootOptions);\n      this.shadowRoot!.innerHTML = getTemplateHTML(namedNodeMapToObject(this.attributes));\n    }\n  }\n}\n\ncustomElements.define(BackgroundVideoSkinElement.tagName, BackgroundVideoSkinElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [BackgroundVideoSkinElement.tagName]: BackgroundVideoSkinElement;\n  }\n}\n"],"mappings":";;;;AAGA,SAAS,gBAAgB,QAAgC;AACvD,QAAgB;;;;;;AAOlB,IAAa,6BAAb,cAAgD,gBAAgB;;iBACpC;;;2BACC,EAAE,MAAM,QAA0B;;;yBACpC;;CAEzB,cAAc;AACZ,SAAO;AAEP,MAAI,CAAC,KAAK,YAAY;AACpB,QAAK,aAAc,KAAK,YAAkD,kBAAkB;AAC5F,QAAK,WAAY,YAAY,gBAAgB,qBAAqB,KAAK,WAAW,CAAC;;;;AAKzF,eAAe,OAAO,2BAA2B,SAAS,2BAA2B"}

package/dist/default/define/background/video.js

@@ -0,0 +1,3 @@
+import { BackgroundVideoElement } from "../media/background-video.js";
+
+export { BackgroundVideoElement };

package/dist/default/media/background-video/index.js

@@ -1,4 +1,4 @@
-import { CustomMediaMixin } from "@videojs/core/dom/media/custom-media-element";
+import { namedNodeMapToObject } from "@videojs/utils/dom";
 
 //#region src/media/background-video/index.ts
 function getTemplateHTML(attrs) {
@@ -13,20 +13,24 @@ function getTemplateHTML(attrs) {
         inset: 0;
         width: 100%;
         height: 100%;
-        object-fit: inherit;
+        object-fit: var(--media-object-fit, inherit);
+        object-position: var(--media-object-position, 50% 50%);
       }
     </style>
     <slot></slot>
     <video ${serializeAttributes(attrs)}></video>
   `;
 }
-var BackgroundVideo = class extends CustomMediaMixin(HTMLElement, { tag: "video" }) {
+var BackgroundVideo = class extends HTMLElement {
 	static {
 		this.shadowRootOptions = { mode: "open" };
 	}
 	static {
 		this.getTemplateHTML = getTemplateHTML;
 	}
+	static get observedAttributes() {
+		return ["src"];
+	}
 	constructor() {
 		super();
 		if (!this.shadowRoot) {
@@ -42,13 +46,15 @@ var BackgroundVideo = class extends CustomMediaMixin(HTMLElement, { tag: "video"
 			};
 			this.shadowRoot.innerHTML = getTemplateHTML(attrs);
 		}
+		this.target.muted = !this.hasAttribute("nomuted");
+	}
+	attributeChangedCallback(attrName, oldValue, newValue) {
+		if (attrName === "src" && oldValue !== newValue) this.target.src = newValue ?? "";
+	}
+	get target() {
+		return this.querySelector(":scope > [slot=media]") ?? this.querySelector("video") ?? this.shadowRoot?.querySelector("video") ?? null;
 	}
 };
-function namedNodeMapToObject(namedNodeMap) {
-	const obj = {};
-	for (const attr of namedNodeMap) obj[attr.name] = attr.value;
-	return obj;
-}
 const VideoAttributes = [
 	"autoplay",
 	"controls",

package/dist/default/media/background-video/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/background-video/index.ts"],"sourcesContent":["import { CustomMediaMixin } from '@videojs/core/dom/media/custom-media-element';\n\nfunction 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: inherit;\n      }\n    </style>\n    <slot></slot>\n    <video ${serializeAttributes(attrs)}></video>\n  `;\n}\n\nexport class BackgroundVideo extends CustomMediaMixin(HTMLElement, { tag: 'video' }) {\n  static shadowRootOptions = { mode: 'open' as ShadowRootMode };\n  static getTemplateHTML = getTemplateHTML;\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}\n\nfunction namedNodeMapToObject(namedNodeMap: NamedNodeMap) {\n  const obj: Record<string, string> = {};\n  for (const attr of namedNodeMap) {\n    obj[attr.name] = attr.value;\n  }\n  return obj;\n}\n\nconst 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\nfunction serializeAttributes(attrs: Record<string, string>): string {\n  let html = '';\n  for (const key in attrs) {\n    // Skip forwarding non native video attributes.\n    if (!VideoAttributes.includes(key as any)) continue;\n\n    const value = attrs[key];\n    if (value === '') html += ` ${key}`;\n    else html += ` ${key}=\"${value}\"`;\n  }\n  return html;\n}\n"],"mappings":";;;AAEA,SAAS,gBAAgB,OAA+B;AACtD,QAAgB;;;;;;;;;;;;;;;aAeL,oBAAoB,MAAM,CAAC;;;AAIxC,IAAa,kBAAb,cAAqC,iBAAiB,aAAa,EAAE,KAAK,SAAS,CAAC,CAAC;;2BACxD,EAAE,MAAM,QAA0B;;;yBACpC;;CAEzB,cAAc;AACZ,SAAO;AAEP,MAAI,CAAC,KAAK,YAAY;AACpB,QAAK,aAAc,KAAK,YAAuC,kBAAkB;GAEjF,MAAM,QAAQ;IACZ,GAAG,qBAAqB,KAAK,WAAW;IACxC,GAAI,CAAC,KAAK,aAAa,UAAU,IAAI,EAAE,OAAO,IAAI;IAClD,GAAI,CAAC,KAAK,aAAa,SAAS,IAAI,EAAE,MAAM,IAAI;IAChD,GAAI,CAAC,KAAK,aAAa,aAAa,IAAI,EAAE,UAAU,IAAI;IACxD,aAAa;IACb,uBAAuB;IACvB,yBAAyB;IAC1B;AAED,QAAK,WAAY,YAAY,gBAAgB,MAAM;;;;AAKzD,SAAS,qBAAqB,cAA4B;CACxD,MAAM,MAA8B,EAAE;AACtC,MAAK,MAAM,QAAQ,aACjB,KAAI,KAAK,QAAQ,KAAK;AAExB,QAAO;;AAGT,MAAM,kBAAkB;CACtB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,SAAS,oBAAoB,OAAuC;CAClE,IAAI,OAAO;AACX,MAAK,MAAM,OAAO,OAAO;AAEvB,MAAI,CAAC,gBAAgB,SAAS,IAAW,CAAE;EAE3C,MAAM,QAAQ,MAAM;AACpB,MAAI,UAAU,GAAI,SAAQ,IAAI;MACzB,SAAQ,IAAI,IAAI,IAAI,MAAM;;AAEjC,QAAO"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/background-video/index.ts"],"sourcesContent":["import { namedNodeMapToObject } from '@videojs/utils/dom';\n\nfunction 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// Don't extend CustomMediaMixin to save some bytes, background videos don't need the full Media API.\nexport class BackgroundVideo extends HTMLElement {\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  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    return (\n      this.querySelector(':scope > [slot=media]') ??\n      this.querySelector('video') ??\n      this.shadowRoot?.querySelector('video') ??\n      null\n    );\n  }\n}\n\nconst 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\nfunction serializeAttributes(attrs: Record<string, string>): string {\n  let html = '';\n  for (const key in attrs) {\n    // Skip forwarding non native video attributes.\n    if (!VideoAttributes.includes(key as any)) continue;\n\n    const value = attrs[key];\n    if (value === '') html += ` ${key}`;\n    else html += ` ${key}=\"${value}\"`;\n  }\n  return html;\n}\n"],"mappings":";;;AAEA,SAAS,gBAAgB,OAA+B;AACtD,QAAgB;;;;;;;;;;;;;;;;aAgBL,oBAAoB,MAAM,CAAC;;;AAKxC,IAAa,kBAAb,cAAqC,YAAY;;2BACpB,EAAE,MAAM,QAA0B;;;yBACpC;;CACzB,WAAW,qBAAqB;AAC9B,SAAO,CAAC,MAAM;;CAGhB,cAAc;AACZ,SAAO;AAEP,MAAI,CAAC,KAAK,YAAY;AACpB,QAAK,aAAc,KAAK,YAAuC,kBAAkB;GAEjF,MAAM,QAAQ;IACZ,GAAG,qBAAqB,KAAK,WAAW;IACxC,GAAI,CAAC,KAAK,aAAa,UAAU,IAAI,EAAE,OAAO,IAAI;IAClD,GAAI,CAAC,KAAK,aAAa,SAAS,IAAI,EAAE,MAAM,IAAI;IAChD,GAAI,CAAC,KAAK,aAAa,aAAa,IAAI,EAAE,UAAU,IAAI;IACxD,aAAa;IACb,uBAAuB;IACvB,yBAAyB;IAC1B;AAED,QAAK,WAAY,YAAY,gBAAgB,MAAM;;AAMrD,OAAK,OAAQ,QAAQ,CAAC,KAAK,aAAa,UAAU;;CAGpD,yBAAyB,UAAkB,UAAyB,UAA+B;AACjG,MAAI,aAAa,SAAS,aAAa,SACrC,MAAK,OAAQ,MAAM,YAAY;;CAInC,IAAI,SAAkC;AACpC,SACE,KAAK,cAAc,wBAAwB,IAC3C,KAAK,cAAc,QAAQ,IAC3B,KAAK,YAAY,cAAc,QAAQ,IACvC;;;AAKN,MAAM,kBAAkB;CACtB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,SAAS,oBAAoB,OAAuC;CAClE,IAAI,OAAO;AACX,MAAK,MAAM,OAAO,OAAO;AAEvB,MAAI,CAAC,gBAAgB,SAAS,IAAW,CAAE;EAE3C,MAAM,QAAQ,MAAM;AACpB,MAAI,UAAU,GAAI,SAAQ,IAAI;MACzB,SAAQ,IAAI,IAAI,IAAI,MAAM;;AAEjC,QAAO"}

package/dist/dev/define/background/skin.css

@@ -0,0 +1,27 @@
+background-video-player {
+  display: contents;
+}
+
+background-video-skin {
+  display: block;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  --media-object-fit: cover;
+  object-fit: var(--media-object-fit);
+}
+
+background-video-skin > [slot="media"] {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: inherit;
+}
+
+background-video-skin > img,
+background-video-skin > picture {
+  width: 100%;
+  height: 100%;
+  object-fit: inherit;
+}

package/dist/dev/define/background/skin.d.ts

@@ -1 +1,20 @@
-export { };
+import { ReactiveElement } from "@videojs/element";
+
+//#region src/define/background/skin.d.ts
+declare function getTemplateHTML(_attrs: Record<string, string>): string;
+declare class BackgroundVideoSkinElement extends ReactiveElement {
+  static readonly tagName = "background-video-skin";
+  static shadowRootOptions: {
+    mode: ShadowRootMode;
+  };
+  static getTemplateHTML: typeof getTemplateHTML;
+  constructor();
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    [BackgroundVideoSkinElement.tagName]: BackgroundVideoSkinElement;
+  }
+}
+//#endregion
+export { BackgroundVideoSkinElement };
+//# sourceMappingURL=skin.d.ts.map

package/dist/dev/define/background/skin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skin.d.ts","names":[],"sources":["../../../../src/define/background/skin.ts"],"mappings":";;;iBAGS,eAAA,CAAgB,MAAA,EAAQ,MAAA;AAAA,cAQpB,0BAAA,SAAmC,eAAA;EAAA,gBAC9B,OAAA;EAAA,OACT,iBAAA;UAAsC,cAAA;EAAA;EAAA,OACtC,eAAA,SAAe,eAAA;;;QAchB,MAAA;EAAA,UACI,qBAAA;IAAA,CACP,0BAAA,CAA2B,OAAA,GAAU,0BAAA;EAAA;AAAA"}

package/dist/dev/define/background/skin.js

@@ -0,0 +1,34 @@
+import { ReactiveElement } from "@videojs/element";
+import { namedNodeMapToObject } from "@videojs/utils/dom";
+
+//#region src/define/background/skin.ts
+function getTemplateHTML(_attrs) {
+	return `
+    <media-container>
+      <slot name="media" slot="media"></slot>
+    </media-container>
+  `;
+}
+var BackgroundVideoSkinElement = class extends ReactiveElement {
+	static {
+		this.tagName = "background-video-skin";
+	}
+	static {
+		this.shadowRootOptions = { mode: "open" };
+	}
+	static {
+		this.getTemplateHTML = getTemplateHTML;
+	}
+	constructor() {
+		super();
+		if (!this.shadowRoot) {
+			this.attachShadow(this.constructor.shadowRootOptions);
+			this.shadowRoot.innerHTML = getTemplateHTML(namedNodeMapToObject(this.attributes));
+		}
+	}
+};
+customElements.define(BackgroundVideoSkinElement.tagName, BackgroundVideoSkinElement);
+
+//#endregion
+export { BackgroundVideoSkinElement };
+//# sourceMappingURL=skin.js.map

package/dist/dev/define/background/skin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skin.js","names":[],"sources":["../../../../src/define/background/skin.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { namedNodeMapToObject } from '@videojs/utils/dom';\n\nfunction getTemplateHTML(_attrs: Record<string, string>) {\n  return /*html*/ `\n    <media-container>\n      <slot name=\"media\" slot=\"media\"></slot>\n    </media-container>\n  `;\n}\n\nexport class BackgroundVideoSkinElement extends ReactiveElement {\n  static readonly tagName = 'background-video-skin';\n  static shadowRootOptions = { mode: 'open' as ShadowRootMode };\n  static getTemplateHTML = getTemplateHTML;\n\n  constructor() {\n    super();\n\n    if (!this.shadowRoot) {\n      this.attachShadow((this.constructor as typeof BackgroundVideoSkinElement).shadowRootOptions);\n      this.shadowRoot!.innerHTML = getTemplateHTML(namedNodeMapToObject(this.attributes));\n    }\n  }\n}\n\ncustomElements.define(BackgroundVideoSkinElement.tagName, BackgroundVideoSkinElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [BackgroundVideoSkinElement.tagName]: BackgroundVideoSkinElement;\n  }\n}\n"],"mappings":";;;;AAGA,SAAS,gBAAgB,QAAgC;AACvD,QAAgB;;;;;;AAOlB,IAAa,6BAAb,cAAgD,gBAAgB;;iBACpC;;;2BACC,EAAE,MAAM,QAA0B;;;yBACpC;;CAEzB,cAAc;AACZ,SAAO;AAEP,MAAI,CAAC,KAAK,YAAY;AACpB,QAAK,aAAc,KAAK,YAAkD,kBAAkB;AAC5F,QAAK,WAAY,YAAY,gBAAgB,qBAAqB,KAAK,WAAW,CAAC;;;;AAKzF,eAAe,OAAO,2BAA2B,SAAS,2BAA2B"}

package/dist/dev/define/background/video.d.ts

@@ -0,0 +1,2 @@
+import { BackgroundVideoElement } from "../media/background-video.js";
+export { BackgroundVideoElement };

package/dist/dev/define/background/video.js

@@ -0,0 +1,3 @@
+import { BackgroundVideoElement } from "../media/background-video.js";
+
+export { BackgroundVideoElement };

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

@@ -1,14 +1,14 @@
-import * as _videojs_core_dom_media_custom_media_element0 from "@videojs/core/dom/media/custom-media-element";
-
 //#region src/media/background-video/index.d.ts
 declare function getTemplateHTML(attrs: Record<string, string>): string;
-declare const BackgroundVideo_base: _videojs_core_dom_media_custom_media_element0.CustomVideoElement;
-declare class BackgroundVideo extends BackgroundVideo_base {
+declare class BackgroundVideo extends HTMLElement {
   static shadowRootOptions: {
     mode: ShadowRootMode;
   };
   static getTemplateHTML: typeof getTemplateHTML;
+  static get observedAttributes(): string[];
   constructor();
+  attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string | null): void;
+  get target(): HTMLVideoElement | null;
 }
 //#endregion
 export { BackgroundVideo };

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/media/background-video/index.ts"],"mappings":";;;iBAES,eAAA,CAAgB,KAAA,EAAO,MAAA;AAAA,cAAsB,oBAAA;cAoBzC,eAAA,SAAwB,oBAAA;EAAA,OAC5B,iBAAA;UAAsC,cAAA;EAAA;EAAA,OACtC,eAAA,SAAe,eAAA"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/media/background-video/index.ts"],"mappings":";iBAES,eAAA,CAAgB,KAAA,EAAO,MAAA;AAAA,cAsBnB,eAAA,SAAwB,WAAA;EAAA,OAC5B,iBAAA;UAAsC,cAAA;EAAA;EAAA,OACtC,eAAA,SAAe,eAAA;EAAA,WACX,kBAAA,CAAA;;EA6BX,wBAAA,CAAyB,QAAA,UAAkB,QAAA,iBAAyB,QAAA;EAAA,IAMhE,MAAA,CAAA,GAAU,gBAAA;AAAA"}

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

@@ -1,4 +1,4 @@
-import { CustomMediaMixin } from "@videojs/core/dom/media/custom-media-element";
+import { namedNodeMapToObject } from "@videojs/utils/dom";
 
 //#region src/media/background-video/index.ts
 function getTemplateHTML(attrs) {
@@ -13,20 +13,24 @@ function getTemplateHTML(attrs) {
         inset: 0;
         width: 100%;
         height: 100%;
-        object-fit: inherit;
+        object-fit: var(--media-object-fit, inherit);
+        object-position: var(--media-object-position, 50% 50%);
       }
     </style>
     <slot></slot>
     <video ${serializeAttributes(attrs)}></video>
   `;
 }
-var BackgroundVideo = class extends CustomMediaMixin(HTMLElement, { tag: "video" }) {
+var BackgroundVideo = class extends HTMLElement {
 	static {
 		this.shadowRootOptions = { mode: "open" };
 	}
 	static {
 		this.getTemplateHTML = getTemplateHTML;
 	}
+	static get observedAttributes() {
+		return ["src"];
+	}
 	constructor() {
 		super();
 		if (!this.shadowRoot) {
@@ -42,13 +46,15 @@ var BackgroundVideo = class extends CustomMediaMixin(HTMLElement, { tag: "video"
 			};
 			this.shadowRoot.innerHTML = getTemplateHTML(attrs);
 		}
+		this.target.muted = !this.hasAttribute("nomuted");
+	}
+	attributeChangedCallback(attrName, oldValue, newValue) {
+		if (attrName === "src" && oldValue !== newValue) this.target.src = newValue ?? "";
+	}
+	get target() {
+		return this.querySelector(":scope > [slot=media]") ?? this.querySelector("video") ?? this.shadowRoot?.querySelector("video") ?? null;
 	}
 };
-function namedNodeMapToObject(namedNodeMap) {
-	const obj = {};
-	for (const attr of namedNodeMap) obj[attr.name] = attr.value;
-	return obj;
-}
 const VideoAttributes = [
 	"autoplay",
 	"controls",

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/background-video/index.ts"],"sourcesContent":["import { CustomMediaMixin } from '@videojs/core/dom/media/custom-media-element';\n\nfunction 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: inherit;\n      }\n    </style>\n    <slot></slot>\n    <video ${serializeAttributes(attrs)}></video>\n  `;\n}\n\nexport class BackgroundVideo extends CustomMediaMixin(HTMLElement, { tag: 'video' }) {\n  static shadowRootOptions = { mode: 'open' as ShadowRootMode };\n  static getTemplateHTML = getTemplateHTML;\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}\n\nfunction namedNodeMapToObject(namedNodeMap: NamedNodeMap) {\n  const obj: Record<string, string> = {};\n  for (const attr of namedNodeMap) {\n    obj[attr.name] = attr.value;\n  }\n  return obj;\n}\n\nconst 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\nfunction serializeAttributes(attrs: Record<string, string>): string {\n  let html = '';\n  for (const key in attrs) {\n    // Skip forwarding non native video attributes.\n    if (!VideoAttributes.includes(key as any)) continue;\n\n    const value = attrs[key];\n    if (value === '') html += ` ${key}`;\n    else html += ` ${key}=\"${value}\"`;\n  }\n  return html;\n}\n"],"mappings":";;;AAEA,SAAS,gBAAgB,OAA+B;AACtD,QAAgB;;;;;;;;;;;;;;;aAeL,oBAAoB,MAAM,CAAC;;;AAIxC,IAAa,kBAAb,cAAqC,iBAAiB,aAAa,EAAE,KAAK,SAAS,CAAC,CAAC;;2BACxD,EAAE,MAAM,QAA0B;;;yBACpC;;CAEzB,cAAc;AACZ,SAAO;AAEP,MAAI,CAAC,KAAK,YAAY;AACpB,QAAK,aAAc,KAAK,YAAuC,kBAAkB;GAEjF,MAAM,QAAQ;IACZ,GAAG,qBAAqB,KAAK,WAAW;IACxC,GAAI,CAAC,KAAK,aAAa,UAAU,IAAI,EAAE,OAAO,IAAI;IAClD,GAAI,CAAC,KAAK,aAAa,SAAS,IAAI,EAAE,MAAM,IAAI;IAChD,GAAI,CAAC,KAAK,aAAa,aAAa,IAAI,EAAE,UAAU,IAAI;IACxD,aAAa;IACb,uBAAuB;IACvB,yBAAyB;IAC1B;AAED,QAAK,WAAY,YAAY,gBAAgB,MAAM;;;;AAKzD,SAAS,qBAAqB,cAA4B;CACxD,MAAM,MAA8B,EAAE;AACtC,MAAK,MAAM,QAAQ,aACjB,KAAI,KAAK,QAAQ,KAAK;AAExB,QAAO;;AAGT,MAAM,kBAAkB;CACtB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,SAAS,oBAAoB,OAAuC;CAClE,IAAI,OAAO;AACX,MAAK,MAAM,OAAO,OAAO;AAEvB,MAAI,CAAC,gBAAgB,SAAS,IAAW,CAAE;EAE3C,MAAM,QAAQ,MAAM;AACpB,MAAI,UAAU,GAAI,SAAQ,IAAI;MACzB,SAAQ,IAAI,IAAI,IAAI,MAAM;;AAEjC,QAAO"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/background-video/index.ts"],"sourcesContent":["import { namedNodeMapToObject } from '@videojs/utils/dom';\n\nfunction 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// Don't extend CustomMediaMixin to save some bytes, background videos don't need the full Media API.\nexport class BackgroundVideo extends HTMLElement {\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  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    return (\n      this.querySelector(':scope > [slot=media]') ??\n      this.querySelector('video') ??\n      this.shadowRoot?.querySelector('video') ??\n      null\n    );\n  }\n}\n\nconst 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\nfunction serializeAttributes(attrs: Record<string, string>): string {\n  let html = '';\n  for (const key in attrs) {\n    // Skip forwarding non native video attributes.\n    if (!VideoAttributes.includes(key as any)) continue;\n\n    const value = attrs[key];\n    if (value === '') html += ` ${key}`;\n    else html += ` ${key}=\"${value}\"`;\n  }\n  return html;\n}\n"],"mappings":";;;AAEA,SAAS,gBAAgB,OAA+B;AACtD,QAAgB;;;;;;;;;;;;;;;;aAgBL,oBAAoB,MAAM,CAAC;;;AAKxC,IAAa,kBAAb,cAAqC,YAAY;;2BACpB,EAAE,MAAM,QAA0B;;;yBACpC;;CACzB,WAAW,qBAAqB;AAC9B,SAAO,CAAC,MAAM;;CAGhB,cAAc;AACZ,SAAO;AAEP,MAAI,CAAC,KAAK,YAAY;AACpB,QAAK,aAAc,KAAK,YAAuC,kBAAkB;GAEjF,MAAM,QAAQ;IACZ,GAAG,qBAAqB,KAAK,WAAW;IACxC,GAAI,CAAC,KAAK,aAAa,UAAU,IAAI,EAAE,OAAO,IAAI;IAClD,GAAI,CAAC,KAAK,aAAa,SAAS,IAAI,EAAE,MAAM,IAAI;IAChD,GAAI,CAAC,KAAK,aAAa,aAAa,IAAI,EAAE,UAAU,IAAI;IACxD,aAAa;IACb,uBAAuB;IACvB,yBAAyB;IAC1B;AAED,QAAK,WAAY,YAAY,gBAAgB,MAAM;;AAMrD,OAAK,OAAQ,QAAQ,CAAC,KAAK,aAAa,UAAU;;CAGpD,yBAAyB,UAAkB,UAAyB,UAA+B;AACjG,MAAI,aAAa,SAAS,aAAa,SACrC,MAAK,OAAQ,MAAM,YAAY;;CAInC,IAAI,SAAkC;AACpC,SACE,KAAK,cAAc,wBAAwB,IAC3C,KAAK,cAAc,QAAQ,IAC3B,KAAK,YAAY,cAAc,QAAQ,IACvC;;;AAKN,MAAM,kBAAkB;CACtB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,SAAS,oBAAoB,OAAuC;CAClE,IAAI,OAAO;AACX,MAAK,MAAM,OAAO,OAAO;AAEvB,MAAI,CAAC,gBAAgB,SAAS,IAAW,CAAE;EAE3C,MAAM,QAAQ,MAAM;AACpB,MAAI,UAAU,GAAI,SAAQ,IAAI;MACzB,SAAQ,IAAI,IAAI,IAAI,MAAM;;AAEjC,QAAO"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@videojs/html",
   "type": "module",
-  "version": "10.0.0-alpha.3",
+  "version": "10.0.0-alpha.4",
   "description": "HTML library for building media players",
   "license": "Apache-2.0",
   "repository": {
@@ -24,21 +24,6 @@
       "development": "./dist/dev/index.js",
       "default": "./dist/default/index.js"
     },
-    "./video/*": {
-      "types": "./dist/dev/define/video/*.d.ts",
-      "development": "./dist/dev/define/video/*.js",
-      "default": "./dist/default/define/video/*.js"
-    },
-    "./audio/*": {
-      "types": "./dist/dev/define/audio/*.d.ts",
-      "development": "./dist/dev/define/audio/*.js",
-      "default": "./dist/default/define/audio/*.js"
-    },
-    "./background/*": {
-      "types": "./dist/dev/define/background/*.d.ts",
-      "development": "./dist/dev/define/background/*.js",
-      "default": "./dist/default/define/background/*.js"
-    },
     "./ui/*": {
       "types": "./dist/dev/define/ui/*.d.ts",
       "development": "./dist/dev/define/ui/*.js",
@@ -53,13 +38,19 @@
       "types": "./dist/dev/define/media/*.d.ts",
       "development": "./dist/dev/define/media/*.js",
       "default": "./dist/default/define/media/*.js"
+    },
+    "./*.css": "./dist/default/define/*.css",
+    "./*": {
+      "types": "./dist/dev/define/*.d.ts",
+      "development": "./dist/dev/define/*.js",
+      "default": "./dist/default/define/*.js"
     }
   },
   "dependencies": {
-    "@videojs/core": "10.0.0-alpha.3",
-    "@videojs/store": "10.0.0-alpha.3",
-    "@videojs/element": "10.0.0-alpha.3",
-    "@videojs/utils": "10.0.0-alpha.3"
+    "@videojs/element": "10.0.0-alpha.4",
+    "@videojs/core": "10.0.0-alpha.4",
+    "@videojs/store": "10.0.0-alpha.4",
+    "@videojs/utils": "10.0.0-alpha.4"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.0",