API Reference
Unstable declarative API
Playback behavior may be stable, but this component's declarative API is not. Its attributes and how they configure the media may change before the API becomes stable.
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-typeMediaStreamType—▸ 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 Details contentDataMediaContentData | undefined—▸ enginedashjs.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. isFullscreenboolean—▸ isPictureInPictureboolean—▸ liveEdgeStartnumber—▸ 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''streamTypeMediaStreamType—▸ 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. targetLiveWindownumber—▸ webkitCurrentPlaybackTargetIsWirelessboolean | undefined—▸ webkitPresentationModeWebKitPresentationMode | undefined—▸ webkitSetPresentationMode((mode: WebKitPresentationMode) => void) | undefined—▸
Also exposes these properties from the native media API. See HTMLVideoElement for details: autoplaybufferedcontrolscrossOrigincurrentSrccurrentTimedefaultMuteddefaultPlaybackRatedisablePictureInPicturedisableRemotePlaybackdurationendederrorloopmutedpausedplaybackRateplayedplaysInlineposterpreloadreadyStateremoteseekableseekingtextTrackstitlevideoHeightvideoWidthvolume
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
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 sourcechangeFired 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.