---
title: Mux Data
description: Monitor playback quality and viewer experience by adding the Mux Data component to a player
---

import FrameworkCase from '@/components/docs/FrameworkCase.astro';
import DocsLink from '@/components/docs/DocsLink.astro';
import DocsLinkCard from '@/components/docs/DocsLinkCard.astro';
import Aside from '@/components/Aside.astro';

[Mux Data](https://www.mux.com/data) measures playback quality: startup time, rebuffering, playback failures, and watch time. Add the Mux Data component to a player and it monitors whichever media that player is playing:

<FrameworkCase frameworks={["react"]}>
```tsx title="App.tsx"
import { createPlayer } from '@videojs/react';
import { MuxData } from '@videojs/react/media/mux-data';
import { MuxVideo } from '@videojs/react/media/mux-video';
import { videoFeatures } from '@videojs/react/video';

const Player = createPlayer({ features: videoFeatures });

export default function App() {
  return (
    <Player.Provider>
      <Player.Container>
        <MuxVideo source={{ playbackId: 'BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM' }} playsInline />
        <MuxData /> {/* [!code focus] */}
      </Player.Container>
    </Player.Provider>
  );
}
```
</FrameworkCase>

<FrameworkCase frameworks={["html"]}>
```html title="index.html"
<video-player>
  <media-container>
    <mux-video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8" playsinline></mux-video>
    <mux-data></mux-data> <!-- [!code focus] -->
  </media-container>
</video-player>
```

Register the `<mux-data>` element by importing `@videojs/html/media/mux-data`.
</FrameworkCase>

That's the whole setup for Mux-hosted playback — no environment key required. The component renders nothing; place it inside the player, as a sibling of the media element.

<Aside type="note">
Mux Data is opt-in. No media element monitors playback on its own, Mux ones included, so nothing is measured and no beacons are sent until you add this component.
</Aside>

## Environment key

Mux Data needs to know which environment a view belongs to. For Mux-hosted playback it works that out on its own: the component reports the Mux playback ID as the view's `video_id`, and Mux attributes the view to the environment that owns that playback ID.

Set `envKey` when you monitor a source Mux doesn't host, like a self-hosted HLS or DASH stream. Find the key in the [Mux dashboard](https://dashboard.mux.com/settings/data):

<FrameworkCase frameworks={["react"]}>
```tsx
<HlsJsVideo src="https://example.com/stream.m3u8" />
<MuxData envKey="YOUR_ENV_KEY" /> {/* [!code focus] */}
```
</FrameworkCase>

<FrameworkCase frameworks={["html"]}>
```html
<hlsjs-video src="https://example.com/stream.m3u8"></hlsjs-video>
<mux-data env-key="YOUR_ENV_KEY"></mux-data> <!-- [!code focus] -->
```
</FrameworkCase>

An explicit key always wins, so set one to send Mux-hosted views to a specific environment.

## Any media element works

The component attaches to the media the player is using, not to a specific element type, so it monitors <DocsLink slug="reference/mux-video">MuxVideo</DocsLink>, <DocsLink slug="reference/hlsjs-video">HlsJsVideo</DocsLink>, <DocsLink slug="reference/dash-video">DashVideo</DocsLink>, and the rest alike. When the media exposes an [hls.js](https://github.com/video-dev/hls.js/) engine, the component hands that engine to the Mux Data SDK so it can report stream-level detail alongside the playback metrics.

The `video_id` it reports is the Mux playback ID for streams served from `stream.mux.com`, and the source URL otherwise. Each view also gets a generated `view_session_id`. Override either through `metadata`.

## Describe the view

Pass Mux Data [metadata](https://www.mux.com/docs/guides/make-your-data-actionable-with-metadata) to label views with your own titles, viewer IDs, and custom dimensions. It's an object, so it's a property rather than an attribute:

<FrameworkCase frameworks={["react"]}>
```tsx
<MuxData metadata={{ video_title: 'Big Buck Bunny', viewer_user_id: 'u_789' }} />
```
</FrameworkCase>

<FrameworkCase frameworks={["html"]}>
```ts
const muxData = document.querySelector('mux-data');
muxData.metadata = { video_title: 'Big Buck Bunny', viewer_user_id: 'u_789' }; // [!code focus]
```
</FrameworkCase>

## Configuration

The <DocsLink slug="reference/mux-data">MuxData reference</DocsLink> lists every option: the metadata and software fields above, plus the beacon domain, cookie, debug, and SDK settings. Most options update the current view in place; changing `MuxDataSdk`, `beaconCollectionDomain`, `debug`, or `disableCookies` restarts monitoring, ending the current view and starting a new one.

## See also

<DocsLinkCard slug="reference/mux-data">MuxData reference</DocsLinkCard>
<DocsLinkCard slug="reference/mux-video">MuxVideo element reference</DocsLinkCard>
<DocsLinkCard slug="reference/mux-audio">MuxAudio element reference</DocsLinkCard>
<DocsLinkCard slug="concepts/cast" description="The other media component you compose onto a player">Google Cast</DocsLinkCard>
