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.
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
The video source is defined in a separate configuration object. In the next steps it will be referred to as source.
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.
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
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.
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.
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.
In order to use the player on your website you have to whitelist 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 whitelisting can be done in the dashboard under Player -> Licenses.
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.
You can download fully functional code examples from our Github account.