JSPM

@mux/mux-player-react

2.2.0-canary.0-a7c4948
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 163426
  • Score
    100M100P100Q183969F
  • License MIT

An open source Mux player for React that Just Works™

Package Exports

  • @mux/mux-player-react
  • @mux/mux-player-react/lazy
  • @mux/mux-player-react/themes/classic
  • @mux/mux-player-react/themes/gerwig
  • @mux/mux-player-react/themes/microvideo
  • @mux/mux-player-react/themes/minimal

Readme

<MuxPlayer/>

Downloads Version License

New release: 2.0

Mux Player has recently released 2.0. See the [https://github.com/muxinc/elements/blob/packages/mux-player/UPGRADING_V1_to_V2.md 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',
  }}
  streamType="on-demand"
/>;

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',
  }}
  streamType="on-demand"
/>;

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.