Mosaic products documentation: Concepts, API Reference, Technical articles, How-to, Downloads and tools

React Native Video Player

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

  1. Add a video player.

    <Video source={{uri: <video_url>}}
           onBuffer={this.onBuffer}
           onError={this.videoError}
           style={styles.backgroundVideo} />
  2. 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

  1. Widevine & Playready

    drm= {{
        type: '<DRM_Type>',
        licenseServer:'<License_server_url>',
        headers: {
            'X-AxDRM-Message':'<token>',
            'Transfer-Encoding': 'Chunked',
            'Content-Type': 'application/octet-stream'
        }
    }}
  2. 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

  • Initial version.