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',

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();
+    }
+  }
+}

packages/react/src/media/dash-video/index.tsx

@@ -0,0 +1,28 @@
+import { DashMedia } from '@videojs/core/dom/media/dash';
+import type { PropsWithChildren, VideoHTMLAttributes } from 'react';
+import { forwardRef, useMemo } from 'react';
+import { useMediaRegistration } from '../../player/context';
+import { attachMediaElement } from '../../utils/attach-media-element';
+import { mediaProps } from '../../utils/media-props';
+import { useComposedRefs } from '../../utils/use-composed-refs';
+import { useDestroy } from '../../utils/use-destroy';
+
+export type DashVideoProps = PropsWithChildren<VideoHTMLAttributes<HTMLVideoElement>>;
+
+export const DashVideo = forwardRef<HTMLVideoElement, DashVideoProps>(({ children, ...props }, ref) => {
+  const mediaApi = useMemo(() => new DashMedia(), []);
+  const setMedia = useMediaRegistration();
+
+  useDestroy(mediaApi, () => {
+    setMedia?.(mediaApi);
+  });
+
+  const composedRef = useComposedRefs(attachMediaElement(mediaApi), ref);
+  return (
+    <video ref={composedRef} {...mediaProps(mediaApi, props)}>
+      {children}
+    </video>
+  );
+});
+
+export default DashVideo;

packages/sandbox/app/constants.ts

@@ -1,4 +1,4 @@
 export const SKINS = ['default', 'minimal'] as const;
 export const PLATFORMS = ['html', 'react'] as const;
 export const STYLINGS = ['css', 'tailwind'] as const;
-export const PRESETS = ['video', 'hls-video', 'simple-hls-video', 'audio', 'background-video'] as const;
+export const PRESETS = ['video', 'hls-video', 'simple-hls-video', 'dash-video', 'audio', 'background-video'] as const;

packages/sandbox/app/shared/sources.ts

@@ -34,13 +34,25 @@ export const SOURCES = {
     url: 'https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4',
     type: 'mp4',
   },
+  'dash-1': {
+    label: 'DASH - Big Buck Bunny',
+    url: 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd',
+    type: 'dash',
+  },
+  'dash-2': {
+    label: 'DASH - Envivio Test Stream',
+    url: 'https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd',
+    type: 'dash',
+  },
 } as const;
 
 export type SourceId = keyof typeof SOURCES;
 
 export const SOURCE_IDS = Object.keys(SOURCES) as SourceId[];
 export const MP4_SOURCE_IDS = SOURCE_IDS.filter((id) => SOURCES[id].type === 'mp4');
+export const DASH_SOURCE_IDS = SOURCE_IDS.filter((id) => SOURCES[id].type === 'dash');
 export const DEFAULT_SOURCE: SourceId = 'hls-1';
 export const DEFAULT_AUDIO_SOURCE: SourceId = 'mp4-1';
+export const DEFAULT_DASH_SOURCE: SourceId = 'dash-1';
 
 export const BACKGROUND_VIDEO_SRC = 'https://stream.mux.com/Sc89iWAyNkhJ3P1rQ02nrEdCFTnfT01CZ2KmaEcxXfB008/low.mp4';

packages/sandbox/app/shell/app.tsx

@@ -1,6 +1,13 @@
 import { PLATFORMS, PRESETS, STYLINGS } from '@app/constants';
 import type { SourceId } from '@app/shared/sources';
-import { DEFAULT_AUDIO_SOURCE, MP4_SOURCE_IDS, SOURCE_IDS, SOURCES } from '@app/shared/sources';
+import {
+  DASH_SOURCE_IDS,
+  DEFAULT_AUDIO_SOURCE,
+  DEFAULT_DASH_SOURCE,
+  MP4_SOURCE_IDS,
+  SOURCE_IDS,
+  SOURCES,
+} from '@app/shared/sources';
 import type { Platform, Preset, Styling } from '@app/types';
 import { useSkinSwitcher } from '@app/utils/use-skin-switcher';
 import { useSourceSwitcher } from '@app/utils/use-source-switcher';
@@ -67,14 +74,21 @@ export function App() {
     }
   }, [preset, source, setSource]);
 
