| 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. 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 |
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 | 10 |
backwardSeekOffset |
number (seconds) |
Offset applied to the backward seek button | 10 |
defaultHiddenCaptions |
boolean |
Hide captions by default instead of showing them on initial load (when available) | false |
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 |
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" |
Specify the max-resolution you want delivered for this video. The only valid option is the string 720p |
"" |
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; } |
undefined |
ref |
React ref |
A React ref to the underlying MuxPlayerElement web component |
undefined |
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.