View a comprehensive list of every attribute, slot, CSS part and variable, and event that can be used with Mux Player.
| Prop | Type | Description | Default |
|---|---|---|---|
paused | boolean | Toggles the paused state of the media playback. | true |
currentTime | number | Identical to the native currentTime property | 0 |
volume | number | Identical to the native volume property | 1 |
noVolumePref | boolean | Disables storing the selected volume in localStorage. | false |
poster | string (URL) | Identical to the native poster property. Will use the automatically generated poster based on your playback-id by default unless in audio mode. Explicitly set this attribute to show a poster in audio mode. Remove the poster by setting the value to an empty string. | Derived |
playbackRate | number | Identical to the native playbackRate property | 1 |
crossOrigin | string | Identical to the native crossOrigin property, except default is "" (equivalent to "anonymous") | "" |
autoPlay | boolean | "any" | "muted" | For booleans, identical to the native autoplay property. Additionally support "muted" to start autoplay with the media muted and "any" to try autoplaying "by any means necessary" | false |
loop | boolean | Identical to the native loop property | false |
muted | boolean | Identical to the native muted property | false |
preload | string (enum) | Identical to the native preload property (with an appropriate equivalent for HLS media content) | undefined |
audio | boolean | Indicate that you want an "audio only" UI/chrome. This may be used for audio-only assets or audio+video assets. | false |
hotkeys | string (space separated enum list) | Similar to className, a space-separated string blocklist of keyboard shortcuts (hotkeys) you want to disable. Based on Media Chrome's implementation | '' |
nohotkeys | boolean | Toggles keyboard shortcut (hot keys) support when focus in inside the player | false |
thumbnailTime | number (seconds) | Time offset for the default poster image based on your playback-id. If no thumbnail-time is specified, start-time will be used by default. NOTE: This feature currently cannot be used with token.thumbnail. | 0 |
title | string | Title text to show for your content in the Mux Player UI. | "" |
placeholder | string (URI) | Image to show as various assets load. Typically a data URI when used | N/A |
primaryColor | string (Any valid CSS color style) | The primary color used by the player's UI | undefined |
secondaryColor | string (Any valid CSS color style) | The secondary color used by the player's UI | undefined |
accentColor | string (Any valid CSS color style) | The accent color used by the player's UI | undefined |
defaultShowRemainingTime | boolean | Show remaining playback time (instead of current playback time) by default | false |
playbackRates | number[] | Array of numbers used by the playback rate button. | N/A |
forwardSeekOffset | number (seconds) | Offset applied to the forward seek button and keyboard navigation | 10 |
backwardSeekOffset | number (seconds) | Offset applied to the backward seek button and keyboard navigation | 10 |
defaultHiddenCaptions | boolean | Hide captions by default instead of showing them on initial load (when available) | false |
defaultDuration | number (seconds) | Applies a duration value before the media has loaded. Useful when used in conjunction with preload="none" | N/A |
beaconCollectionDomain | string (domain name) | Assigns a custom domain to be used for Mux Data collection. NOTE: Must be set before playbackId to apply to Mux Data monitoring. | undefined ("litix.io") |
playbackId | string | The playback ID for your Mux Asset or Mux Live Stream. This will also be used for automatically assigning a poster image and (thumbnail previews)[https://docs.mux.com/guides/video/create-timeline-hover-previews]. For more, check out the Mux Docs. | undefined |
customDomain | string (domain name) | Assigns a custom domain to be used for Mux Video. | undefined ("mux.com") |
envKey | string | Your Mux Data environment key, if you want to override the default envKey inferred from your playbackId. NOTE: This is different than your API Key. Get your env key from the "Mux Data" part of your Mux Environments Dashboard | undefined (inferred) |
debug | boolean | Enables debug mode for the underlying playback engine (currently hls.js) and mux-embed, providing additional information in the console. NOTE: Must be set before playbackId to fully apply to debug logging contexts. | false |
disableTracking | boolean | Disables Mux Data tracking. For more, check out the Mux Docs | false |
disableCookies | boolean | Disables cookies used by Mux Data. For more, check out the Mux Docs. | false |
storyboardSrc | string (URL) | Full URL string for the storyboard asset. Typically derived from the playbackId, setting this attribute will override the derived storyboard. | undefined |
streamType | "on-demand" | "live" | "ll-live" | "live:dvr" | "ll-live:dvr" | The type of stream associated with your Mux Asset. Used to determine what UI/controls to show and what optimizations to make for playback. | "on-demand" |
defaultStreamType | "on-demand" | "live" | The default assumed streamType before any playbackId has been loaded. Used along with targetLiveWindow to determine what UI/controls to show by default. | on-demand |
targetLiveWindow | number | An offset representing the seekable range for live content, where Infinity means the entire live content is seekable (aka "standard DVR"). Used along with streamType to determine what UI/controls to show. | (inferred from playbackId and/or streamType, otherwise NaN) |
startTime | number (seconds) | Specify where in the media's timeline you want playback to start. | 0 |
preferPlayback | "mse" | "native" | Specify if Mux Player should try to use Media Source Extension or native playback (if available). If no value is provided, Mux Player will choose based on what's deemed optimal for content and playback environment. | Varies |
maxResolution | "720p" | "1080p" | "1440p" | "2160p" | Specify the maximum resolution you want delivered for this video. | N/A |
minResolution | "480p" | "540p" | "720p" | "1080p" | "1440p" | "2160p" | Specify the minimum resolution you want delivered for this video. | N/A |
renditionOrder | "desc" | Change the order in which renditions are provided in the src playlist. Can impact initial segment loads. Currently only support "desc" for descending order | N/A |
programStartTime | number | Apply PDT-based instant clips to the beginning of the media stream. | N/A |
programEndTime | number | Apply PDT-based instant clips to the end of the media stream. | N/A |
assetStartTime | number | Apply media timeline-based instant clips to the beginning of the media stream. | N/A |
assetEndTime | number | Apply media timeline-based instant clips to the end of the media stream. | N/A |
metadata | object* | An object for configuring any metadata you'd like to send to Mux Data | undefined |
tokens | object* | An object for setting all signed URL tokens with the signature { playback?: string; thumbnail?: string; storyboard?: string; drm?: string; } | undefined |
castCustomData | object (JSON-serializable) | Custom Data to send to your Google cast receiver on initial load. If none is provided, various Mux key/value pairs will be sent. | Mux-specific object |
playerInitTime | number (timestamp) | Overrides the default player initialization time, used by Mux Data for time-based quality-of-experience (QOE) metrics. It will be inferred from instantiation time by default. | Varies |
ref | React ref | A React ref to the underlying MuxPlayerElement web component | undefined |
proudlyDisplayMuxBadge | boolean | Controls whether to show the Mux badge in the player UI | false |
By importing from @mux/mux-player-react/lazy, you gain access to the following prop:
| Prop | Type | Description | Default |
|---|---|---|---|
loading | "page" | "viewport" | Specifies when Mux Player React Lazy loads the player and replaces the placeholder. If "page", the player will load after the page loads and executes the initial JavaScript bundle. "viewport" extends this behavior by also waiting until the placeholder has entered the viewport | "viewport" |
<MuxPlayer/> has a number of callbacks associated with events for media loading, playback, and the player itself. For example, a callback for 'loadstart' event is onLoadStart. See mux-player's reference for a list of events.
See mux-player's reference for a list of all available CSS variables.
See mux-player's reference for a list of all available CSS parts.
See mux-player's reference for a list of all available slots.