Skip to content

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

Load a source

src takes a DASH manifest (MPD) URL.

<DashVideo src="https://example.com/manifest.mpd" />

The structured source object pairs the URL with dash.js settings under engine.dashJs. Setting source derives src, and changing engine.dashJs applies the settings to the running player instead of recreating it.

<DashVideo
  source={{
    src: 'https://example.com/manifest.mpd',
    engine: { dashJs: { streaming: { buffer: { bufferTimeAtTopQuality: 30 } } } },
  }}
/>

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 />;
}

API Reference

Props

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

PropTypeDefaultDetails
sourceobjectnull
srcstring''

Refs

ref

Forwards to the rendered <video>, an HTMLVideoElement with its complete native property and method API.

const ref = useRef<HTMLVideoElement>(null);

<DashVideo ref={ref} />

mediaRef

Receives the DashAdapter that drives the <video>, the same object useMedia() returns inside a player. It forwards the native media methods, properties, and events, such as play() and currentTime, and exposes the playback engine through engine. It is set once the adapter has attached to the element and cleared when the element unmounts. For DOM-only APIs, use ref. 

import type { DashAdapter } from '@videojs/dash-video';

const mediaRef = useRef<DashAdapter>(null);

<DashVideo mediaRef={mediaRef} />

// In an event handler
mediaRef.current?.play();

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.