<MuxPlayer/> Demo

<MuxPlayer/>

https://elements-demo-nextjs-evo5xw8fm-mux.vercel.app/MuxPlayerDynamic

Select from one of our example assets

Manual Config

Playback Id (playbackId)

Tokens: Playback (tokens.playback)

Tokens: Drm (tokens.drm)

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)

Custom Domain (customDomain)

Prefer Cmcd (preferCmcd)

None"query""header""none"

Tokens: Thumbnail (tokens.thumbnail)

Thumbnail Time (thumbnailTime)

Poster (poster)

Tokens: Storyboard (tokens.storyboard)

Storyboard Src (storyboardSrc)

Auto Play (autoPlay)

Nonetruefalse"any""muted"

Playback Rate (playbackRate)

Loop (loop)

Default Hidden Captions (defaultHiddenCaptions)

Preload (preload)

None"none""metadata""auto"

Cross Origin (crossOrigin)

None"anonymous""use-credentials"

Prefer Playback (preferPlayback)

None"mse""native"

Start Time (startTime)

Env Key (Mux Data) (envKey)

Metadata: Video Id (metadata.video_id)

Metadata: Video Title (metadata.video_title)

Metadata: Viewer User Id (metadata.viewer_user_id)

Disable Tracking (disableTracking)

Disable Cookies (disableCookies)

Paused (paused)

Current Time (currentTime)

Muted (muted)

Volume (volume)

No Volume Pref (noVolumePref)

Stream Type (streamType)

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

Width Cutoffs for Responsive Player Chrome/UI (width)

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

Audio (audio)

Theme (theme)

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

Default Stream Type (defaultStreamType)

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

Target Live Window (targetLiveWindow)

NoneInfinity0NaN

Title (title)

Forward Seek Offset (forwardSeekOffset)

Backward Seek Offset (backwardSeekOffset)

Playback Rates (playbackRates)

Default Duration (defaultDuration)

Default Show Remaining Time (defaultShowRemainingTime)

Placeholder Image (placeholder)

Primary Color (primaryColor)

Secondary Color (secondaryColor)

Accent Color (accentColor)

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

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

No Hot Keys (nohotkeys)

Hot Keys (hotkeys)

Debug (debug)

--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-selectmenu
--top-rendition-selectmenu
--bottom-rendition-selectmenu
--playback-rate-button
--bottom-playback-rate-button
--audio-track-selectmenu
--top-audio-track-selectmenu
--bottom-audio-track-selectmenu
--captions-button
--top-captions-button
--bottom-captions-button
--captions-selectmenu
--top-captions-selectmenu
--bottom-captions-selectmenu
--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