Skip to Content
Mux Docs: Home
Welcome to the new Mux Docs.
The old version is still available here

Play your assets with Mux Player

Mux Player is a drop in component for adding Mux videos into your web application

Mux Player is a drop-in component that you can put in your web application to play Mux assets. Mux Player supports:

  • on-demand assets
  • live streams
  • low-latency live streams
  • DVR mode for live or low-latency live streams

Mux Player can be used as either a web component (<mux-player> from @mux/mux-player), or a React component (<MuxPlayer /> from @mux/mux-player-react)

Mux Player is fully-featured video player for content hosted by Mux Video. Mux Player is fully integrated with Mux Data without any extra configuration. Mux Player provides a responsive UI based on video player dimensions and stream type, automatic thumbnail previews and poster images, and modern video player capabilities (fullscreen, picture-in-picture, Chromecast, Airplay).

Quick start

Here are some examples of Mux Player in action.

HTML element

Install with either npm, yarn or load Mux Player from the hosted script.

npm install @mux/mux-player@latest
yarn add @mux/mux-player@latest
<script src="https://cdn.jsdelivr.net/npm/@mux/mux-player"></script>
<script src="https://cdn.jsdelivr.net/npm/@mux/mux-player"></script>
<mux-player
  stream-type="on-demand"
  playback-id="EcHgOK9coz5K4rjSwOkoE7Y7O01201YMIC200RI6lNxnhs"
  metadata-video-title="Test VOD"
  metadata-viewer-user-id="user-id-007"
></mux-player>

When using the HTML element version of Mux Player, you will see the Player Software in Mux Data come through as mux-player.

React

You will need to select one of the package options below. Both examples will automatically update the player. You can always anchor the package to a specific version if needed.

npm install @mux/mux-player-react@latest
yarn add @mux/mux-player-react@latest
import MuxPlayer from "@mux/mux-player-react"; 

export default function App() {
  return (
    <MuxPlayer
      streamType="on-demand"
      playbackId="EcHgOK9coz5K4rjSwOkoE7Y7O01201YMIC200RI6lNxnhs"
      metadata={{
        video_id: "video-id-54321",
        video_title: "Test video title",
        viewer_user_id: "user-id-007",
      }}
    />
  );
}

When using the React version of Mux Player, you will see the Player Software in Mux Data come through as mux-player-react.

Adaptive controls

As seen in the examples above, the available player controls will adjust based on your video's stream type:

  • on-demand (video on demand)
  • live (a regular live stream)
  • ll-live (a low latency live stream)
  • live:dvr (a live stream that allows the user to seek back)
  • ll-live:dvr (a low latency live stream that allows the user to seek back)

The following will also appear in some use cases based on support detection:

Understand the features and core functionality of Mux Player
Interate Mux Player in your web application. See examples in popular front end frameworks.
Customize Mux Player to match your brand

Was this page helpful?