[mux-player-react] How to add a download button or custom control?

[kovalromank]

Hi team,

I wasn’t able to find documentation on how to add a download button using the mux-player-react package.

My goal is to let users download the full video (ideally in the highest available resolution). Is this functionality supported out of the box, or would it require a custom implementation?

I know MUX allows generating static MP4 assets, but I haven’t found guidance on:

• How to expose a download option directly within mux-player-react
• Whether it’s possible to add custom controls (like a download button) without rebuilding the player from scratch

Any advice, examples, or best practices would be greatly appreciated!

[Ultroncn]

You can keep MuxPlayer and add a React download link alongside it; you don't need to rebuild the player. The downloadable file is a separate static rendition, so first create a highest rendition on the backend and wait for that rendition to be ready. The static MP4 guide documents this flow and the download URL.

For a public playback ID, a small starting point is:

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

export function Video({ playbackId, renditionName, downloadReady }) {
  // renditionName comes from the ready static rendition's files[].name.
  const url = `https://stream.mux.com/${playbackId}/${renditionName}?download=video`;
  return (
    <>
      <MuxPlayer playbackId={playbackId} />
      {downloadReady && <a href={url}>Download video</a>}
    </>
  );
}

highest means the highest available static rendition, not the original upload; don't assume HLS asset readiness means the MP4 is ready. For signed playback, have your backend produce an appropriately signed MP4 URL instead of using this public-ID example.

If the button must live inside the control bar, Mux Player supports custom Media Chrome themes. The themes guide links both inline-template and custom-element examples; that lets you change the controls while retaining the player's playback/state handling.

[javierarams]

This answer is correct. A few small notes to add:

1. The download value is the file name the browser saves. ?download=video saves the file as "video". You can use a better name, for example ?download=my-video.
2. For audio-only assets there is no highest rendition. Use the audio-only rendition instead. The file is .m4a.
3. Many older examples use mp4_support. That option is deprecated. You can not use it together with static_renditions on the same asset.
4. You can wait for the video.asset.static_rendition.ready webhook to know when the MP4 is ready. Then you can show the download link.

For a signed playback ID, add the signed token to the MP4 URL the same way you do for playback. The signed URLs guide explains how.