Mux Player for web

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

npm install @mux/mux-player@latest

Yarn

yarn add @mux/mux-player@latest

Hosted

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

Example HTML element implementation

<script src="https://cdn.jsdelivr.net/npm/@mux/mux-player"></script>
<mux-player
  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

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

Yarn

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

Example React implementation

import MuxPlayer from "@mux/mux-player-react"; 

export default function App() {
  return (
    <MuxPlayer
      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 shown in the examples above, the available controls will adjust based on your video's stream type, live or on-demand.

Mux Player will also take into account the size that the player is being displayed at, regardless of the browser window size, and will selectively hide controls that won't fit in the UI.

In the latest version of Mux Player stream type is automatically set and you don't need to manually provide this. Player themes other than the default theme that need to know what the stream type is may need it defined to avoid the player having a delay in showing the correct controls. In this instance, you would set stream-type (streamType in React) to either on-demand or live so that the UI can adapt before any information about the video is loaded.

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

Set accent color for your brand

The default accent color of the player is Mux pink #fa50b5. You should override this with your brand color. Use the accent-color HTML attribute or accentColor React prop.

<mux-player
  playback-id="EcHgOK9coz5K4rjSwOkoE7Y7O01201YMIC200RI6lNxnhs"
  accent-color="#ea580c"
  metadata-video-title="Test VOD"
  metadata-viewer-user-id="user-id-007"
></mux-player>

For React:

<MuxPlayer
  playbackId="EcHgOK9coz5K4rjSwOkoE7Y7O01201YMIC200RI6lNxnhs"
  accentColor="#ea580c"
  metadata={{
    videoTitle: "Test VOD",
    ViewerUserId: "user-id-007"
  }}
/>