DASH video element powered by dash.js for MPEG-DASH adaptive bitrate streaming.
Import
pnpm add @videojs/react @videojs/dash-video pnpm add @videojs/html @videojs/dash-video import { DashVideo } from ' @videojs/react/media/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 Props Accepts the standard React props for a native <video>, plus these Video.js-specific props:
Prop Type Default Details source{ src?: string; engine?: DashEngineConfig } | nullnull▸ 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.
srcstring''
Engine options source.engine.dashJsPass 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.
< DashVideo source = {{ src : ' https://example.com/manifest.mpd ' , engine : { dashJs : { streaming : { buffer : { fastSwitchEnabled : true } } } }, }} /> const video = document . querySelector ( ' dash-video ' ) ; video . source = { src : ' https://example.com/manifest.mpd ' , engine : { dashJs : { streaming : { buffer : { fastSwitchEnabled : true } } } }, };
Option Type Details debugobject▸ Type { logLevel?: LogLevel; dispatchEvent?: boolean } | undefinederrorsobject▸ Type { recoverAttempts?: { mediaErrorDecode?: number } } | undefinedstreamingobject▸ 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
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.