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: {},
    };

  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://tools.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://tools.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.

Axinom DRM integration with Bitmovin Flutter SDK (iOS / FairPlay)​

The Bitmovin Flutter SDK lets you add the Bitmovin Player to a Flutter application and play content on iOS. On iOS, the package wraps Bitmovin's native iOS Player, so you integrate it as a regular Flutter dependency rather than writing any Swift code.

For installing the SDK and setting up your Flutter environment (package dependency, minimum iOS version, allowed bundle identifiers, etc.), follow Bitmovin's Getting Started with Flutter guide. The steps below cover the Axinom DRM integration for FairPlay-protected content on iOS.

  1. Import the Bitmovin Flutter SDK in your Dart file.
import "package:bitmovin_player/bitmovin_player.dart";
  1. Create a new instance of the player with your Bitmovin Player key. Replace <BITMOVIN_PLAYER_KEY> with your key from the Bitmovin dashboard.
final player = Player(
  config: const PlayerConfig(
    key: '<BITMOVIN_PLAYER_KEY>',
  ),
);
  1. Configure FairPlay DRM with the Axinom DRM license URL and the FairPlay certificate. Pass the Axinom DRM token in the X-AxDRM-Message request header.
note

licenseRequestHeaders requires bitmovin_player 0.21.0 or later. On earlier versions, header support was not functional — pass the token as the AxDrmMessage query parameter on the license URL instead.

final fairplayConfig = FairplayConfig(
  licenseUrl: 'https://drm-fairplay-licensing.axprod.net/AcquireLicense',
  certificateUrl: 'https://tools.axinom.com/FPScert/fairplay.cer',
  licenseRequestHeaders: {
    'X-AxDRM-Message': '<TOKEN>',
  },
  prepareMessage: (spcData, _) => spcData,
  prepareContentId: (String contentId) {
    var parts = contentId.split('/');
    var assetId = parts.isNotEmpty ? parts.last : contentId;
    return assetId;
  },
  prepareSyncMessage: (spcData, _) => spcData,
);
  1. Create a SourceConfig for the HLS stream and attach the DRM configuration.
final source = SourceConfig(
  url: '<HLS_MANIFEST_URL>',
  type: SourceType.hls,
  drmConfig: DrmConfig(fairplay: fairplayConfig),
);
  1. Load the source into the player.
player.loadSourceConfig(source);
  1. Add a PlayerView to your widget tree to render the video.
PlayerView(player: player);

Example code​

The complete lib/main.dart putting the steps together:

import 'package:flutter/material.dart';
import 'package:bitmovin_player/bitmovin_player.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Bitmovin + Axinom FairPlay',
      home: PlayerScreen(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class PlayerScreen extends StatefulWidget {
  const PlayerScreen({super.key});
  @override
  State<PlayerScreen> createState() => _PlayerScreenState();
}

class _PlayerScreenState extends State<PlayerScreen> {
  late final Player _player;

  static const bitmovinPlayerKey = '<BITMOVIN_PLAYER_KEY>';
  static const axDrmToken = '<TOKEN>';
  static const fairplayLicenseUrl =
      'https://drm-fairplay-licensing.axprod.net/AcquireLicense';
  static const fairplayCertificateUrl =
      'https://tools.axinom.com/FPScert/fairplay.cer';
  static const hlsManifest = '<HLS_MANIFEST_URL>';

  @override
  void initState() {
    super.initState();

    _player = Player(
      config: const PlayerConfig(
        key: bitmovinPlayerKey,
      ),
    );

    final source = SourceConfig(
      url: hlsManifest,
      type: SourceType.hls,
      drmConfig: DrmConfig(
        fairplay: FairplayConfig(
          licenseUrl: fairplayLicenseUrl,
          certificateUrl: fairplayCertificateUrl,
          licenseRequestHeaders: {
            'X-AxDRM-Message': axDrmToken,
          },
          prepareMessage: (spcData, _) => spcData,
          prepareContentId: (String contentId) {
            var parts = contentId.split('/');
            var assetId = parts.isNotEmpty ? parts.last : contentId;
            return assetId;
          },
          prepareSyncMessage: (spcData, _) => spcData,
        ),
      ),
    );

    _player.loadSourceConfig(source);
  }

  @override
  void dispose() {
    _player.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Bitmovin + Axinom FairPlay')),
      body: SafeArea(
        child: Column(
          children: [
            Expanded(child: PlayerView(player: _player)),
          ],
        ),
      ),
    );
  }
}

Replace <BITMOVIN_PLAYER_KEY>, <TOKEN>, and <HLS_MANIFEST_URL> with your own values, then run the app.

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​

Was this page helpful?