> ## Documentation Index
> Fetch the complete documentation index at: https://bunnynet-cb9733c2-fix-zb-update-fairplay-deprecated-endpoint.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Bitmovin player integration

> This documentation expands on our  to guide you through the integration of  with Bunny Stream’s video streams and MediaCage Enterprise DRM solution into your web application.

<Info>
  If your use case doesn’t require DRM, you can follow the same steps provided below, omit the DRM configuration part, and follow our [video storage structure guide](/stream/storage-structure), which describes how to access your Bunny Stream videos programmatically.
</Info>

## What you’ll need

Before you dive in, make sure you have the following prerequisites in place:

* A [bunny.net](https://bunny.net/) account ([Log in](https://dash.bunny.net/auth/login?pk_buttonlocation=menu) or sign up for a [free trial](https://dash.bunny.net/auth/register)) .
* Ensure that the Media Cage DRM Enterprise feature is enabled in your account. If you need guidance on how to enable this feature, please refer to our [Media Cage DRM Enterprise quickstart guide](/stream/quickstart-mediacage-enterprise).
* A [Bitmovin](https://bitmovin.com/) account.

## Setting up Bitmovin player

Bitmovin offers an HTML web player that can be embedded into your site using JavaScript. You can read official [Bitmovin documentation](https://developer.bitmovin.com/playback/docs/getting-started-web) on how to get started with the player or copy the code sample below.

<Info>
  You are required to use your own license key for the player to ensure domain whitelisting for production environments.
</Info>

The demo code provided below can be run in localhost without issues.The JavaScript changes below are required to ensure compatibility with our license endpoints.

### HTML configuration

Incorporate the following HTML code into your web page:

```html theme={null}
<html lang="en">
  <head>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.jsdelivr.net/npm/bitmovin-player@8/bitmovinplayer-ui.css"
    />
    <title>Bitmovin Player Demo</title>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="text/html; charset=utf-8" />
    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/bitmovin-player@8/bitmovinplayer.js"
    ></script>
  </head>
  <body>
    <div class="player-wrapper">
      <div id="player"></div>
    </div>
  </body>
</html>
```

### JavaScript configuration

Replace `[ENTER_YOUR_BITMOVIN_KEY]` with your actual Bitmovin license key. The JavaScript configuration below includes necessary modifications to ensure compatibility with the license endpoints, as well as DRM configurations for both Widevine and FairPlay:

```javascript theme={null}
var conf = {
  key: "[ENTER_YOUR_BITMOVIN_KEY]", // change key here
  logs: {
    level: "debug",
  },
  network: {
    preprocessHttpResponse: function (type, response) {
      switch (type) {
        case "manifest/hls/variant":
          response.body = response.body.replace(
            /.*KEYFORMAT="com.apple.streamingkeydelivery"\n/,
            "",
          );
          break;
        default:
          break;
      }
      return Promise.resolve(response);
    },
  },
};

var source = {
  title: "New Dashboard",
  hls: "{{playlistUrl}}",
  drm: {
    widevine: {
      LA_URL:
        "https://video.bunnycdn.com/WidevineLicense/{{videoLibraryId}}/{{videoId}}",
      maxCertificateRequestRetries: 0,
      maxLicenseRequestRetries: 0,
    },
    fairplay: {
      LA_URL:
        "https://video.bunnycdn.com/FairPlay/{{videoLibraryId}}/license/?videoId={{videoId}}",
      certificateURL:
        "https://video.bunnycdn.com/FairPlay/{{videoLibraryId}}/certificate",
      maxCertificateRequestRetries: 0,
      maxLicenseRequestRetries: 0,
      useUint16InitData: true,
      prepareContentId: (url) => {
        return url.substring(url.indexOf("skd://"));
      },
    },
  },
};

const player = new bitmovin.player.Player(
  document.getElementById("player"),
  conf,
);
player.load(source);
```

<Warning>
  Do not set `licenseResponseType: "json"` or override `prepareMessage`/`prepareLicense` to wrap the SPC/CKC in JSON. That format belongs to the deprecated `/FairPlayLicense/{library_id}/{video_id}` endpoint. The current `/FairPlay/{library_id}/license` and `/FairPlay/{library_id}/certificate` endpoints expect and return raw binary data, which is Bitmovin's default `licenseResponseType`/message handling — no overrides needed.
</Warning>

## Finalizing integration

After embedding the HTML and JavaScript code into your web application, the Bitmovin Player should load and be capable of playing DRM-protected content from Bunny Stream. Test the setup in various environments to ensure compatibility and performance across different devices and browsers.
