- Introduction to Video
- Stream video files
- Start live streaming
- Build real-time video experiences
- Make API requests
- Play your videos
- Use Mux Player
- 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
Play your assets with Mux Player
Mux Player is a drop in component for adding Mux videos into your web application
In this guide:
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).
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
.
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