[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 Bitmovin Player is available on multiple different browser & product platforms. Here the focus is on HTML5 playback environments and how to configure the Bitmovin Player Web SDK there.

Before you Start...Link Icon

If you want to follow along, simply insert the code snippets for each step to get a functional webpage into the skeleton HTML page below. You can use this online IDE example to follow along. The full example can be found at the end of this guide.

Step 1: Add SDK to your SiteLink Icon

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 its API Reference.

NPM Package (Production)

All player versions are available as 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 loade when someone visits your website.

Step 2: Embed the PlayerLink Icon

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 PlayerLink Icon

Create a Player Configuration

A minimal player configuration requires the key property to be present, which expects a Player License Key. When served on localhost, no valid player license key is required to simplify development efforts.

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.

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.

Configure your Player License

For the player to be used on a domain different to localhost, 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.

ScreenshotDashboardLicensesNoinlineSvg

Step 4: Load a SourceLink Icon

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.

Full Example ReviewLink Icon

In this tutorial you completed the basics to use the Bitmovin Player (added its SDK, embed the player, create a player & source config, configure your player license and initialize 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 example repository which provides many use-case oriented Web SDK examples :) Enjoy!

More ExamplesLink Icon

You can find many more fully functional code examples in our Github Repository.

Github

Give us feedback