feat: add background video preset (#607)

packages/html/src/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;
+}

packages/html/src/define/background/skin.ts

@@ -1 +1,33 @@
-// TODO: Implement BackgroundVideoSkinElement and then register it here
+import { ReactiveElement } from '@videojs/element';
+import { namedNodeMapToObject } from '@videojs/utils/dom';
+
+function getTemplateHTML(_attrs: Record<string, string>) {
+  return /*html*/ `
+    <media-container>
+      <slot name="media" slot="media"></slot>
+    </media-container>
+  `;
+}
+
+export class BackgroundVideoSkinElement extends ReactiveElement {
+  static readonly tagName = 'background-video-skin';
+  static shadowRootOptions = { mode: 'open' as ShadowRootMode };
+  static getTemplateHTML = getTemplateHTML;
+
+  constructor() {
+    super();
+
+    if (!this.shadowRoot) {
+      this.attachShadow((this.constructor as typeof BackgroundVideoSkinElement).shadowRootOptions);
+      this.shadowRoot!.innerHTML = getTemplateHTML(namedNodeMapToObject(this.attributes));
+    }
+  }
+}
+
+customElements.define(BackgroundVideoSkinElement.tagName, BackgroundVideoSkinElement);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [BackgroundVideoSkinElement.tagName]: BackgroundVideoSkinElement;
+  }
+}

packages/html/src/define/background/video.ts

@@ -0,0 +1 @@
+export * from '../media/background-video';