[object Object] Icon

Encoding
Learn how to create, start, manage and modify Encodings

[object Object] Icon

Player
Learn how to create, start, manage and modify Players

[object Object] Icon

Analytics
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

Web SDK

The following tutorials show you through how to configure, integrate and customize your Player in Web.

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.

Standard
Modular

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.

Standard
Modular

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

Whitelist Domains

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.

ScreenshotDashboardLicensesNoinlineSvg

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.

Github

Give us feedback