-  // Constrain styling when switching to background-video
+  // Constrain source to DASH when switching to dash-video
   useEffect(() => {
-    if (preset === 'background-video' && styling === 'tailwind') {
+    if (preset === 'dash-video' && SOURCES[source].type !== 'dash') {
+      setSource(DEFAULT_DASH_SOURCE);
+    }
+  }, [preset, source, setSource]);
+
+  // Constrain styling when switching to a preset that has no tailwind template
+  useEffect(() => {
+    if ((preset === 'background-video' || preset === 'dash-video') && styling === 'tailwind') {
       setStyling('css');
     }
   }, [preset, styling]);
 
-  const availableSources = preset === 'audio' ? MP4_SOURCE_IDS : SOURCE_IDS;
+  const availableSources = preset === 'audio' ? MP4_SOURCE_IDS : preset === 'dash-video' ? DASH_SOURCE_IDS : SOURCE_IDS;
 
   const handleSourceChange = useCallback((value: string) => setSource(value as SourceId), [setSource]);
 
@@ -94,6 +108,7 @@ export function App() {
         availableSources={availableSources}
         isBackgroundVideo={preset === 'background-video'}
         isSimpleHlsVideo={preset === 'simple-hls-video'}
+        isDashVideo={preset === 'dash-video'}
         platforms={PLATFORMS}
         stylings={STYLINGS}
         presets={PRESETS}

packages/sandbox/app/shell/navbar.tsx

@@ -16,6 +16,7 @@ type NavbarProps = {
   availableSources: readonly SourceId[];
   isBackgroundVideo: boolean;
   isSimpleHlsVideo: boolean;
+  isDashVideo: boolean;
   platforms: readonly Platform[];
   stylings: readonly Styling[];
   presets: readonly Preset[];
@@ -33,6 +34,7 @@ const PRESET_LABELS: Record<Preset, string> = {
   video: 'Video',
   'hls-video': 'HLS Video',
   'simple-hls-video': 'Simple HLS Video',
+  'dash-video': 'DASH Video',
   audio: 'Audio',
   'background-video': 'Background Video',
 };
@@ -51,6 +53,7 @@ export function Navbar({
   availableSources,
   isBackgroundVideo,
   isSimpleHlsVideo,
+  isDashVideo,
   platforms,
   stylings,
   presets,
@@ -79,7 +82,7 @@ export function Navbar({
           options={stylings.map((s) => ({
             value: s,
             label: s === 'css' ? 'CSS' : 'Tailwind',
-            disabled: s === 'tailwind' && isBackgroundVideo,
+            disabled: s === 'tailwind' && (isBackgroundVideo || isDashVideo),
           }))}
         />
 

packages/sandbox/templates/html-dash-video/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Sandbox — HTML DASH Video</title>
+    <link rel="preconnect" href="https://rsms.me/" />
+    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
+  </head>
+  <body class="font-sans">
+    <div id="root" class="flex justify-center items-center min-h-screen"></div>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>

packages/sandbox/templates/html-dash-video/main.ts

@@ -0,0 +1,42 @@
+import '@app/styles.css';
+import '@videojs/html/video/player';
+import '@videojs/html/media/dash-video';
+import '@videojs/html/video/skin';
+import '@videojs/html/video/minimal-skin';
+import { CSS_SKIN_TAGS } from '@app/shared/html/skin-tags';
+import { loadVideoStylesheets } from '@app/shared/html/stylesheets';
+import { getInitialSkin, getInitialSource, onSkinChange, onSourceChange } from '@app/shared/sandbox-listener';
+import type { SourceId } from '@app/shared/sources';
+import { SOURCES } from '@app/shared/sources';
+import type { Skin } from '@app/types';
+
+const html = String.raw;
+
+let currentSkin: Skin = getInitialSkin();
+let currentSource: SourceId = getInitialSource();
+
+function render() {
+  const tag = CSS_SKIN_TAGS[currentSkin].video;
+
+  loadVideoStylesheets(currentSkin);
+
+  document.getElementById('root')!.innerHTML = html`
+    <video-player>
+      <${tag} class="w-full aspect-video max-w-4xl mx-auto">
+        <dash-video slot="media" src="${SOURCES[currentSource].url}" playsinline></dash-video>
+      </${tag}>
+    </video-player>
+  `;
+}
+
+render();
+
+onSkinChange((skin) => {
+  currentSkin = skin;
+  render();
+});
+
+onSourceChange((source) => {
+  currentSource = source;
+  render();
+});

packages/sandbox/templates/react-dash-video/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Sandbox — React DASH Video</title>
+    <link rel="preconnect" href="https://rsms.me/" />
+    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
+  </head>
+  <body class="font-sans">
+    <div id="root" class="flex justify-center items-center min-h-screen"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

packages/sandbox/templates/react-dash-video/main.tsx

@@ -0,0 +1,25 @@
+import '@app/styles.css';
+import '@videojs/react/video/skin.css';
+import '@videojs/react/video/minimal-skin.css';
+import { VideoProvider } from '@app/shared/react/providers';
+import { VideoSkinComponent } from '@app/shared/react/skins';
+import { useSkin } from '@app/shared/react/use-skin';
+import { useSource } from '@app/shared/react/use-source';
+import { SOURCES } from '@app/shared/sources';
+import { DashVideo } from '@videojs/react/media/dash-video';
+import { createRoot } from 'react-dom/client';
+
+function App() {
+  const skin = useSkin();
+  const source = useSource();
+
+  return (
+    <VideoProvider>
+      <VideoSkinComponent skin={skin} styling="css" className="w-full aspect-video max-w-4xl mx-auto">
+        <DashVideo src={SOURCES[source].url} playsInline />
+      </VideoSkinComponent>
+    </VideoProvider>
+  );
+}
+
+createRoot(document.getElementById('root')!).render(<App />);