> ## Documentation Index
> Fetch the complete documentation index at: https://docs.bunny.net/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.
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](/docs/stream-video-storage-structure), 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](/docs/mediacage-enterprise-drm-quickstart).
* 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.
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}
Bitmovin Player Demo
```
### 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: {
preprocessHttpRequest: function (type, request) {
if (type === "drm/license/fairplay") {
request.headers["Content-Type"] = "application/json";
}
return Promise.resolve(request);
},
preprocessHttpResponse: function (type, response) {
switch (type) {
case "drm/certificate/fairplay":
const obj = JSON.parse(new TextDecoder().decode(response.body));
const { certificate } = obj;
response.body = base64ToArrayBuffer(certificate);
break;
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/FairPlayLicense/{{videoLibraryId}}/{{videoId}}",
certificateURL:
"https://video.bunnycdn.com/FairPlayLicense/{{videoLibraryId}}/{{videoId}}",
maxCertificateRequestRetries: 0,
maxLicenseRequestRetries: 0,
useUint16InitData: true,
licenseResponseType: "json",
prepareContentId: (url) => {
return url.substring(url.indexOf("skd://"));
},
prepareLicense: (license) => {
return license.ckc;
},
prepareMessage: (event, session) => {
const obj = JSON.stringify({
spc: btoa(String.fromCharCode.apply(null, event.message)),
});
return obj;
},
},
},
};
function base64ToArrayBuffer(base64) {
var binary_string = window.atob(base64);
var len = binary_string.length;
var bytes = new Uint8Array(len);
for (var i = 0; i < len; i++) {
bytes[i] = binary_string.charCodeAt(i);
}
return bytes.buffer;
}
const player = new bitmovin.player.Player(
document.getElementById("player"),
conf,
);
player.load(source);
```
## 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.