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

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:

Installing

Installing

Install Mux Player JavaScript bundle via NPM or the hosted option

Providing attributes

Providing attributes

Understand how Mux Player integrates with the Mux Platform

Examples

Examples

See examples of Mux Player in plain HTML and common frontend frameworks

Installing

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

Providing attributes

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 provide video_id, video_title, and viewer_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.

Examples

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> 

Customize the look and feel

Customize Mux Player to match your brand
Read the guide

Advanced usage

Learn about advanced usage of Mux Player
Read the guide

Was this page helpful?