In this guide, you will learn about Mux Player and how to use it in your web application.
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
.
npm install @mux/mux-player@latest #or @mux/mux-player-react@latest
yarn add @mux/mux-player@latest #or @mux/mux-player-react@latest
<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, 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 React, metadata
is specified as a prop:
<MuxPlayer metadata={{ video_id: 'video-id-123456', video_title: 'Bick Buck Bunny', viewer_user_id: 'user-id-bc-789',}}></MuxPlayer>
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:
<mux-player metadata-video-id="video-id-123456" metadata-video-title="Bick Buck Bunny" metadata-viewer-user-id="user-id-bc-789">
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 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-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"/>
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>