Mux Data

Mux 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:

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 />
      </Player.Container>
    </Player.Provider>
  );
}

<video-player>
  <media-container>
    <mux-video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8" playsinline></mux-video>
    <mux-data></mux-data>
  </media-container>
</video-player>

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.

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:

<HlsJsVideo src="https://example.com/stream.m3u8" />
<MuxData envKey="YOUR_ENV_KEY" />

<hlsjs-video src="https://example.com/stream.m3u8"></hlsjs-video>
<mux-data env-key="YOUR_ENV_KEY"></mux-data>

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 MuxVideo, HlsJsVideo, DashVideo, and the rest alike. When the media exposes an 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 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:

<MuxData metadata={{ video_title: 'Big Buck Bunny', viewer_user_id: 'u_789' }} />

const muxData = document.querySelector('mux-data');
muxData.metadata = { video_title: 'Big Buck Bunny', viewer_user_id: 'u_789' };

Configuration

The MuxData reference 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