Play your assets with Mux Player

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

copy
npm install @mux/mux-player@latest 

Yarn

copy
yarn add @mux/mux-player@latest 

Hosted

copy
<script src="https://cdn.jsdelivr.net/npm/@mux/mux-player"></script> 

Example HTML element implementation

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

copy
npm install @mux/mux-player-react@latest 

Yarn

copy
yarn add @mux/mux-player-react@latest 

Example React implementation

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:

• Airplay
• Chromecast. Requires an extra step, see the customize look and feel guide.
• fullscreen
• picture-in-picture button
• volume controls