Self Hosted Player Setup

The bitmovin player can be used directly from our CDN by just including our javascript files but it is also possible to download all player files and host it by your own. In this tutorial we will describe the steps in detail to setup the player on your server, cloud storage, CDN, etc.

Whitelist your Domain

To protect your player usage you need to whitelist the domains that can deliver a player with your player key. This is for your safety so that no other users can generate impressions with your player key from domains that do not belong to you.

You can find this settings in your account under Player -> Overview. Just enter the domain (e.g., example.com) that you want to whitelist for your player key in the text field and hit the Add new Domain button.

player-domains

This page also shows all relevant information for your player such as your player key, player CDN url, your plan, and the impressions (our pricing is based on impressions).

Download the Player

To download the player you need to switch to the Embed section. Just select the Use self-hosted player tab and hit the Download bitdash player button.

download player

The downloaded .zip package contains all necessary player files. The unpacked files can be placed on your server, cloud storage, CDN, etc. Please make sure to place all files within the same folder, or reference the files, using the Location attribute within the player configuration.

Prepare a Sample Page

Next step is that you download a preconfigured sample page, which demonstrates the player setup. This can be done, by using the Download Code button in the Embed section.

download sample page

To ensure that your self hosted player files are loaded, just insert the correct URL to bitdash.min.js at line 10 as shown in the excerpt of the sample page below:

<html lang="en">
<head>
  <title>bitdash SDK</title>
  <meta charset="UTF-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href='http://fonts.googleapis.com/css?family=Dosis' rel='stylesheet' type='text/css'/>

  <!-- bitdash player -->
  <script type="text/javascript" src="/yourpath/bitdash.min.js"></script>

Player Configuration

After that you need to configure a video for the player. You can configure our player with multiple packaged versions of the same video, e.g, MPEG-DASH, HLS, Progressive, etc.

At least one of this packaged version needs to be present, but multiple are possible as shown in the example configuration below. The player will be configured with an MPEG-DASH, HLS and Progressive version of the same video.

{
  key : 'YOUR_KEY_HERE',
  source: {
    dash: '//path/to/mpd/video.mpd',
    hls: '//path/to/m3u8/video.m3u8',
    progressive: '//path/to/mp4/video.mp4'
  }
}

Just replace the values for dash, hls and progressive with the urls that point to packaged versions of your video. Beside that you need to add your player key too, so that your impressions can be identified by our backend.

Upload to your Server

After that configuration you can upload all files to your server, cloud storage, CDN, etc. Once you open the page you should see your video playing with the bitmovin player.

If problems occur it’s always good to take a look at our Frequently Asked Questions. If you don’t see your question here, feel free to contact our support for direct help.

Back to Top
Simple Share Buttons