ReactJS Media Player

A ReactJS component for playing HLS, FLV, Dash and mp4 files. Not using ReactJS? No problem ;)

✨ The future of ReactJS Media Player

ReactJS Media Player is maintained by me. I'm committed to improving video tools for developers, but anyone who wants to contribute is welcome.

ReactJS Media Player is and will remain open source, for a higher rate of fixes and releases over time. Thanks to all community members for their continued support.

Usage

npm install reactjs-media-player # or yarn add reactjs-media-player

import React from 'react';
import ReactJSMediaPlayer from 'reactjs-media-player';

// Render a HLS video player
<ReactJSMediaPlayer url="https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8" />;

If your build system supports import() statements, use reactjs-media-player/lazy to lazy load the appropriate player for the url you pass in. This adds several ReactJS Media Player chunks to your output, but reduces your main bundle size.

import React from 'react';
import ReactJSMediaPlayerLazy from 'reactjs-media-player/lazy';

// Lazy load the YouTube player
<ReactJSMediaPlayerLazy url="https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8" />;

Demo page: https://soyvillareal.github.io/reactjs-media-player

The component parses a URL and loads in the appropriate markup and external SDKs to play media from various sources. Props can be passed in to control playback and react to events such as buffering or media ending. See the demo source for a full example.

For platforms without direct use of npm modules, a minified version of ReactJS Media Player is located in dist after installing. To generate this file yourself, checkout the repo and run npm run build:dist.

Autoplay

As of Chrome 66, videos must be muted in order to play automatically. Some players, like Facebook, cannot be unmuted until the user interacts with the video, so you may want to enable controls to allow users to unmute videos themselves. Please set muted={true}.

Props

Callback props

Callback props take a function that gets fired on various player events:

Config prop

There is a single config prop to override settings of player:

<ReactJSMediaPlayer
  url={url}
  config={{
    forceHLS: true,
    hlsOptions: {
      enableWorker: true,
    },
  }}
/>

Settings for player live under different keys:

Methods

Static Methods

Instance Methods

Use ref to call instance methods on the player. See the demo app for an example of this.

Advanced Usage

Responsive player

Set width and height to 100% and wrap the player in a fixed aspect ratio box to get a responsive player:

class ResponsivePlayer extends Component {
  render() {
    return (
      <div className="player-wrapper">
        <ReactJSMediaPlayer
          className="reactjs-media-player"
          url="https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8"
          width="100%"
          height="100%"
        />
      </div>
    );
  }
}

.player-wrapper {
  position: relative;
  padding-top: 56.25%; /* Player ratio: 100 / (1280 / 720) */
}

.reactjs-media-player {
  position: absolute;
  top: 0;
  left: 0;
}

SDK Overrides

You can use your own version of any player SDK, assuming the correct window global is set before the player mounts. For example, to use a local version of hls.js, add <script src='/path/hls.js'></script> to your app. If window.Hls is available when ReactJSMediaPlayer mounts, it will use that instead of loading hls.js from cdnjs.

Standalone player

If you aren’t using React, you can still render a player using the standalone library:

<script src="https://cdn.jsdelivr.net/npm/reactjs-media-player/dist/ReactJSMediaPlayer.standalone.js"></script>
<script>
  const container = document.getElementById('container');
  const url = 'https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8';

  renderReactJSMediaPlayer(container, { url, playing: true });

  function pausePlayer() {
    renderReactJSMediaPlayer(container, { url, playing: false });
  }
</script>

Mobile considerations

The HTML5 <video> element, in certain mobile browsers (such as Chrome and Safari), only allows playback to take place if it’s initiated by a user interaction (such as tapping on the player).

Multiple Sources and Tracks

You can also specify a type for each source by using objects with src and type properties.

<ReactJSMediaPlayer
  playing
  fullHDQualityBreak={720}
  spriteVTTFile="foo.vtt"
  sources={[
    { src: 'foo_1080.m3u8', resolution: 1080 },
    { src: 'foo_720.m3u8', resolution: 720 },
    { src: 'foo_480.m3u8', resolution: 480 },
    { src: 'foo_360.m3u8', resolution: 360 },
    { src: 'foo_240.m3u8', resolution: 240 },
    { src: 'foo_144.meu8', resolution: 144 },
  ]}
/>

<track> elements for subtitles can be added using config.file:

<ReactJSMediaPlayer
  playing
  url="foo.mp4"
  config={{
    tracks: [
      { kind: 'subtitles', src: 'subs/subtitles.en.vtt', srcLang: 'en', default: true },
      { kind: 'subtitles', src: 'subs/subtitles.ja.vtt', srcLang: 'ja' },
      { kind: 'subtitles', src: 'subs/subtitles.de.vtt', srcLang: 'de' },
    ],
  }}
/>

Supported media

Supported file types are playing using <video> elements

• HLS streams are played using hls.js
• DASH streams are played using dash.js
• FLV streams are played using flv.js

Contributing

See the contribution guidelines before creating a pull request.

Thanks

• Thanks to anyone who has contributed.
• Big thanks to my Patreon supporters!