Mux logo - video home
Docs
  • Introduction to Video
  • Stream video files
  • Start live streaming
  • Build real-time video experiences
  • Make API requests
  • Play your videos
  • Use Mux Player
    • Core functionality
    • Integrate in your webapp
    • Customize look and feel
    • Lazy-loading
    • Advanced usage
    • Examples
    • FAQs
    • Releases
  • Use a custom domain for streaming
  • Enable static MP4 renditions
  • Download for offline editing
  • Embed videos for social media
  • Listen for webhooks
  • Secure video playback
  • Create clips from your videos
  • Get images from a video
  • Create timeline hover previews
  • Adjust audio levels
  • Add watermarks to your videos
  • Add subtitles to your videos
  • Minimize processing time
  • Upload files directly
  • Autoplay your videos
  • Synchronize video playback
  • Integrate with your CMS
Mux.comLog in
Mux logo - video home
Docs
GuidesAPI ReferenceChangelog

Play your assets with Mux Player

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

In this guide:

Quick start

Quick start

Start using Mux Player for Mux hosted video assets.

Adaptive controls

Adaptive controls

See how Mux Player handles controls.

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

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
      streamType="on-demand"
      playbackId="EcHgOK9coz5K4rjSwOkoE7Y7O01201YMIC200RI6lNxnhs"
      metadata={{
        video_id: "video-id-54321",
        video_title: "Test video title",
        viewer_user_id: "user-id-007",
      }}
    />
  );
}

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape

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

Core functionality

Understand the features and core functionality of Mux Player
Read the guide

Integrate Mux Player

Interate Mux Player in your web application. See examples in popular front end frameworks.
Read the guide

Customize the look and feel

Customize Mux Player to match your brand
Read the guide

Was this page helpful?