feat: add DashVideo media element (html, react) with sandbox support (#940)

packages/html/src/cdn/media/dash-video.ts

@@ -0,0 +1 @@
+import '../../define/media/dash-video';

packages/html/src/define/media/dash-video.ts

@@ -0,0 +1,14 @@
+import { DashVideo } from '../../media/dash-video';
+import { safeDefine } from '../safe-define';
+
+export class DashVideoElement extends DashVideo {
+  static readonly tagName = 'dash-video';
+}
+
+safeDefine(DashVideoElement);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [DashVideoElement.tagName]: DashVideoElement;
+  }
+}

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

@@ -0,0 +1,32 @@
+import { DashCustomMedia } from '@videojs/core/dom/media/dash';
+
+export class DashVideo extends DashCustomMedia {
+  static getTemplateHTML(attrs: Record<string, string>): string {
+    const { src, ...rest } = attrs;
+    // biome-ignore lint/complexity/noThisInStatic: intentional use of super
+    return super.getTemplateHTML(rest);
+  }
+
+  constructor() {
+    super();
+    this.attach(this.target);
+  }
+
+  attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string | null): void {
+    if (attrName !== 'src') {
+      super.attributeChangedCallback(attrName, oldValue, newValue);
+    }
+
+    if (attrName === 'src' && oldValue !== newValue) {
+      this.src = newValue ?? '';
+    }
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback?.();
+
+    if (!this.hasAttribute('keep-alive')) {
+      this.destroy();
+    }
+  }
+}