feat: add background video preset (#607)

packages/html/src/media/background-video/index.ts

@@ -1,4 +1,4 @@
-import { CustomMediaMixin } from '@videojs/core/dom/media/custom-media-element';
+import { namedNodeMapToObject } from '@videojs/utils/dom';
 
 function getTemplateHTML(attrs: Record<string, string>) {
   return /*html*/ `
@@ -12,7 +12,8 @@ function getTemplateHTML(attrs: Record<string, string>) {
         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>
@@ -20,9 +21,13 @@ function getTemplateHTML(attrs: Record<string, string>) {
   `;
 }
 
-export class BackgroundVideo extends CustomMediaMixin(HTMLElement, { tag: 'video' }) {
+// Don't extend CustomMediaMixin to save some bytes, background videos don't need the full Media API.
+export class BackgroundVideo extends HTMLElement {
   static shadowRootOptions = { mode: 'open' as ShadowRootMode };
   static getTemplateHTML = getTemplateHTML;
+  static get observedAttributes() {
+    return ['src'];
+  }
 
   constructor() {
     super();
@@ -42,15 +47,27 @@ export class BackgroundVideo extends CustomMediaMixin(HTMLElement, { tag: 'video
 
       this.shadowRoot!.innerHTML = getTemplateHTML(attrs);
     }
-  }
-}
 
-function namedNodeMapToObject(namedNodeMap: NamedNodeMap) {
-  const obj: Record<string, string> = {};
-  for (const attr of namedNodeMap) {
-    obj[attr.name] = attr.value;
+    // Neither Chrome or Firefox support setting the muted attribute
+    // after using document.createElement.
+    // Get around this by setting the muted property manually.
+    this.target!.muted = !this.hasAttribute('nomuted');
+  }
+
+  attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string | null): void {
+    if (attrName === 'src' && oldValue !== newValue) {
+      this.target!.src = newValue ?? '';
+    }
+  }
+
+  get target(): HTMLVideoElement | null {
+    return (
+      this.querySelector(':scope > [slot=media]') ??
+      this.querySelector('video') ??
+      this.shadowRoot?.querySelector('video') ??
+      null
+    );
   }
-  return obj;
 }
 
 const VideoAttributes = [