Lazy-loading Mux Player

Use Mux Player React Lazy

Installation

After installing @mux/mux-player-react with NPM or Yarn, import Mux Player React Lazy from @mux/mux-player-react/lazy:

import MuxPlayer from "@mux/mux-player-react/lazy"; 

export default function App() {
  return (
    <>
      <p style={{ backgroundColor: "#eee", height: "100vh" }}>
        Scroll down to see Mux Player load lazily.
      </p>
      <MuxPlayer
        streamType="on-demand"
        playbackId="EcHgOK9coz5K4rjSwOkoE7Y7O01201YMIC200RI6lNxnhs"
        metadata={{
          video_id: "video-id-54321",
          video_title: "Test video title",
          viewer_user_id: "user-id-007",
        }}
        style={{ aspectRatio: 16/9 }}
      />
    </>
  );
}

Customizing the placeholder

While Mux Player React Lazy loads, it will display a placeholder with the same background color as the player. (By default, a black background).

If the placeholder= attribute is defined, the attribute's contents will display in the placeholder before load. You can generate placeholders that match your video poster with @mux/blurhash. See the placeholder guide to learn more.

Defining when to load

In addition to the standard attributes that Mux Player React accepts, Mux Player React Lazy will also accept a loading attribute:

• loading="page": Loads the player and replaces a placeholder after the page loads and the initial JavaScript bundle is executed
• loading="viewport": (Default) Extends loading="page" by also waiting until the placeholder has entered the viewport

Get started with other frameworks

If you are working in an environment that supports dynamic imports, like Webpack, Rollup, Parcel, or many modern browsers, you can reproduce the behavior of Mux Player React Lazy.

If you have access to a Node.js server, generate a placeholder that matches your video with @mux/blurhash.

import muxBlurHash from "@mux/blurhash";

const playbackId = "3fevCt00ntwf7WxwvBhRo1EZ01IoABwo2d";
const { blurHashBase64, sourceWidth, sourceHeight } = await muxBlurHash(
  playbackId
);

Then, use a dynamic import to load Mux Player. When the load is complete, replace the placeholder with the player.

<div class="wrapper">
  <div class="placeholder"></div>
</div>

<script>
const wrapper = document.querySelector(".wrapper");
const placeholder = document.querySelector(".placeholder");

import("@mux/mux-player").then(() => {
  const player = document.createElement("mux-player");

  player.setAttribute("stream-type", "on-demand");
  player.setAttribute("playback-id", playbackId);
  player.setAttribute("placeholder", blurHashBase64);
  player.setAttribute("metadata-video-title", "Test video title");
  player.setAttribute("metadata-viewer-user-id", "user-id-007");

  wrapper.replaceChild(player, placeholder);
});
</script>

<style>
.wrapper {
  aspect-ratio: {sourceWidth} / {sourceHeight};
  width: 100%;
  position: relative;
}
mux-player, .placeholder {
  position: absolute;
  inset: 0;
}
.placeholder {
  background-image: url({blurHashBase64});
  background-color: black;
  background-size: contain;
  background-repeat: no-repeat;
}
</style>