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

packages/core/package.json

@@ -50,6 +50,7 @@
     "@videojs/spf": "workspace:*",
     "@videojs/store": "workspace:*",
     "@videojs/utils": "workspace:*",
+    "dashjs": "^5.0.0",
     "hls.js": "^1.6.7"
   },
   "devDependencies": {

packages/core/src/dom/media/dash/index.ts

@@ -0,0 +1,55 @@
+import * as dashjs from 'dashjs';
+
+import { type MediaDelegate, MediaDelegateMixin } from '../../../core/media/delegate';
+import { MediaProxyMixin } from '../../../core/media/proxy';
+import { CustomMediaMixin } from '../custom-media-element';
+
+export class DashMediaDelegateBase implements MediaDelegate {
+  #engine: dashjs.MediaPlayerClass;
+
+  constructor() {
+    this.#engine = dashjs.MediaPlayer().create();
+    this.#engine.initialize(undefined, undefined, false);
+  }
+
+  get engine(): dashjs.MediaPlayerClass {
+    return this.#engine;
+  }
+
+  attach(target: EventTarget): void {
+    this.#engine.attachView(target as HTMLMediaElement);
+  }
+
+  detach(): void {
+    // dash.js types don't reflect null support, but null is valid for detaching
+    this.#engine.attachView(null as unknown as HTMLMediaElement);
+  }
+
+  destroy(): void {
+    this.#engine.destroy();
+  }
+
+  set src(src: string) {
+    this.#engine.attachSource(src);
+  }
+
+  get src(): string {
+    return (this.#engine.getSource() as string) ?? '';
+  }
+}
+
+// This is used by the web component because it needs to extend HTMLElement!
+export class DashCustomMedia extends MediaDelegateMixin(
+  CustomMediaMixin(globalThis.HTMLElement ?? class {}, { tag: 'video' }),
+  DashMediaDelegateBase
+) {}
+
+// This is used by the React component.
+export class DashMedia extends MediaDelegateMixin(
+  MediaProxyMixin(
+    globalThis.HTMLVideoElement ?? class {},
+    globalThis.HTMLMediaElement ?? class {},
+    globalThis.EventTarget ?? class {}
+  ),
+  DashMediaDelegateBase
+) {}

packages/core/tsdown.config.ts

@@ -9,6 +9,7 @@ const createConfig = (mode: BuildMode): UserConfig => ({
   entry: {
     index: './src/core/index.ts',
     dom: './src/dom/index.ts',
+    'dom/media/dash/index': './src/dom/media/dash/index.ts',
     'dom/media/hls/index': './src/dom/media/hls/index.ts',
     'dom/media/custom-media-element/index': './src/dom/media/custom-media-element/index.ts',
     'dom/media/simple-hls/index': './src/dom/media/simple-hls/index.ts',