- 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
Integrate Mux Player into your web application
In this guide, you will learn about Mux Player and how to use it in your web application.
In this guide:
Mux Player has 2 packages:
@mux/mux-player
: the web component, compatible with all frontend frameworks@mux/mux-player-react
: the React component, for usage in React
Both are built with TypeScript and can be installed either via npm
, yarn
or the hosted option on jsdelivr
.
NPM
npm install @mux/mux-player@latest #or @mux/mux-player-react@latest
Yarn
yarn add @mux/mux-player@latest #or @mux/mux-player-react@latest
Hosted
<script src="https://cdn.jsdelivr.net/npm/@mux/mux-player"></script> <!-- or <script src="https://cdn.jsdelivr.net/npm/@mux/mux-player-react"></script> -->
While syntax differs between React and HTML (you can see them in the examples below), there are three recommended values to provide in either approach:
- Playback ID: this is the Mux Playback ID that you would use to create
stream.mux.com/{PLAYBACK_ID}.m3u8
- Stream Type: This value will determine (1) which default control set is shown and (2) the optimal configuration for HLS streaming.
Valid stream type values are:
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)
metadata
is an object with keys and values for any of the Mux Data Metadata fields. At a minimum, you should providevideo_id
,video_title
, andviewer_user_id
.
In React this is specified as a prop. In HTML it can be assigned as a property on the element:
document.querySelector('mux-player').metadata = {video_id: 'video-id-123'}
The <mux-player>
web component element also accepts attributes with the metadata-*
prefix for specifying metadata fields. For example: metadata-video-title="Video title"
, metadata-viewer-user-id="user-id-xxx"
and metadata-video-id="id-123"
, etc.
HTML element
<mux-player stream-type="on-demand" playback-id="EcHgOK9coz5K4rjSwOkoE7Y7O01201YMIC200RI6lNxnhs" metadata-video-title="Test VOD" metadata-viewer-user-id="user-id-007" ></mux-player>
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 HTML element version of Mux Player, you will see the Player Software
in Mux Data come through as mux-player
.
React
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
.
Svelte
Since Svelte supports web components, here is an examples of using @mux/mux-elements
component. View the Sveltkit example in the Mux Elements repo for a fully functioning example.
<script context="module" lang="ts"> export const prerender = true; </script> <script lang="ts"> // this prevents the custom elements from being redefined when the REPL is updated and reloads, which throws an error // this means that any changes to the custom element won't be picked up without saving and refreshing the REPL // const oldRegister = customElements.define; // customElements.define = function(name, constructor, options) { // if (!customElements.get(name)) { // oldRegister(name, constructor, options); // } // } // import { page } from '$app/stores'; import { onMount } from 'svelte'; onMount(async () => { await import('@mux/mux-player'); }); </script> <mux-player playback-id="g65IqSFtWdpGR100c2W8VUHrfIVWTNRen" metadata-video-id="video-id-54321" metadata-video-title="Svelte Kit: Episode 2" metadata-viewer-user-id="user-id-sveltekit007" stream-type="on-demand" />
Vue
Since Vue supports web components, here is an examples of using @mux/mux-player
component. View the Vue example in the Mux Elements repo for a fully functioning example.
<script setup lang="ts"> import "@mux/mux-player"; </script> <template> <main> <mux-player playback-id="g65IqSFtWdpGR100c2W8VUHrfIVWTNRen" metadata-video-id="video-id-54321" metadata-video-title="Vue 3: Episode 2" metadata-viewer-user-id="user-id-vue3007" stream-type="on-demand" /> </main> </template>