<MuxPlayer/>

New release: 3.0

Mux Player recently released 3.0. The most visible change in this is new tooltips that are enabled by default, as well as other fixes and changes.

Previous version: 2.0

For changes relating to the previous major release, 2.0, see the V1 to V2 upgrade guide and the blog post announcement.

Introduction

<MuxPlayer /> is a Mux-flavored React video player component, built on top of our mux-player web component and Media Chrome.

Installation

1npm install @mux/mux-player-react

or

1yarn add @mux/mux-player-react

Usage

1import MuxPlayer from '@mux/mux-player-react';
2
3<MuxPlayer
4  playbackId="DS00Spx1CV902MCtPj5WknGlR102V5HFkDe"
5  metadata={{
6    video_id: 'video-id-123456',
7    video_title: 'Bick Buck Bunny',
8    viewer_user_id: 'user-id-bc-789',
9  }}
10/>;

Lazy-loading

Defer loading of Mux Player by importing from @mux/mux-player-react/lazy.

1import MuxPlayer from '@mux/mux-player-react/lazy';
2
3<MuxPlayer
4  loading="viewport"
5  playbackId="DS00Spx1CV902MCtPj5WknGlR102V5HFkDe"
6  metadata={{
7    video_id: 'video-id-123456',
8    video_title: 'Bick Buck Bunny',
9    viewer_user_id: 'user-id-bc-789',
10  }}
11/>;

If you are generating your pages with a Node.js server (for example, Next.js), consider using @mux/mux-player-react/lazy with @mux/blurhash to generate a placeholder to display during loading.

Docs

Docs and guides live on docs.mux.com.

API reference lives on Github.