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.
For changes relating to the previous major release, 2.0, see the V1 to V2 upgrade guide and the blog post announcement.
<MuxPlayer />
is a Mux-flavored React video player component, built on top of our mux-player web component and Media Chrome.
npm install @mux/mux-player-react
or
yarn add @mux/mux-player-react
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',
}}
/>;
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 and guides live on docs.mux.com.
API reference lives on Github.