React Native Video Player
Table of Contents
react-native-video is basically a package that allows a video component to be shown/used within React Native.
The react-native-video player is easily configurable with Axinom DRM.
Creating a React Native video player.
The below document will help you to create a react native video player with more details. https://www.npmjs.com/package/react-native-video.
Integrating Axinom DRM
-
Add a video player.
<Video source={{uri: <video_url>}} onBuffer={this.onBuffer} onError={this.videoError} style={styles.backgroundVideo} /> -
Pass the DRM information to the video element.
<Video source={{uri: <video_url> }} drm={{ <DRM_details> }} onBuffer={this.onBuffer} onError={this.videoError} style={styles.backgroundVideo} />
DRM details
-
Widevine & Playready
drm= {{ type: '<DRM_Type>', licenseServer:'<License_server_url>', headers: { 'X-AxDRM-Message':'<token>', 'Transfer-Encoding': 'Chunked', 'Content-Type': 'application/octet-stream' } }} -
Fairplay
The value you are passing to the contentId would correspond to the URI parameters on the HLS playlist.
drm= {{
type: 'fairplay',
licenseServer:'https://drm-fairplay-licensing.axtest.net/AcquireLicense',
certificateUrl: 'https://vtb.axinom.com/FPScert/fairplay.cer',
contentId:'f8c80c25-690f-4736-8132-430e5c6994ce:51BB4F1A7E2E835B2993884BD09ADB19',
headers: {
'X-AxDRM-Message':'<token>',
'Transfer-Encoding': 'Chunked',
'Content-Type': 'application/octet-stream'
}
}}|
Note
|
When you are running the player on a simulator, the DRM protection may not work. To try out the DRM protection in your playback, please use a real device. |
You can find the sample codes in our github repo.
Revision History
The table below outlines the document versions and any changes between them.
| Version | Date | Description |
|---|---|---|
1.0 |
December 14, 2021 |
|