[object Object] Icon

Learn how to create, start, manage and modify Encodings

[object Object] Icon

Learn how to create, start, manage and modify Players

[object Object] Icon

Learn how to create, start, manage and modify Analyticss

Docs Home
User shortcuts for search
Focus by pressing f
Hide results by pressing Esc
Navigate via   keys


The following tutorial walks you through the steps on how to configure and customize the Bitmovin Player in a web-based environment.

This guide gives an explanation on how to setup a player via CDN. If you are looking for a guide on how to setup a player via npm you can find it in the npm package documentation.

Step 1: Create Player ConfigurationLink Icon

Player Configuration

The Bitmovin Player offers many options to customize the player's behavior and its look & feel. They are documented in the player's documentation.

You can interactively create a player config with the config editor below. It even includes some presets to make it easier for you to start. The config you create here will be used throughout the whole tutorial and referred to as config.

Source Configuration

The video source is defined in a separate configuration object. In the next steps it will be referred to as source.

Step 2: Load the player sourceLink Icon

Load the Player Source

To load the player via a CDN, add the correct url with a script tag in the header.


Module-based Approach Makes the Video Player Faster

Since version 8.0, the player has a modular structure, which enables you to selectively import only the features (and therefore modules) you need for your use-case.
By removing unnecessary code (modules), the final size of the player can be greatly reduced, which means faster loading times, lower bandwidth consumption and ultimately a better user experience.

Player v8 can of course also be loaded the same way as all previous versions, which includes every module.

A list of modules can be found in our documentation.

Step 3: Setup the PlayerLink Icon

HTML Render Element

The player needs to know in which element it should render itself. Therefore, add a div with an id. In this example, the id is my-player

Create Instance

First, you need to create a new instance of the Bitmovin Player, which requires the id of the HTML element it should be rendered in, and the configuration object.


Setup Instance

Then we can call its load() method to start the player. The load() call returns a Promise which is resolved if the setup succeeds, and rejected if it fails.

Test Locally

Because of browser limitations, the video can't be played if the website is loaded via a file.
To test the player setup on your machine, you have to use a local webserver.

A simple one is serve, which can be installed via npm.

Step 4: Configure your Player LicenseLink Icon

Allowlist Domains

In order to use the player on your website you have to allowlist the domain of your website for which you want to enable the player. This is a security mechanism and protects your license from being used elsewhere.

Domain allowlisting can be done in the dashboard under Player -> Licenses.


Step 5: Final ReviewLink Icon

In this tutorial you completed the basics to use the Bitmovin Player, created a config, installed the package, set up the player license and added code to configure the player.

Now you can start having a look at further configuration options and adapt the player to your needs.

ExamplesLink Icon

You can download fully functional code examples from our Github account.


Give us feedback