> ## Documentation Index
> Fetch the complete documentation index at: https://bunny.net/docs/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.

> [!NOTE]
>
> 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](https://bunny.net/docs/stream/storage-structure.md), which describes how to access your Bunny Stream videos programmatically.

## 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](https://bunny.net/docs/stream/quickstart-mediacage-enterprise.md).
* 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.

> [!NOTE]
>
> You are required to use your own license key for the player to ensure domain whitelisting for production environments.

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.

## 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.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.