# Props | Prop | Type | Description | Default | | -------------------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------- | | `paused` | `boolean` | Toggles the `paused` state of the media playback. | `true` | | `currentTime` | `number` | Identical to the [native `currentTime` property](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime) | `0` | | `volume` | `number` | Identical to the [native `volume` property](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/volume) | `1` | | `noVolumePref` | `boolean` | Disables storing the selected volume in localStorage. | `false` | | `noMutedPref` | `boolean` | Disables storing the muted preference in localStorage. | `false` | | `poster` | `string` (URL) | Identical to the [native `poster` property](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement#properties). 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](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playbackRate) | `1` | | `crossOrigin` | `string` | Identical to the [native `crossOrigin` property](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/crossOrigin), except default is `""` (equivalent to `"anonymous"`) | `""` | | `autoPlay` | `boolean \| "any" \| "muted"` | For booleans, identical to the [native `autoplay` property](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/autoplay). 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](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loop) | `false` | | `muted` | `boolean` | Identical to the [native `muted` property](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/muted) | `false` | | `preload` | `string` (enum) | Identical to the [native `preload` property](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement#properties) (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](https://media-chrome-docs.vercel.app/en/keyboard-shortcuts) | `''` | | `nohotkeys` | `boolean` | Toggles keyboard shortcut (hot keys) support when focus is inside the player | `false` | | `thumbnailTime` | `number` (seconds) | [Time offset](https://docs.mux.com/guides/video/get-images-from-a-video#thumbnail-query-string-parameters) 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. (In most browsers the `title` property causes a tooltip on hover which is sometimes undesired. Use `videoTitle` to only show the title in the Mux player UI and not the tooltip.) | `""` | | `videoTitle` | `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](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) 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](https://docs.mux.com/guides/data/monitor-html5-video-element#features) 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](https://docs.mux.com/guides/video/get-images-from-a-video) and (thumbnail previews)[https://docs.mux.com/guides/video/create-timeline-hover-previews]. For more, check out the [Mux Docs](https://docs.mux.com/guides/video/play-your-videos#1-get-your-playback-id). | `undefined` | | `customDomain` | `string` (domain name) | Assigns a custom domain to be used for [Mux Video](https://docs.mux.com/guides/video/use-a-custom-domain-for-streaming#use-your-own-domain-for-delivering-videos-and-images). | `undefined` (`"mux.com"`) | | `envKey` | `string` | Your [Mux Data environment key](https://docs.mux.com/guides/data/mux-data-faqs#how-should-i-use-mux-environments), 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](https://dashboard.mux.com/environments) | `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](https://docs.mux.com/guides/data/monitor-html5-video-element#features) | `false` | | `disableCookies` | `boolean` | Disables cookies used by Mux Data. For more, check out the [Mux Docs](https://docs.mux.com/guides/data/monitor-html5-video-element#disable-cookies). | `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"` | Limits the highest resolution rendition requested from the server. Renditions above this are excluded from the playlist entirely. For client-side dimension-based capping, see `capRenditionToPlayerSize`. | N/A | | `minResolution` | `"480p" \| "540p" \| "720p" \| "1080p" \| "1440p" \| "2160p"` | Limits the lowest resolution rendition requested from the server. Renditions below this are excluded from the playlist entirely. | N/A | | `maxAutoResolution` | `string` (`"720p"`, `"1080p"`, `"1440p"`, or `"2160p"`) | Caps automatic resolution selection to align with [Mux Video pricing tiers](https://www.mux.com/docs/pricing/video#resolution-based-pricing). The player won't automatically select resolutions above this cap. Unlike `maxResolution`, all renditions remain available. Unlike `capRenditionToPlayerSize`, this is independent of player dimensions. | 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 | | `capRenditionToPlayerSize` | `boolean` | Caps video resolution based on the player's display dimensions to avoid downloading video larger than can be displayed. When `undefined` (default), caps to player size with a 720p minimum floor. Set to `true` to cap strictly to player dimensions (may use lower resolutions for small players). Set to `false` to disable dimension-based capping. Independent of `maxResolution` (server-side) and `maxAutoResolution` (pricing cap). | `undefined` (Mux optimized) | | `programStartTime` | `number` | Apply PDT-based [instant clips](https://docs.mux.com/guides/create-instant-clips) to the beginning of the media stream. | N/A | | `programEndTime` | `number` | Apply PDT-based [instant clips](https://docs.mux.com/guides/create-instant-clips) to the end of the media stream. | N/A | | `assetStartTime` | `number` | Apply media timeline-based [instant clips](https://docs.mux.com/guides/create-instant-clips) to the beginning of the media stream. | N/A | | `assetEndTime` | `number` | Apply media timeline-based [instant clips](https://docs.mux.com/guides/create-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](https://docs.mux.com/guides/data/make-your-data-actionable-with-metadata) | `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](https://developers.google.com/cast/docs/reference/web_sender/chrome.cast.media.MediaInfo#customData) 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 | | `fullscreenElement` | `string` (Element ID) | The ID of a DOM element to use as the fullscreen container instead of the default player element. Provides more control over the fullscreen experience for complex layouts. | `undefined` | | `playerInitTime` | `number` (timestamp) | Overrides the default [player initialization time](https://docs.mux.com/guides/make-your-data-actionable-with-metadata#optional-configurable-metadata), used by Mux Data for time-based [quality-of-experience (QOE) metrics](https://docs.mux.com/guides/understand-metric-definitions). It will be inferred from instantiation time by default. | Varies | | `ref` | [React `ref`](https://reactjs.org/docs/refs-and-the-dom.html) | A [React `ref`](https://reactjs.org/docs/refs-and-the-dom.html) to the underlying [`MuxPlayerElement`](../mux-player/REFERENCE.md) web component | `undefined` | | `proudlyDisplayMuxBadge` | `boolean` | Controls whether to show the Mux badge in the player UI | `false` | | `preferCmcd` | `"query" \| "header"\| "none"` | Preference for how CMCD data is sent provided in Mux Video requests. Defaults to none for performance reasons. | `"none"` | ## Mux Player React Lazy 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"` | # Callbacks `` 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](../mux-player/REFERENCE.md#events) for a list of events. # CSS Variables See [mux-player's reference](../mux-player/REFERENCE.md#css-variables) for a list of all available CSS variables. # CSS Parts See [mux-player's reference](../mux-player/REFERENCE.md#css-parts) for a list of all available CSS parts. # Slots See [mux-player's reference](../mux-player/REFERENCE.md#slots) for a list of all available slots.