Custom Controls

By default, ReactPlayer is a chromeless player. You can enable native controls by setting controls={true}, but the appearance of these controls will vary between different players (YouTube, Vimeo, native <video>, etc.) and browsers.

For a consistent and customizable user experience, you can build your own controls.

Using Media Chrome

A convenient way to add custom controls is with Media Chrome, a library that provides a set of UI components for building custom media players.

Simple Example

Here is a simple example of how to integrate ReactPlayer with media-chrome/react.

First, install the necessary package:

npm install media-chrome

Then, use the components to build your player UI:

import ReactPlayer from 'react-player';
import {
  MediaController,
  MediaControlBar,
  MediaTimeRange,
  MediaTimeDisplay,
  MediaVolumeRange,
  MediaPlaybackRateButton,
  MediaPlayButton,
  MediaSeekBackwardButton,
  MediaSeekForwardButton,
  MediaMuteButton,
  MediaFullscreenButton,
} from 'media-chrome/react';

export default function Player() {
  return (
    <MediaController
      style={{
        width: '100%',
        aspectRatio: '16/9',
      }}
    >
      <ReactPlayer
        slot="media"
        src="https://stream.mux.com/maVbJv2GSYNRgS02kPXOOGdJMWGU1mkA019ZUjYE7VU7k"
        controls={false}
        style={{
          width: '100%',
          height: '100%',
          '--controls': 'none', // For some players to hide native controls
        }}
      />
      <MediaControlBar>
        <MediaPlayButton />
        <MediaSeekBackwardButton seekOffset={10} />
        <MediaSeekForwardButton seekOffset={10} />
        <MediaTimeRange />
        <MediaTimeDisplay showDuration />
        <MediaMuteButton />
        <MediaVolumeRange />
        <MediaPlaybackRateButton />
        <MediaFullscreenButton />
      </MediaControlBar>
    </MediaController>
  );
}

This example creates a fully-featured player with a consistent look and feel, regardless of the media source. You can view a live version on CodeSandbox.