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 — a self-hosted HLS or DASH stream, for example. 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' };

Options

Changing MuxDataSdk, beaconCollectionDomain, debug, or disableCookies restarts monitoring, which ends the current view and starts a new one. The rest update the view in place.

See also