Install Mux Player and play your first Mux video in a web application. Use this guide when you add video playback to a site built with React or any other framework.
Mux Player is a drop-in component that plays Mux video in your web application. Use this guide to install the player and play your first video. It applies to plain HTML pages, React applications, and other frameworks.
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 ReactBoth are built with TypeScript and can be installed either via npm, yarn or the hosted option on jsdelivr. @mux/mux-player can also be used as an <iframe> embed.
npm install @mux/mux-player@latest #or @mux/mux-player-react@latestyarn add @mux/mux-player@latest #or @mux/mux-player-react@latest<script src="https://cdn.jsdelivr.net/npm/@mux/mux-player" defer></script>
<!--
or
<script src="https://cdn.jsdelivr.net/npm/@mux/mux-player-react" defer></script>
--><iframe
src="https://player.mux.com/{PLAYBACK_ID}"
allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
allowfullscreen="true"
></iframe>While syntax differs between React and HTML, there are two recommended values to provide in either approach:
stream.mux.com/{PLAYBACK_ID}.m3u8.metadata: Information about the video to be tracked by Mux Data as part of a view. At a minimum, you should provide video_id, video_title, and viewer_user_id. See: Mux Data Metadata.In the HTML web component, using JavaScript it can be assigned as a property on the element:
document.querySelector("mux-player").metadata = { video_id: "video-id-123" };Or, you can add them as attributes to the player in the HTML using the metadata-* prefix. You'll need to reformat any dimension names into kebab-case (for example metadata-player-name instead of metadata-player_name):
<mux-player
playback-id="EcHgOK9coz5K4rjSwOkoE7Y7O01201YMIC200RI6lNxnhs"
metadata-video-id="video-id-123456"
metadata-video-title="Big Buck Bunny"
metadata-viewer-user-id="user-id-bc-789"
metadata-player-name="My Custom Player"
>In the HTML embed, you can add most supported attributes to the URL as query parameters.
Remember that query parameters should be URL encoded. You might do this with encodeURIComponent().
<iframe
src="https://player.mux.com/{PLAYBACK_ID}?metadata-video-id=video-id-123456&metadata-video-title=Bick%20Buck%20Bunny&metadata-viewer-user-id=user-id-bc-789"
allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
allowfullscreen="true"
></iframe>Following JavaScript conventions, attributes in React are camelCased rather than kebab-cased. For example, playback-id becomes playbackId.
metadata is specified as an object in props.
<MuxPlayer
playbackId="EcHgOK9coz5K4rjSwOkoE7Y7O01201YMIC200RI6lNxnhs"
metadata={{
video_id: 'video-id-123456',
video_title: 'Big Buck Bunny',
viewer_user_id: 'user-id-bc-789',
}}
></MuxPlayer>When using the HTML element version of Mux Player, you will see the Player Software in Mux Data come through as mux-player.
When using the HTML embed version of Mux Player, you will see the Player Software in Mux Data come through as mux-player-iframe.
When using the React version of Mux Player, you will see the Player Software in Mux Data come through as mux-player-react.
Since Svelte supports web components, here is an examples of using @mux/mux-player 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"
/>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"
/>
</main>
</template>