Monitor playback with Mux Data

Mux Data measures playback quality: startup time, rebuffering, playback failures, and watch time. Add the Mux Data extension to a player and it monitors whichever media that player is playing:

pnpm add @videojs/html @videojs/mux-video @videojs/mux-data

<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 extension renders nothing; place it inside the player, as a sibling of the media element.

Set the 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:

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

How it works

How much it reports depends on the engine playing the stream. Every media gets the playback metrics the media element itself can tell us. On top of that, the component recognizes hls.js and dash.js engines and hands them to the Mux Data SDK, which adds stream-level detail: rendition switches, segment request timing and throughput, and engine errors. Media with no JavaScript engine, like native HLS or a plain <video>, report the element-level metrics alone.

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:

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

Configuration

Related pages