Integrate Mux Player into your web application

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>

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