Skip to main content

Bitmovin Player

The Bitmovin player is a flexible video player for all the devices. The player plays videos instantly and reduces buffering. The Bitmovin player streams across all major platforms.

The general concept for Axinom DRM integration for DRM-compatible players, is outlined in the video Players document.

Bitmovin player can be integrated with Axinom DRM. You can find the specific instructions below.

Integration​

Axinom DRM integration with Bitmovin Web SDK​

It is easy to integrate Bitmovin player with Axinom DRM. Use the sample below to do this. To integrate Bitmovin player:

  1. Create an element on your HTML page by adding the following line within the HTML body:

        <div id="my-player"></div>

  2. Embed the player source file into the HTML file. Add the following script inside the head of the HTML file.

        <head>
            <meta charset="utf-8">
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
            <script type="text/javascript" src="https://cdn.bitmovin.com/player/web/8/bitmovinplayer.js"></script>
        </head>

  3. Set the player configurations by adding the following line inside your loader method which is executed when you load the player. Start with a common configuration as seen in the example below. Please replace xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx with your player license key, which is shown on the Bitmovin dashboard when you are logged in with your account.

        const playerConfig = {
            key: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'
        };

  4. Initialize a new instance of the player by adding the following line inside your loader method which is executed when you load the player.

        videoEl = document.getElementById('my-player');
        player = new bitmovin.player.Player(videoEl, playerConfig);

  5. Set the License URL in the format below. For the keySystem, you need to set the related keysystem (possible values: "playready", "widevine", "fairplay").

            var protection = {
                dash: $urlInput.val(),
                drm: {
                    [keySystem]: {
                        LA_URL: {}
                    }
                }
            };


            protection.drm[keySystem].LA_URL = license;

  6. Pass the License request URL within the player configurations.

            const playerConfig = {
                key: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
                network: {
                    preprocessHttpRequest: function (requestType, requestConfig) {
                        requestConfig.url = requestConfig.url;
                    }
                }
            };

  7. If you want to pass the license request token as a query parameter, you need to pass it with the player configurations as below.

            const playerConfig = {
                key: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
                network: {
                    preprocessHttpRequest: function (requestType, requestConfig) {
                        requestConfig.url = requestConfig.url + "?AxDrmMessage="+[token];
                    }
                }
            };

  8. If you want to pass the license request token in the header, you need to pass it as a header as below.

            protection.drm[keySystem].LA_URL = license;
            protection.drm[keySystem].headers=  {
                "X-AxDRM-Message": token
            };

  9. Finally, you can open the player, which is now integrated with DRM.

        player.load(protection).then(function () {
                console.log('The video has now been loaded!');
        }).catch(onError);

Fairplay Specifics​

In the case of fairplay, you will need to configure the player to pass the content ID to the License server. You can add the configurations as below.

    fairplay: {
        LA_URL: 'https://drm-fairplay-licensing.axprod.net/AcquireLicense',
        certificateURL: 'https://vtb.axinom.com/FPScert/fairplay.cer',
        headers: {
            'X-AxDRM-Message':'token',
            },
        prepareContentId: (uri) => {
            return uri.substring(uri.indexOf("skd"));
            },
        prepareLicenseAsync: ckc => {
            return new Promise((resolve, reject) => {
                const reader = new FileReader();
                reader.addEventListener('loadend', () => resolve(new Uint8Array(reader.result)));
                reader.addEventListener('error', () => reject(reader.error));
                reader.readAsArrayBuffer(ckc);
                });
            },
        prepareMessage: event => new Blob([event.message], {type: 'application/octet-binary'}),
        useUint16InitData: true,
        licenseResponseType: 'blob'
        };

Example code​

   <!DOCTYPE html>
   <html>
   <head>
        <title>Bitmovin Player with Axinom DRM</title>
        <head>
        <meta charset="utf-8" />
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <script
                type="text/javascript"
                src="https://cdn.bitmovin.com/player/web/8/bitmovinplayer.js"
            ></script>
        </head>
    </head>
    <body>
    <div id="my-player"></div>
        <script>
            const playerConfig = {
                key: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
                network: {
                    preprocessHttpRequest: function (requestType, requestConfig) {
                        requestConfig.url = requestConfig.url
                        },
                    },
                }
            videoEl = document.getElementById('my-player')
            player = new bitmovin.player.Player(videoEl, playerConfig)
            
            // SourceConfig object to be passed to Bitmovin Player instance
            var source = {
                dash: 'dash source url',
                hls: 'hls source url',
                drm: {
                    widevine: {
                        LA_URL: 'https://drm-widevine-licensing.axprod.net/AcquireLicense',
                        headers: {
                            'X-AxDRM-Message':
                                'X-AxDRM-Message token',
                                },
                            },
                    fairplay: {
                        LA_URL: 'https://drm-fairplay-licensing.axprod.net/AcquireLicense',
                        certificateURL: 'https://vtb.axinom.com/FPScert/fairplay.cer',
                        headers: {
                            'X-AxDRM-Message':
                                'X-AxDRM-Message token',
                                },
                        prepareContentId: (uri) => {
                            return uri.substring(uri.indexOf("skd"));
                        },
                        prepareLicenseAsync: ckc => {
                            return new Promise((resolve, reject) => {
                                const reader = new FileReader();
                                reader.addEventListener('loadend', () => resolve(new Uint8Array(reader.result)));
                                reader.addEventListener('error', () => reject(reader.error));
                                reader.readAsArrayBuffer(ckc);
                                });
                                },
                        prepareMessage: event => new Blob([event.message], {type: 'application/octet-binary'}),useUint16InitData: true,
                        licenseResponseType: 'blob'
                        },
                },
            }
            player
                .load(source)
                .then(function () {
                    console.log('The video has now been loaded!')
                    })
                .catch(onError)
        </script>
    </body>
</html>

Axinom DRM integration with Bitmovin SDK (Android)​

You can find the Bitmovin player integration steps from https://developer.bitmovin.com/playback/docs/getting-started-android.

They have given a repository showing how the Bitmovin Player can be setup and configured for playback of Widevine protected content.

Axinom DRM integration with Bitmovin SDK (iOS)​

You can find the Bitmovin player integration steps from https://developer.bitmovin.com/playback/docs/getting-started-ios.

They have given a repository showing how the Bitmovin Player can be setup and configured for playback of Fairplay protected content.

Testing the Playback​

You can actually try out the Bitmovin player from the DRM Video Playback Tool and check whether your video plays with it. This tool allows you to play the DRM-protected video as well as generate and adjust the Entitlement Message. Copy the video URL, create the JWT and choose Bitmovin Player from the drop-down menu at the bottom. Click to get the player link and you can see whether your video plays with the Bitmovin player.

You can find the tool here:

DRM Video Playback Tool

See also​