Skip to content

Latest commit

 

History

History
85 lines (73 loc) · 29.9 KB

REFERENCE.md

File metadata and controls

85 lines (73 loc) · 29.9 KB
Raw

Props

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
ref React ref A React ref to the underlying MuxPlayerElement web component undefined

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

<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.

CSS Variables

See mux-player's reference for a list of all available CSS variables.

CSS Parts

See mux-player's reference for a list of all available CSS parts.

Slots

See mux-player's reference for a list of all available slots.