ReferenceMedia

dash-video

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 '@videojs/html/media/dash-video';

Or load it from the CDN:

<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.4/media/dash-video.js"></script>

Examples

Basic Usage

<media-container class="media-container">
  <dash-video src="https://dash.akamaized.net/akamai/streamroot/050714/Spring_4Ktest.mpd" autoplay muted playsinline loop></dash-video>
</media-container>

.media-container {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
}

import '@videojs/html/ui/container';
import '@videojs/html/media/dash-video';

API Reference

Attributes

Forwards these standard media attributes to the internal <video>. See the MDN media element reference: autopictureinpictureautoplaycontrolscontrolslistcrossorigindisablepictureinpicturedisableremoteplaybackloadingloopmutedplaysinlineposterpreloadsrc

These Video.js-specific attributes configure media behavior:

Attribute	Type	Default	Details
`stream-type`	`MediaStreamType`	—
Description Current stream type (`'on-demand'`, `'live'`, or `'unknown'`). Defaults to `'unknown'`; detecting hosts update it automatically, and consumers can set it to override detection.

Properties

Property	Type	Default
`contentData`	`MediaContentData \| undefined`	—
Description Read-only.
`engine`	`dashjs.MediaPlayerClass`	—
Description Read-only. Underlying playback engine — the dash.js `MediaPlayerClass` instance. An advanced escape hatch for direct engine access; normal playback is driven through this element's own properties and methods.
`isFullscreen`	`boolean`	—
Description Read-only.
`isPictureInPicture`	`boolean`	—
Description Read-only.
`liveEdgeStart`	`number`	—
Description Read-only.
`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`	`''`
`streamType`	`MediaStreamType`	—
Description Current stream type (`'on-demand'`, `'live'`, or `'unknown'`). Defaults to `'unknown'`; detecting hosts update it automatically, and consumers can set it to override detection.
`targetLiveWindow`	`number`	—
Description Read-only.
`webkitCurrentPlaybackTargetIsWireless`	`boolean \| undefined`	—
Description Read-only.
`webkitPresentationMode`	`WebKitPresentationMode \| undefined`	—
Description Read-only.
`webkitSetPresentationMode`	`undefined \| function`	—
Description Read-only. Type `((mode: WebKitPresentationMode) => void) \| undefined`

Also exposes these properties from the native media API. See HTMLVideoElement for details: autoplaybufferedcontrolscrossOrigincurrentSrccurrentTimedefaultMuteddefaultPlaybackRatedisablePictureInPicturedisableRemotePlaybackdurationendederrorloopmutedpausedplaybackRateplayedplaysInlineposterpreloadreadyStateremoteseekableseekingtextTrackstitlevideoHeightvideoWidthvolume

Methods

Supports these media methods. See HTMLVideoElement for details: addTextTrackcanPlayTypeexitFullscreenexitPictureInPictureloadpauseplayrequestFullscreenrequestPictureInPicture

Events

Re-dispatches these standard media events from the internal media element: abortaddtrackcanplaycanplaythroughchangecontentdatachangedurationchangeemptiedendedenterpictureinpictureerrorleavepictureinpictureloadeddataloadedmetadataloadstartpauseplayplayingprogressratechangeremovetrackresizeseekedseekingstalledsuspendtimeupdatevolumechangewaiting

Also emits these Video.js-specific events:

Event	Description
`sourcechange`	Fired when `source` changes, either directly or by resolving a new `src`. Read `source` for the new value.

CSS custom properties

Variable	Description
`--media-video-border-radius`	Border radius of the video element.
`--media-object-fit`	Object fit for the video.
`--media-object-position`	Object position for the video.
`--media-caption-track-duration`	Duration of the caption track transition.
`--media-caption-track-delay`	Delay before the caption track transition.
`--media-caption-track-y`	Vertical offset of the caption track.