react-drm-player's Introduction

React DRM Player

Introduction

@gumlet/react-drm-player is a simple player which supoprts DRM. It uses shaka-player to play your DRM protected video playback if your browser supports html 5 video and MediaSource Extension.

npm i @gumlet/react-drm-player

The player automatically detects fairplay or widevine playback.

Example

Using the ReactDRMPlayer component

import './App.css';
import ReactDRMPlayer from '@gumlet/react-drm-player';

function App() {
  return (
    <div className="App">
      <ReactDRMPlayer 
        src={`<YOUR DRM PROTECTED HLS/DASH URI>`} 
        fairplayCertificateURI={`<YOUR FAIRPLAY CERTIFICATE URI>`}
        fairplayLicenseURI={`<YOUR PAIRPLAY LICENSE URI>`}

        widevineLicenseURI={`<YOUR WIDEVINE LICENSE URI>`}
        width="640" 
        height="264" 
        controls 
        muted
        preload="none"
        autoPlay={false}
      />
    </div>
  );
}

export default App;

Props

All video properties are supported and passed down to the underlying video component

Prop	Description
src `String`, `required`	The DRM protected video url that you want to play
fairplayCertificateURI `String`, `required`	URL of the server which returns the fairplay certificate
fairplayLicenseURI `String`, `required`	URL of the server which returns the fairplay license
widevineLicenseURI `String`, `required`	URL of the server which returns the widevine license
autoPlay `Boolean`	Autoplay when component is ready. Defaults to `false`
controls `Boolean`	Whether or not to show the playback controls. Defaults to `false`
width `Number`	Video width. Defaults to `100%`
height `Number`	Video height. Defaults to `auto`
onPlayerError `Callback`	Callback to be called when the player experiences an error during player startup and setup
onPlaybackError `Callback`	Callback to be called when the playback experiences an error during ongoing video playback