<MuxPlayer/> Demo

<MuxPlayer
  playbackId={"a4nOgmxGWg6gULfcBbAa00gXyfcwPnAFldF8RdsNyk8M"}
/>

https://elements-demo-nextjs-mux.vercel.app/MuxPlayer?playbackId=%22a4nOgmxGWg6gULfcBbAa00gXyfcwPnAFldF8RdsNyk8M%22

Select from one of our example assets

Manual Config

Playback Id (playbackId)

Tokens: Playback (tokens.playback)

Tokens: Drm (tokens.drm)

Tokens: Thumbnail (tokens.thumbnail)

Tokens: Storyboard (tokens.storyboard)

Prefer Playback (preferPlayback)

None"mse""native"

Stream Type (streamType)

None"on-demand""live""ll-live" (deprecated)"live:dvr" (deprecated)"ll-live:dvr" (deprecated)"unknown"

Target Live Window (targetLiveWindow)

NoneInfinity0NaN

Default Stream Type (defaultStreamType)

None"on-demand""live""unknown"

Width Cutoffs for Responsive Player Chrome/UI (width)

None"extra-small""small""large"

Audio (audio)

Theme (theme)

None"classic""microvideo""minimal""gerwig"

Env Key (Mux Data) (envKey)

Custom Domain (customDomain)

Poster (poster)

Storyboard Src (storyboardSrc)

Placeholder Image (placeholder)

Title (title)

Paused (paused)

Auto Play (autoPlay)

Nonetruefalse"any""muted"

Preload (preload)

None"none""metadata""auto"

Muted (muted)

No Hot Keys (nohotkeys)

Default Show Remaining Time (defaultShowRemainingTime)

Default Hidden Captions (defaultHiddenCaptions)

Forward Seek Offset (forwardSeekOffset)

Backward Seek Offset (backwardSeekOffset)

Volume (volume)

No Volume Pref (noVolumePref)

Start Time (startTime)

Current Time (currentTime)

Thumbnail Time (thumbnailTime)

Disable Tracking (disableTracking)

Disable Cookies (disableCookies)

Debug (debug)

Prefer Cmcd (preferCmcd)

None"query""header""none"

Loop (loop)

Cross Origin (crossOrigin)

None"anonymous""use-credentials"

Playback Rate (playbackRate)

Playback Rates (playbackRates)

Default Duration (defaultDuration)

Primary Color (primaryColor)

Secondary Color (secondaryColor)

Accent Color (accentColor)

Display Controls CSS vars (Hiding usage) (--controls)

Controls Backdrop Color (--controls-backdrop-color)

Hot Keys (hotkeys)

Max Resolution (maxResolution)

None"720p""1080p""1440p""2160p"

Min Resolution (minResolution)

None"480p""540p""720p""1080p""1440p""2160p"

Rendition Order (renditionOrder)

None"desc"

Program Start Time (programStartTime)

Program End Time (programEndTime)

Asset Start Time (assetStartTime)

Asset End Time (assetEndTime)

--controls
--top-controls
--center-controls
--bottom-controls
--loading-indicator
--dialog
--duration-display
--bottom-duration-display
--play-button
--center-play-button
--bottom-play-button
--time-range
--bottom-time-range
--seek-backward-button
--bottom-seek-backward-button
--seek-forward-button
--bottom-seek-forward-button
--time-display
--title-display
--bottom-title-display
--top-title-display
--bottom-time-display
--mute-button
--bottom-mute-button
--volume-range
--bottom-volume-range
--rendition-menu-button
--top-rendition-menu-button
--bottom-rendition-menu-button
--playback-rate-button
--bottom-playback-rate-button
--audio-track-menu-button
--top-audio-track-menu-button
--bottom-audio-track-menu-button
--captions-button
--top-captions-button
--bottom-captions-button
--captions-menu-button
--top-captions-menu-button
--bottom-captions-menu-button
--airplay-button
--top-airplay-button
--bottom-airplay-button
--cast-button
--top-cast-button
--bottom-cast-button
--pip-button
--top-pip-button
--bottom-pip-button
--fullscreen-button
--bottom-fullscreen-button
--live-button
--top-live-button
--bottom-live-button