1.0.2 • Published 1 year ago
@gumlet/react-drm-player v1.0.2
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-playerThe 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 |
Maintainer
This library is maintained by Gumlet.com