dash-video

Beta

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/html @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-beta.32/media/dash-video.js"></script>

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

<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`	`{ src?: string; engine?: DashEngineConfig } \| null`	`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.
`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`	`((mode: WebKitPresentationMode) => void) \| undefined`	`—`
Description Read-only.

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

Engine options

`source.engine.dashJs`

Pass dash.js’s own settings here. They’re handed to dash.js untouched, so every option in its settings reference works. Replacing the object resets any settings applied before it. Media Sources covers how engine options fit into a structured source.

Each of the three below is a group of dash.js settings rather than a single value, and dash.js documents what’s inside them.

const video = document.querySelector('dash-video');
video.source = {
  src: 'https://example.com/manifest.mpd',
  engine: { dashJs: { streaming: { buffer: { fastSwitchEnabled: true } } } },
};

Option	Type	Details
`debug`	`object`
Type `{ logLevel?: LogLevel; dispatchEvent?: boolean } \| undefined`
`errors`	`object`
Type `{ recoverAttempts?: { mediaErrorDecode?: number } } \| undefined`
`streaming`	`object`
Type { abandonLoadTimeout?: number; wallclockTimeUpdateInterval?: number; manifestUpdateRetryInterval?: number; liveUpdateTimeThresholdInMilliseconds?: number; cacheInitSegments?: boolean; cacheInitSegmentsLimit?: number; applyServiceDescription?: boolean; applyProducerReferenceTime?: boolean; applyContentSteering?: boolean; enableManifestDurationMismatchFix?: boolean; parseInbandPrft?: boolean; enableManifestTimescaleMismatchFix?: boolean; capabilities?: { filterUnsupportedEssentialProperties?: boolean; supportedEssentialProperties?: [{ schemeIdUri?: string; value?: RegExp }]; useMediaCapabilitiesApi?: boolean; filterHDRMetadataFormatEssentialProperties?: boolean; filterVideoColorimetryEssentialProperties?: boolean; filterAudioChannelConfiguration?: boolean }; events?: { eventControllerRefreshDelay?: number; deleteEventMessageDataTimeout?: number }; timeShiftBuffer?: { calcFromSegmentTimeline?: boolean; fallbackToSegmentTimeline?: boolean }; metrics?: { maxListDepth?: number }; delay?: { liveDelayFragmentCount?: number; liveDelay?: number; useSuggestedPresentationDelay?: boolean }; protection?: { keepProtectionMediaKeys?: boolean; keepProtectionMediaKeysMaximumOpenSessions?: number; ignoreEmeEncryptedEvent?: boolean; detectPlayreadyMessageFormat?: boolean; ignoreKeyStatuses?: boolean }; buffer?: { enableSeekDecorrelationFix?: boolean; fastSwitchEnabled?: boolean; flushBufferAtTrackSwitch?: boolean; reuseExistingSourceBuffers?: boolean; bufferPruningInterval?: number; bufferToKeep?: number; bufferTimeAtTopQuality?: number; bufferTimeAtTopQualityLongForm?: number; initialBufferLevel?: number; bufferTimeDefault?: number; longFormContentDurationThreshold?: number; stallThreshold?: number; lowLatencyStallThreshold?: number; useAppendWindow?: boolean; setStallState?: boolean; avoidCurrentTimeRangePruning?: boolean; useChangeType?: boolean; mediaSourceDurationInfinity?: boolean; resetSourceBuffersForTrackSwitch?: boolean; syntheticStallEvents?: { enabled?: boolean; ignoreReadyState?: boolean } }; gaps?: { jumpGaps?: boolean; jumpLargeGaps?: boolean; smallGapLimit?: number; threshold?: number; enableSeekFix?: boolean; enableStallFix?: boolean; stallSeek?: number; seekOffset?: number }; utcSynchronization?: { enabled?: boolean; useManifestDateHeaderTimeSource?: boolean; backgroundAttempts?: number; timeBetweenSyncAttempts?: number; maximumTimeBetweenSyncAttempts?: number; minimumTimeBetweenSyncAttempts?: number; timeBetweenSyncAttemptsAdjustmentFactor?: number; maximumAllowedDrift?: number; enableBackgroundSyncAfterSegmentDownloadError?: boolean; defaultTimingSource?: { scheme?: string; value?: string }; artificialTimeOffsetToApply?: number }; scheduling?: { defaultTimeout?: number; lowLatencyTimeout?: number; scheduleWhilePaused?: boolean }; text?: { defaultEnabled?: boolean; dispatchForManualRendering?: boolean; extendSegmentedCues?: boolean; imsc?: { displayForcedOnlyMode?: boolean; enableRollUp?: boolean }; webvtt?: { customRenderingEnabled?: number } }; liveCatchup?: { maxDrift?: number; liveThreshold?: number; playbackRate?: { min?: number; max?: number }; playbackBufferMin?: number; enabled?: boolean; mode?: string; step?: { start: { min?: number; max?: number }; stop: { min?: number; max?: number } } }; lastBitrateCachingInfo?: { enabled?: boolean; ttl?: number }; lastMediaSettingsCachingInfo?: { enabled?: boolean; ttl?: number }; saveLastMediaSettingsForCurrentStreamingSession?: boolean; cacheLoadThresholds?: { video?: number; audio?: number }; trackSwitchMode?: { video?: TrackSwitchMode; audio?: TrackSwitchMode }; includePreselectionsInMediainfo?: boolean; includePreselectionsForInitialTrackSelection?: boolean; ignoreSelectionPriority?: boolean; prioritizeRoleMain?: boolean; assumeDefaultRoleAsMain?: boolean; selectionModeForInitialTrack?: TrackSelectionMode; blacklistExpiryTime?: number; fragmentRequestTimeout?: number; fragmentRequestProgressTimeout?: number; manifestRequestTimeout?: number; retryIntervals?: { MPD?: number; XLinkExpansion?: number; MediaSegment?: number; InitializationSegment?: number; BitstreamSwitchingSegment?: number; IndexSegment?: number; FragmentInfoSegment?: number; license?: number; licenseCertificate?: number; other?: number; lowLatencyReductionFactor?: number }; retryAttempts?: { MPD?: number; XLinkExpansion?: number; MediaSegment?: number; InitializationSegment?: number; BitstreamSwitchingSegment?: number; IndexSegment?: number; FragmentInfoSegment?: number; license?: number; licenseCertificate?: number; other?: number; lowLatencyMultiplyFactor?: number }; abr?: { limitBitrateByPortal?: boolean; usePixelRatioInLimitBitrateByPortal?: boolean; limitBitrateByPortalMinimum?: number; enableSupplementalPropertyAdaptationSetSwitching?: boolean; rules?: { throughputRule?: { active?: boolean }; bolaRule?: { active?: boolean }; insufficientBufferRule?: { active?: boolean; parameters?: { throughputSafetyFactor?: number; segmentIgnoreCount?: number } }; switchHistoryRule?: { active?: boolean; parameters?: { sampleSize?: number; switchPercentageThreshold?: number } }; droppedFramesRule?: { active?: boolean; parameters?: { minimumSampleSize?: number; droppedFramesPercentageThreshold?: number } }; abandonRequestsRule?: { active?: boolean; parameters?: { abandonDurationMultiplier?: number; minSegmentDownloadTimeThresholdInMs?: number; minThroughputSamplesThreshold?: number } }; l2ARule?: { active?: boolean }; loLPRule?: { active?: boolean } }; throughput?: { averageCalculationMode?: ThroughputCalculationModes; lowLatencyDownloadTimeCalculationMode?: LowLatencyDownloadTimeCalculationModes; useResourceTimingApi?: boolean; useNetworkInformationApi?: { xhr?: boolean; fetch?: boolean }; useDeadTimeLatency?: boolean; bandwidthSafetyFactor?: number; sampleSettings: { live?: number; vod?: number; enableSampleSizeAdjustment?: boolean; decreaseScale?: number; increaseScale?: number; maxMeasurementsToKeep?: number; averageLatencySampleAmount?: number }; ewma: { throughputSlowHalfLifeSeconds?: number; throughputFastHalfLifeSeconds?: number; latencySlowHalfLifeCount?: number; latencyFastHalfLifeCount?: number; weightDownloadTmeMultiplicationFactor?: number } }; maxBitrate?: { audio?: number; video?: number }; minBitrate?: { audio?: number; video?: number }; initialBitrate?: { audio?: number; video?: number }; autoSwitchBitrate?: { audio?: boolean; video?: boolean } }; cmcd?: { applyParametersFromMpd?: boolean; enabled?: boolean; sid?: string \| null; cid?: string \| null; rtp?: number \| null; rtpSafetyFactor?: number; mode?: 'query' \| 'header'; enabledKeys?: Array<string>; includeInRequests?: Array<string>; version?: number; eventTargets?: Array<{ enabled?: boolean; url?: string; events?: Array<string>; interval?: number; enabledKeys?: Array<string>; includeInRequests?: Array<string>; batchSize?: number }> }; cmsd?: { enabled?: boolean; abr?: { applyMb: boolean; etpWeightRatio?: number } }; defaultSchemeIdUri?: { viewpoint?: string; audioChannelConfiguration?: string; role?: string; accessibility?: string }; dvbReporting?: { reportingUrl?: string \| null } } \| undefined

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	Details
`--media-video-border-radius`
Description Border radius of the video element.
`--media-object-fit`
Description Object fit for the video.
`--media-object-position`
Description Object position for the video.
`--media-caption-track-duration`
Description Duration of the caption track transition.
`--media-caption-track-delay`
Description Delay before the caption track transition.
`--media-caption-track-y`
Description Vertical offset of the caption track.