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

Install Mux Player Javascript bundle via NPM or the hosted option

Providing attributes

Understand how Mux Player integrates with the Mux Platform

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

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://unpkg.com/@mux/mux-player"></script>
<!--
or
<script src="https://unpkg.com/@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 HTML element has a shorthand attribute syntax for the most common metadata fields: metadata-video-title, metadata-viewer-user-id and metadata-video-id (see examples below).

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>

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",
      }}
    />
  );
}

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