@mux/mux-player-react
v3.1.0
Published
An open source Mux player for React that Just Works™
Downloads
399,605
Readme
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
npm install @mux/mux-player-react
or
yarn add @mux/mux-player-react
Usage
import MuxPlayer from '@mux/mux-player-react';
<MuxPlayer
playbackId="DS00Spx1CV902MCtPj5WknGlR102V5HFkDe"
metadata={{
video_id: 'video-id-123456',
video_title: 'Bick Buck Bunny',
viewer_user_id: 'user-id-bc-789',
}}
/>;
Lazy-loading
Defer loading of Mux Player by importing from @mux/mux-player-react/lazy
.
import MuxPlayer from '@mux/mux-player-react/lazy';
<MuxPlayer
loading="viewport"
playbackId="DS00Spx1CV902MCtPj5WknGlR102V5HFkDe"
metadata={{
video_id: 'video-id-123456',
video_title: 'Bick Buck Bunny',
viewer_user_id: 'user-id-bc-789',
}}
/>;
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.