Pro-player NPM

Pro Player

An advanced React video player component that allows you to play HLS (m3u8) files and supports DRM. It provides a customizable video player with lots of features including a quality selector.

Installation

You can install pro-player using npm or yarn.

NPM

npm install pro-player

Yarn

yarn add pro-player

Usage

First, import pro-player and its stylesheet into your project:

import React from 'react'
import ProPlayer from 'pro-player'
import 'pro-player/dist/index.css'

Then, you can use the ProPlayer component in your app by passing in the source, poster, drmSystemConfig, etc props:

const App = () => {
  return (
    <ProPlayer
      source='HLS_URL'
      poster='POSTER_URL'
      drmSystemConfig={{
        'com.apple.fps': {
          licenseUrl: 'LICENSE_URL',
          serverCertificateUrl: 'SERVER_CERTIFICATE_URL'
        },
        'com.widevine.alpha': {
          licenseUrl: 'LICENSE_URL'
        }
      }}
    />
  )
}

export default App