Mux-integrated path

On a narrow screen, swipe the diagram horizontally to keep its labels readable.

Architecture verified

Mux Player supplies a complete UI for Mux assets, including VOD and live. It integrates with Mux Data and uses HLS.js or native HLS. The reviewed documentation does not support the screenshot’s broad native-HLS/DASH claim; DASH engine support is a different selection question.

Minimal React player synthesis

// Illustrative; playbackId comes from your backend/media catalog.
import MuxPlayer from "@mux/mux-player-react";
export function TrainingVideo({ playbackId }) {
  return <MuxPlayer playbackId={playbackId}
    metadata={{ video_id: "training-01", video_title: "Introduction" }} />;
}

Decision and trade-off synthesis

An enterprise academy with a small video team can use Mux Player plus managed processing, delivery and QoE tooling. That buys integration speed while binding the design to vendor identifiers, commercial service costs and export/migration considerations. The UI package and the hosting service have different cost models.

Pitfall → improvement synthesis

For protected content, get signed playback authorization from a trusted backend. Never embed signing keys in React. Native HLS may expose different quality-selection behavior from MSE; validate Safari rather than assuming every control is identical.