# Attributes
| Attribute | Type | Description | Default |
| ----------------------------- | ----------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- |
| `autoplay` | `boolean \| "any" \| "muted"` | For booleans, identical to the [`<video autoplay/>` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-autoplay). Additionally support `"muted"` to start autoplay with the media muted and `"any"` to try autoplaying "by any means necessary" | `false` |
| `crossorigin` | `string` (enum) | Identical to the [`<video crossorigin/>` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-crossorigin), except default is `""` (equivalent to `"anonymous"`) | `""` |
| `loop` | `boolean` | Identical to the [`<video loop/>` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-loop) | `false` |
| `muted` | `boolean` | Like the [`<video muted/>` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-muted), only updates the [`muted` property](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/muted) instead of the [`defaultMuted` property](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/defaultMuted) | `false` |
| `poster` | `string` (URL) | Identical to the [`<video poster/>` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-poster). 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 |
| `preload` | `string` (enum) | Identical to the [`<video preload/>` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-preload) (with an appropriate equivalent for HLS media content) | Varies |
| `volume` | `number` (0-1) | Attribute equivalent of the [`volume` property](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/volume) | Varies |
| `playbackrate` | `number` | Attribute equivalent of the [`playbackRate` property](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playbackRate) | `1` |
| `env-key` | `string` | Your Mux Data environment key. Note that 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). If unset, the environment will be inferred based on your Mux Video asset. | N/A |
| `debug` | `boolean` | Enables debug mode for the underlying playback engine (currently hls.js) and mux-embed, providing additional information in the console. | `false` |
| `no-volume-pref` | `boolean` | Disables storing the selected volume in localStorage. | `false` |
| `disable-tracking` | `boolean` | Disables Mux Data tracking. For more, check out the [Mux Docs](https://docs.mux.com/guides/data/monitor-html5-video-element#features) | `false` |
| `disable-cookies` | `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` |
| `playback-id` | `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). | N/A |
| `prefer-playback` | `"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 |
| `max-resolution` | `"720p" \| "1080p" \| "1440p" \| "2160p"` | Specify the maximum resolution you want delivered for this video. | N/A |
| `min-resolution` | `"480p" \| "540p" \| "720p" \| "1080p" \| "1440p" \| "2160p"` | Specify the minimum resolution you want delivered for this video. | N/A |
| `rendition-order` | `"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 |
| `program-start-time` | `number` | Apply PDT-based [instant clips](https://docs.mux.com/guides/create-instant-clips) to the beginning of the media stream. | N/A |
| `program-end-time` | `number` | Apply PDT-based [instant clips](https://docs.mux.com/guides/create-instant-clips) to the end of the media stream. | N/A |
| `asset-start-time` | `number` | Apply media timeline-based [instant clips](https://docs.mux.com/guides/create-instant-clips) to the beginning of the media stream. | N/A |
| `asset-end-time` | `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-video-id` | `string` | This is an arbitrary ID sent to [Mux Data](https://docs.mux.com/guides/data/make-your-data-actionable-with-metadata#high-priority-configurable-metadata) that should map back to a record of this video in your database. | N/A |
| `metadata-video-title` | `string` | This is an arbitrary title for your video that will be passed in as metadata into [Mux Data](https://docs.mux.com/guides/data/make-your-data-actionable-with-metadata#high-priority-configurable-metadata). Adding a title will give you useful context in your Mux Data dashboard. (optional, but encouraged) | N/A |
| `metadata-viewer-user-id` | `string` | If you have a logged-in user, this should be an anonymized ID value that maps back to the user in your database that will be sent to [Mux Data](https://docs.mux.com/guides/data/make-your-data-actionable-with-metadata#high-priority-configurable-metadata). Take care to not expose personal identifiable information like names, usernames or email addresses. (optional, but encouraged) | N/A |
| `metadata-*` | `string` | This `metadata-*` syntax can be used to pass any arbitrary [Mux Data](https://docs.mux.com/guides/data/make-your-data-actionable-with-metadata) metadata fields | N/A |
| `beacon-collection-domain` | `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. | N/A |
| `custom-domain` | `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). | N/A |
| `stream-type` | `"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"` |
| `default-stream-type` | `"on-demand" \| "live"` | The default assumed `stream-type` before any `playback-id` has been loaded. Used along with `target-live-window` to determine what UI/controls to show by default. | `on-demand` |
| `target-live-window` | `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 `stream-type` to determine what UI/controls to show. | (inferred from `playback-id` and/or `stream-type`, otherwise `NaN`) |
| `start-time` | `number` (seconds) | Specify where in the media's timeline you want playback to start. | `0` |
| `default-hidden-captions` | `boolean` | Hide captions by default instead of showing them on initial load (when available) | `false` |
| `default-duration` | `number` (seconds) | Applies a duration value before the media has loaded. Useful when used in conjunction with `preload="none"` | N/A |
| `primary-color` | `string` (Any valid CSS color style) | The primary color used by the player's UI | N/A |
| `secondary-color` | `string` (Any valid CSS color style) | The secondary color used by the player's UI | N/A |
| `accent-color` | `string` (Any valid CSS color style) | The accent color used by the player's UI | N/A |
| `forward-seek-offset` | `number` (seconds) | Offset applied to the forward seek button and keyboard navigation | `10` |
| `backward-seek-offset` | `number` (seconds) | Offset applied to the backward seek button and keyboard navigation | `10` |
| `playback-token` | `string` | The playback token for signing the `src` URL. | N/A |
| `thumbnail-token` | `string` | The thumbnail token for signing the `poster` URL. | N/A |
| `storyboard-token` | `string` | The storyboard token for signing the storyboard URL. | N/A |
| `drm-token` | `string` | The token for signing [DRM](https://www.mux.com/beta/drm) license and related URLs. | N/A |
| `storyboard-src` | `string` (URL) pointing to a [.vtt](https://image.mux.com/FuJSYrK0014ec2LPnm11bzC2MAySAQPqA/storyboard.vtt) file | Full URL string for the storyboard asset. Typically derived from the `playbackId`, setting this attribute will override the derived storyboard. | `undefined` |
| `thumbnail-time` | `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 `thumbnail-token`. | `0` |
| `audio` | `boolean` | Indicate that you want an "audio only" UI/chrome. This may be used for audio-only assets or audio+video assets. | `false` |
| `nohotkeys` | `boolean` | Toggles keyboard shortcut (hot keys) support when focus in inside the player | `false` |
| `hotkeys` | [`DOMTokenList`](https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList) (space separated enum list) | A blocklist of keyboard shortcuts (hotkeys) you want to disable. Based on [Media Chrome's implementation](https://media-chrome-docs.vercel.app/en/keyboard-shortcuts) | N/A |
| `playbackrates` | `number[]` (space separated list) | A space separated string of playback rates used by the playback rate button. | N/A |
| `default-show-remaining-time` | `boolean` | Show remaining playback time (instead of current playback time) by default | `false` |
| `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](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) when used | N/A |
| `cast-receiver` | `string` (Receiver ID) | The app ID to use for a custom [Google cast receiver](https://developers.google.com/cast/docs/web_receiver/basic). If none is provided, the default receiver app will be used. | N/A |
| `no-tooltips` | `boolean` | Toggles disabling tooltips in the UI | `false` |
| `player-init-time` | `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 |
| `proudly-display-mux-badge` | `boolean` | Display the Mux badge in the player UI. | `false` |
<!-- UNDOCUMENTED
// NEW STREAM TYPE VALUES
| `stream-type` | `"on-demand" \| "live" \| "unknown"` | The type of stream associated with your Mux Asset. Used along with `target-live-window` to determine what UI/controls to show. | (inferred from `playback-id`, otherwise `"unknown"`) |
| `prefer-cmcd` | `"query" \| "header" \| "none"` | Preference for how CMCD data is sent provided in Mux Video requests. Defaults to query params for performance. | `"query"` |
| `playsinline` | `boolean` | Identical to the [`<video playsinline/>` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-playsinline) | `false` |
-->
# Methods
| Method | Description |
| --------- | -------------------------------------------------------------------------------------------------------------------- |
| `play()` | Identical to the [native `play()` method](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play). |
| `pause()` | Identical to the [native `pause()` method](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause). |
| `addCuePoints()` | Add an array of CuePoints with the shape `{ startTime: number; endTime?: number, value: any; }` to the Mux Player instance |
| `addChapters()` | Add an array of chapters with the shape `{ startTime: number; endTime?: number, value: string; }` to the Mux Player instance |
| `getStartDate()` | Will return a Date that matches the earliest PDT in your stream. Identical to [native `getStartDate()` method](https://html.spec.whatwg.org/multipage/media.html#dom-media-getstartdate), if exists. |
<!-- UNDOCUMENTED
| `addTextTrack()` | Identical to the [native `addTextTrack()` method](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement#methods). |
| `removeTextTrack()` | Removes the [`TextTrack`](https://developer.mozilla.org/en-US/docs/Web/API/TextTrack) provided as an argument from the Mux Player instance's `textTracks`. |
-->
# Properties
| Prop | Type | Description | Default |
| ---------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- |
| `paused` <sub><sup>Read only</sup></sub> | `boolean` | Identical to the [native `paused` property](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/paused) | `true` |
| `duration` <sub><sup>Read only</sup></sub> | `number` | Identical to the [native `duration` property](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/duration) | `NaN` |
| `ended` <sub><sup>Read only</sup></sub> | `boolean` | Identical to the [native `ended` property](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ended) | `false` |
| `buffered` <sub><sup>Read only</sup></sub> | [`TimeRanges`](https://developer.mozilla.org/en-US/docs/Web/API/TimeRanges) | Identical to the [native `buffered` property](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/buffered) | (empty `TimeRanges` instance) |
| `seekable` <sub><sup>Read only</sup></sub> | [`TimeRanges`](https://developer.mozilla.org/en-US/docs/Web/API/TimeRanges) | Identical to the [native `seekable` property](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seekable) | (empty `TimeRanges` instance) |
| `readyState` <sub><sup>Read only</sup></sub> | `number` (enum) | Identical to the [native `readyState` property](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState) | `NaN` |
| `videoWidth` <sub><sup>Read only</sup></sub> | `number` | Identical to the [native `videoWidth` property](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement/videoWidth) | `0` |
| `videoHeight` <sub><sup>Read only</sup></sub> | `number` | Identical to the [native `videoHeight` property](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement/videoHeight) | `0` |
| `currentTime` | `number` | Identical to the [native `currentTime` property](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime) | `0` |
| `currentPdt` | `Date` | Will return a Date that matches current PDT in your stream. Accounting for 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` |
| `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. Remove the poster by setting the value to an empty string. | Derived |
| `storyboard` | `string` (URL) | URL for the [Mux Storyboard](https://docs.mux.com/guides/video/create-timeline-hover-previews). Will automatically generate the url based on your `playback-id` and token. Will not be set if the provided storyboardToken is invalid. | Derived |
| `playbackRate` | `number` | Identical to the [native `playbackRate` property](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playbackRate) | `1` |
| `defaultPlaybackRate` | `number` | Identical to the [native `defaultPlaybackRate` property](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/defaultPlaybackRate) | `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` |
| `defaultMuted` | `boolean` | Identical to the [native `defaultMuted` property](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/defaultMuted) | `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` |
| `hasPlayed` <sub><sup>Read only</sup></sub> | `boolean` | Indicates whether playback has begun for the current media asset associated with the `playback-id` | `false` |
| `inLiveWindow` <sub><sup>Read only</sup></sub> | `boolean` | Indicates whether the playback time is currently near the live edge (only relevant for live/dvr content) | `false` |
| `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` <sub><sup>Read only\*</sup></sub> | [`DOMTokenList`](https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList) | A `DOMTokenList` (similar to [`classList`](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList)) 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 in 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 `thumbnail-token`. | `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](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. Note that 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). If `undefined`, the environment will be inferred based on your Mux Video asset. | `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` |
| `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 `stream-type` before any `playback-id` has been loaded. Used along with `target-live-window` 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 `stream-type` to determine what UI/controls to show. | (inferred from `playback-id` and/or `stream-type`, otherwise `NaN`) |
| `liveEdgeOffset` <sub><sup>Read only</sup></sub> | `number` | the earliest playback time that will be treated as playing "at the live edge" for live content. | (inferred from `playback-id` and/or `stream-type`, 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 |
| `proudlyDisplayMuxBadge` | `boolean` | Display the Mux badge in the player UI. | `false` |
| `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](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 |
| `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 |
| `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). If any `metadata-*` attributes are set, they will take precedence. | `undefined` |
| `playbackToken` | `string` | The playback token for signing the `src` URL. | `undefined` |
| `thumbnailToken` | `string` | The thumbnail token for signing the `poster` URL. | `undefined` |
| `storyboardToken` | `string` | The storyboard token for signing the storyboard URL. | `undefined` |
| `drmToken` | `string` | The token for signing [DRM](https://www.mux.com/beta/drm) license and related URLs. | `undefined` |
| `storyboardSrc` | `string` (URL) | Full URL string for the storyboard asset. Setting this will override the storyboard URL derived from the playback ID. | `undefined` |
| `tokens` | `object`\* | An object for setting all signed URL tokens with the signature `{ playback?: string; thumbnail?: string; storyboard?: string; drm?: string; }`. If any `*token` properties or `*-token` attributes are set, they will take precedence. | `undefined` |
| `textTracks` | [`TextTrackList`](https://developer.mozilla.org/en-US/docs/Web/API/TextTrackList) | Identical to the [native `textTracks` property](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/textTracks) | (empty `TextTrackList` instance) |
| `cuePoints` <sub><sup>Read only</sup></sub> | `Array<{ startTime: number; endTime?: number, value: any; }>` | The array of CuePoints for the current media, added via `addCuePoints(cuePoints)`. | `[]` |
| `chapters` <sub><sup>Read only</sup></sub> | `Array<{ startTime: number; endTime?: number, value: string; }>` | The array of Chapters for the current media, added via `addChapters(chapters)`. | `[]` |
| `activeCuePoint` <sub><sup>Read only</sup></sub> | `{ startTime: number; endTime?: number, value: any; }` | The current active CuePoint, determined based on the player's `currentTime`. | `undefined` |
| `activeChapter` <sub><sup>Read only</sup></sub> | `{ startTime: number; endTime?: number, value: string; }` | The current active Chapter, determined based on the player's `currentTime`. | `undefined` |
| `castReceiver` | `string` (Receiver ID) | The app ID to use for a custom [Google cast receiver](https://developers.google.com/cast/docs/web_receiver/basic). If none is provided, the default receiver app will be used. | `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 |
| `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 |
<!-- UNDOCUMENTED
// NEW STREAM TYPE VALUES
| `streamType` | `"on-demand" \| "live" \| "unknown"` | The type of stream associated with your Mux Asset. Used along with `target-live-window` to determine what UI/controls to show. | (inferred from `playback-id`, otherwise `"unknown"`) |
| `preferCmcd` | `"query" \| "header" \| "none"` | Preference for how CMCD data is sent provided in Mux Video requests. Defaults to query params for performance. | `"query"` |
| `playsInline` | `boolean` | Identical to the native `playsInline` property (property equivalent to [`<video playsinline/>` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-playsinline) | `false` |
| `src` | `string` (URL) | Full URL string for the media asset. Typically derived from the `playbackId` | `undefined` |
| `_hls` <sub><sup>Read only</sup></sub> | [`Hls`](https://github.com/video-dev/hls.js/blob/master/docs/API.md) | Underlying playback engine used by Mux Player. A new instance is created per `playbackId` | `undefined` |
| `mux` <sub><sup>Read only</sup></sub> | [`mux-embed`](https://docs.mux.com/guides/data/monitor-hls-js) | Underlying Mux Data SDK monitor. A new instance is created per `playbackId`. | `undefined` |
-->
# Events
`<mux-player>` has a number of events for media loading, playback, and the player itself. Listen to these events using `addEventListener()` or by assigning an event listener to the `oneventname` property of `<mux-player>`.
| Event | Description |
| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| `abort` | Identical to the native [`abort` event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/abort_event) |
| `canplay` | Identical to the native [`canplay` event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canplay_event) |
| `canplaythrough` | Identical to the native [`canplaythrough` event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canplaythrough_event) |
| `durationchange` | Identical to the native [`durationchange` event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/durationchange_event) |
| `emptied` | Identical to the native [`emptied` event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/emptied_event) |
| `ended` | Identical to the native [`ended` event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ended_event) |
| `error` | Identical to the native [`error` event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/error_event) |
| `loadeddata` | Identical to the native [`loadeddata` event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadeddata_event) |
| `loadedmetadata` | Identical to the native [`loadedmetadata` event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadedmetadata_event) |
| `loadstart` | Identical to the native [`loadstart` event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadstart_event) |
| `pause` | Identical to the native [`loadstart` event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause_event) |
| `play` | Identical to the native [`play` event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play_event) |
| `playing` | Identical to the native [`playing` event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playing_event) |
| `progress` | Identical to the native [`progress` event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/progress_event) |
| `ratechange` | Identical to the native [`ratechange` event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ratechange_event) |
| `resize` | Identical to the native [`resize` event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement/resize_event) |
| `seeked` | Identical to the native [`seeked` event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seeked_event) |
| `seeking` | Identical to the native [`seeking` event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seeking_event) |
| `stalled` | Identical to the native [`stalled` event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/stalled_event) |
| `suspend` | Identical to the native [`suspend` event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/suspend_event) |
| `timeupdate` | Identical to the native [`timeupdate` event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/timeupdate_event) |
| `volumechange` | Identical to the native [`volumechange` event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/volumechange_event) |
| `waiting` | Identical to the native [`waiting` event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/waiting_event) |
| `cuepointchange` | Similar to the native `TextTrack` [`cuechange` event](https://developer.mozilla.org/en-US/docs/Web/API/TextTrack/cuechange_event), only the event's `detail` will be the `activeCuePoint` |
| `chapterchange` | Similar to the native `TextTrack` [`cuechange` event](https://developer.mozilla.org/en-US/docs/Web/API/TextTrack/cuechange_event), only the event's `detail` will be the `activeChapter` |
# CSS Variables
This is the list of CSS variables for showing/hiding specific controls.
```
mux-player {
/* Hide all controls at once */
--controls: none;
/* Target all sections by excluding the section prefix */
--play-button: none;
--live-button: none;
--seek-backward-button: none;
--seek-forward-button: none;
--mute-button: none;
--captions-button: none;
--airplay-button: none;
--pip-button: none;
--fullscreen-button: none;
--cast-button: none;
--playback-rate-button: none;
--volume-range: none;
--time-range: none;
--time-display: none;
--title-display: none;
--duration-display: none;
}
```
Each of the above can be paired with a prefix for `top`, `center`, `bottom`
```
mux-player {
/* Target a specific section by prefixing the CSS var with (top|center|bottom) */
--center-controls: none;
--bottom-play-button: none;
}
```
Other CSS variables:
```
mux-player {
/* The controls backdrop color */
--controls-backdrop-color: rgb(0 0 0 / 0%);
/*
* Controls how the media is sized and positioned inside of the <video> element
* Supports everything the standard CSS properties support
*/
--media-object-size: cover;
--media-object-position: center;
}
```
Turning this off completely has implications on the accessibility of the controls as they may not meet [the contrast ratio requirements for WCAG 2.1](https://www.w3.org/TR/WCAG/#contrast-minimum) without it.
# CSS Parts
Mux Player uses a [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) to encapsulate its styles and behaviors. As a result, it's not possible to target its internals with the usual CSS selectors. Instead, some components expose parts that can be targeted with the [CSS part selector](https://developer.mozilla.org/en-US/docs/Web/CSS/::part), or `::part()`.
```html
<style>
mux-player::part(center play button) {
display: none;
}
</style>
<mux-player playback-id="DS00Spx1CV902MCtPj5WknGlR102V5HFkDe"></mux-player>
```
Supported parts: `top`, `center`, `bottom`, `layer`, `media-layer`, `poster-layer`, `vertical-layer`, `centered-layer`, `gesture-layer`, `poster`, `live`, `play`, `button`, `seek-backward`, `seek-forward`, `mute`, `captions`, `airplay`, `pip`, `fullscreen`, `cast`, `playback-rate`, `volume`, `range`, `time`, `display`, `video`
CSS parts allow you to style each part individually with a selector like `::part(center play button)` or target multiple elements if the part is assigned to multiple elements internally, usage `::part(button)`. Every CSS property can be declared in the selector, this makes it a very powerful API.
# Slots
Mux player can accept a [slotted element](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots) as a poster image. The HTML would look similar to the following snippet:
```html
<mux-player playback-id="VcmKA6aqzIzlg3MayLJDnbF55kX00mds028Z65QxvBYaA">
<img slot="poster" src="https://image.mux.com/VcmKA6aqzIzlg3MayLJDnbF55kX00mds028Z65QxvBYaA/thumbnail.webp">
</mux-player>
```
The markup is more verbose but it comes with some benefits:
- The poster image loads faster as it's picked up by the browser earlier.
- Allows you to use responsive images with the img `srcset` attribute.