StreamsPlaybackEncodingBitmovin Dashboard

The following steps will walk you through adding the Bitmovin Player SDK to a new or existing Project. Below is the full snippet for a working player instance. Simply insert your license key and add your domain to your allowlist. We’ll examine the parts of this example below.


## Before you Start...
If you'd like to follow along, start with the below HTML skeleton page and simply insert the code snippets for each step of this tutorial. You can use your preferred IDE, or use this [online IDE example](🔗) to follow along.

## Step 1: Add SDK to your Site
### CDN-Hosted Player Version (Development)
Every player release is available as a ready-to-use player build on the Bitmovin CDN. If you want to select a specific player version on your own, you can do so by providing a [full player version (8)](🔗) in the CDN URL. Copy & paste this code snippet below the HTML comment `STEP 1 - SDK Installation`.

### Modular Player Version
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.
A list of modules can be found in the [API Reference](🔗).
### NPM Package (Production)
All player versions are available as an [NPM package](🔗) as well. Please see the [Webpack-Demo example](🔗) in our Sample Github Repository to learn more how to use it. **If you are aiming to build a production ready setup, chose this packaging for integrating the player into your application.** Using packages allows to easily bundle them, allow for more ease of use in CI/CD workflows (e.g. version control) and to optimize the amount of files required which are loaded when someone visits your website.
## Step 2: Embed the Player
### Add a Player Container Element
The player SDK needs to know within which container it should render its video and UI components. In this example a `div` element is used with a unique `id="my-player"`, which is the recommended approach in general.

## Step 3: Initialize & Configure the Player
### Create a Player Configuration
A minimal player configuration requires the `key` property to be present, which expects a Player License Key.
The Bitmovin Player offers many options to customise the player's behaviour and its look&feel. [All available player configuration options](🔗) can be found in the Player API Reference. In the dropdown menu above you'll find some common player config examples useful to get started.

### Configure your Player License
You will have to allow-list 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. Allow-listing domains can be done in the [customer Dashboard](🔗) at **Player > Licenses**, then select the player license you want to use. To simply development efforts, localhost is allowlisted by default and users serving on `localhost` do not require a valid Bitmovin Player License key.

### Create a new Player Instance
Initialise a new player instance by providing it with a reference to the DOM element of your player-container-div and the player configuration object you defined earlier, as shown below.

## Step 4: Load a Source
### Create a Source Config
It provides the player with all the details about where to load content from, which streaming formats it is available in, as well as DRM configurations, additional subtitles or thumbnail tracks, metadata (e.g. title, and description to use by the player UI), as well as [source-specific Bitmovin Analytics configurations](🔗).

### Load a Source Config
This separate configuration object provides the player with all the details about where to load the content from, which streaming formats it is available in, as well as DRM configurations, additional subtitles or thumbnail tracks, metadata (e.g. title, and description to use by the player UI), or source-specific analytics configurations.

## Review
In this tutorial you completed the basics to use the Bitmovin Player (added its SDK, embedded the player, created a player & source config, configured your player license and initialized the player.
Now that you have learned how to add the player to your project, configure and use it you can start having a look at the [Player Configuration Options](🔗) and adapt the player further to your needs. Also, take a look at the [sample repository](🔗) which provides many use-case oriented Web SDK examples. Enjoy!
## What's next
### Advertising
**Getting Started**
  • [Setting up Ads with the Web Player](🔗)
**API**
  • [Static configuration](🔗)
  • [Dynamic API](🔗)
### Smart TV development
**Getting Started**
  • [Using the Web player on Samsung Tizen TVs](🔗)
  • [Using the Web player on LG webOS TVs](🔗)
### DRM - Digital Rights Management
**Getting Started**
  • [Streaming DRM protected content with Bitmovin Player Web SDK](🔗)
**API**
  • [Bitmovin Player Web SDK DRM configuration API](🔗)