ReferenceMedia

DashVideo

Unstable

DASH video element powered by dash.js for adaptive bitrate streaming

DASH video element powered by dash.js for MPEG-DASH adaptive bitrate streaming.

Import

pnpm add @videojs/dash-video

import { DashVideo } from '@videojs/react/media/dash-video';

Examples

Basic Usage

import { DashVideo } from '@videojs/react/media/dash-video';

export default function BasicUsage() {
  return <DashVideo className="dash-video" src="https://dash.akamaized.net/akamai/streamroot/050714/Spring_4Ktest.mpd" autoPlay muted playsInline loop />;
}

.dash-video {
  width: 100%;
  aspect-ratio: 16 / 9;
}

API Reference

Props

Accepts the standard React props for a native <video>, plus these Video.js-specific props:

Prop	Type	Default
`source`	`object`	`null`
Description Structured source: the MPD URL in `src`, plus dash.js settings in `engine.dashJs`. Replacing it re-derives `src`. Dash.js takes settings on a live player, so changing `engine.dashJs` re-applies them in place instead of recreating the engine. Type `{ src?: string; engine?: DashEngineConfig } \| null`
`src`	`string`	`''`

Ref

Forwards its ref to the rendered <video>. The ref is an HTMLVideoElement and exposes its complete native property and method API.

Events

Handle standard media events with React event props such as onPlay and onTimeUpdate. For native events without a React prop, attach a listener through the ref with addEventListener.