Elements

<MuxPlayer/>

https://elements-demo-nextjs-g2zbigxks-mux.vercel.app/MuxPlayer

Select from one of our example assets

Manual Config

Playback Id (playbackId)

Stream Type (streamType)

None"on-demand""live""ll-live""live:dvr""ll-live:dvr"

Width Cutoffs for Responsive Player Chrome/UI (width)

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

Audio (audio)

Theme (theme)

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)

Start Time (startTime)

Current Time (currentTime)

Thumbnail Time (thumbnailTime)

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)

Primary Color (primaryColor)

Secondary Color (secondaryColor)

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

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

Hot Keys (hotkeys)

Max Resolution (maxResolution)

None"720p"

Browse Elements

--controls
--top-controls
--center-controls
--bottom-controls
--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
--playback-rate-button
--bottom-playback-rate-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