![[object Object] Icon](data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMzIgMzIiPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iYSIgeDE9IjE2IiB5MT0iLTUwOTIuMjUiIHgyPSIxNiIgeTI9Ii01MTIzLjk4IiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDEsIDAsIDAsIC0xLCAwLCAtNTA5Mi4xMikiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiMxYWIzZmYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMwZTgyZmYiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48dGl0bGU+SWNvbnM8L3RpdGxlPjxwYXRoIGQ9Ik0xLjUsMTAuNDh2MTFhNC44MSw0LjgxLDAsMCwwLDIuNDMsNC4xN2w5LjY1LDUuNTJhNC44MSw0LjgxLDAsMCwwLDQuODQsMGw5LjY1LTUuNTJhNC44LDQuOCwwLDAsMCwyLjQzLTQuMTd2LTExYTQuODEsNC44MSwwLDAsMC0yLjQzLTQuMTdMMTguNDIuNzlhNC44MSw0LjgxLDAsMCwwLTQuODQsMEwzLjkzLDYuMzFBNC43OCw0Ljc4LDAsMCwwLDEuNSwxMC40OFoiIHN0eWxlPSJmaWxsOnVybCgjYSkiLz48cGF0aCBkPSJNMjQuODMsMTZsLS43MS0xLjIxYS42My42MywwLDAsMC0uNTItLjMxSDIyLjJhLjU4LjU4LDAsMCwwLS41Mi4zMWwtLjQ5Ljg1SDE4LjlhLjEzLjEzLDAsMCwwLDAsMEwxOCwxNC4wNmExLjQxLDEuNDEsMCwwLDAtMS4yMi0uNzFIMTVMMTMuNjgsMTEuMmwuNTQtLjkzYS42LjYsMCwwLDAsMC0uNjFsLS43MS0xLjIxQS42MS42MSwwLDAsMCwxMyw4LjE0aC0xLjRhLjU4LjU4LDAsMCwwLS41Mi4zMWwtLjcxLDEuMjFhLjYuNiwwLDAsMCwwLC42MWwuNzEsMS4yMWEuNjMuNjMsMCwwLDAsLjUyLjMxaC44OWwxLjM0LDIuMjZoMEwxMywxNS41NUExLjQxLDEuNDEsMCwwLDAsMTMsMTdsLjg2LDEuNDkuMDcuMTItMS4yOSwyLjE1aC0xYS42LjYsMCwwLDAtLjUyLjMxbC0uNzEsMS4yMmEuNTkuNTksMCwwLDAsMCwuNmwuNzEsMS4yMmEuNjMuNjMsMCwwLDAsLjUyLjMxSDEzYS42LjYsMCwwLDAsLjUyLS4zMWwuNzEtMS4yMmEuNTkuNTksMCwwLDAsMC0uNmwtLjQ4LS44MywxLjM0LTIuMjVoMS43MWExLjQsMS40LDAsMCwwLDEuMjItLjdsLjg2LTEuNXMwLDAsMCwwaDIuMjlsLjQ5Ljg1YS42NS42NSwwLDAsMCwuNTIuMzFoMS40YS42LjYsMCwwLDAsLjUyLS4zMWwuNzEtMS4yMkEuNjIuNjIsMCwwLDAsMjQuODMsMTZabS03LjEuMzYtLjg2LDEuNDlzMCwwLS4wOCwwSDE1czAsMCwwLDBsLS44Ni0xLjQ5YS4wOC4wOCwwLDAsMSwwLS4wOUwxNSwxNC43NHMwLDAsMCwwYTAsMCwwLDAsMSwwLDBoMS43NGEuMTUuMTUsMCwwLDEsLjA4LjA1bC44NiwxLjQ5QS4xNC4xNCwwLDAsMSwxNy43MywxNi4zMloiIHN0eWxlPSJmaWxsOiNmZmYiLz48cGF0aCBkPSJNMTEuNDgsMTUuNzRhLjY2LjY2LDAsMCwxLC42Ny42NS42NS42NSwwLDAsMS0uNjcuNjZIMTAuMTVhLjY2LjY2LDAsMSwxLDAtMS4zMVoiIHN0eWxlPSJmaWxsOiNmZmYiLz48cGF0aCBkPSJNMTcuOTEsMTkuNjNhLjY3LjY3LDAsMCwxLC45MS4yNEwxOS41LDIxYS42NC42NCwwLDAsMS0uMjQuODkuNzIuNzIsMCwwLDEtLjM0LjA5LjY4LjY4LDAsMCwxLS41OC0uMzRsLS42Ny0xLjE0QS42My42MywwLDAsMSwxNy45MSwxOS42M1oiIHN0eWxlPSJmaWxsOiNmZmYiLz48cGF0aCBkPSJNMTguMjUsMTMuMjVhLjgxLjgxLDAsMCwxLS4zNC0uMDguNjMuNjMsMCwwLDEtLjIzLS45bC42Ny0xLjE1YS42OC42OCwwLDAsMSwuOTEtLjIzLjY1LjY1LDAsMCwxLC4yNC44OWwtLjY3LDEuMTRBLjY1LjY1LDAsMCwxLDE4LjI1LDEzLjI1WiIgc3R5bGU9ImZpbGw6I2ZmZiIvPjwvc3ZnPg==)
![[object Object] Icon](data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMzIgMzIiPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iYSIgeDE9IjE2IiB5MT0iLTUyNjguNjQiIHgyPSIxNiIgeTI9Ii01MzAwLjM2IiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDEsIDAsIDAsIC0xLCAwLCAtNTI2OC41KSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzFhYjNmZiIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzBlODJmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjx0aXRsZT5JY29uczwvdGl0bGU+PHBhdGggZD0iTTEuNSwxMC40OHYxMWE0LjgxLDQuODEsMCwwLDAsMi40Myw0LjE3bDkuNjUsNS41MmE0LjgxLDQuODEsMCwwLDAsNC44NCwwbDkuNjUtNS41MmE0LjgsNC44LDAsMCwwLDIuNDMtNC4xN3YtMTFhNC44MSw0LjgxLDAsMCwwLTIuNDMtNC4xN0wxOC40Mi43OWE0LjgxLDQuODEsMCwwLDAtNC44NCwwTDMuOTMsNi4zMUE0Ljc4LDQuNzgsMCwwLDAsMS41LDEwLjQ4WiIgc3R5bGU9ImZpbGw6dXJsKCNhKSIvPjxwYXRoIGQ9Ik0xMy42LDIxLjI5YTEuNzksMS43OSwwLDAsMS0uOS0uMjVBMS4zNywxLjM3LDAsMCwxLDEyLDE5Ljg5VjEzYTEuMzUsMS4zNSwwLDAsMSwuNjgtMS4xNSwxLjc4LDEuNzgsMCwwLDEsMS43MiwwbDYuNTIsMy40N2ExLjMsMS4zLDAsMCwxLDAsMi4zNkwxNC40MiwyMS4xQTEuOSwxLjksMCwwLDEsMTMuNiwyMS4yOVptMC03Ljg4djYuMDZhLjE1LjE1LDAsMCwwLC4yMi4xNGw1LjcxLTNhLjE4LjE4LDAsMCwwLDAtLjMybC01LjcxLTNBLjE1LjE1LDAsMCwwLDEzLjU5LDEzLjQxWiIgc3R5bGU9ImZpbGw6I2ZmZiIvPjwvc3ZnPg==)
![[object Object] Icon](data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMzIgMzIiPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iYSIgeDE9IjE2IiB5MT0iLTUxNzUuMDciIHgyPSIxNiIgeTI9Ii01MjA2LjgiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMSwgMCwgMCwgLTEsIDAsIC01MTc0LjkzKSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzFhYjNmZiIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzBlODJmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjx0aXRsZT5JY29uczwvdGl0bGU+PHBhdGggZD0iTTEuNSwxMC40OHYxMWE0LjgxLDQuODEsMCwwLDAsMi40Myw0LjE3bDkuNjUsNS41MmE0LjgxLDQuODEsMCwwLDAsNC44NCwwbDkuNjUtNS41MmE0LjgsNC44LDAsMCwwLDIuNDMtNC4xN3YtMTFhNC44MSw0LjgxLDAsMCwwLTIuNDMtNC4xN0wxOC40Mi43OWE0LjgxLDQuODEsMCwwLDAtNC44NCwwTDMuOTMsNi4zMUE0Ljc4LDQuNzgsMCwwLDAsMS41LDEwLjQ4WiIgc3R5bGU9ImZpbGw6dXJsKCNhKSIvPjxwYXRoIGQ9Ik05LjMzLDE3YS42OC42OCwwLDAsMC0uNjcuNjh2My40MWEuNjcuNjcsMCwxLDAsMS4zNCwwVjE3LjY0QS42Ny42NywwLDAsMCw5LjMzLDE3Wm0zLTIuNjNhLjY3LjY3LDAsMCwwLS42Ny42OHY2YS42Ny42NywwLDEsMCwxLjM0LDBWMTVBLjY3LjY3LDAsMCwwLDEyLjM2LDE0LjMzWm02LjA2LTEuOWEuNjcuNjcsMCwwLDAtLjY3LjY4djcuOTRhLjY3LjY3LDAsMSwwLDEuMzQsMFYxMy4xMUEuNjcuNjcsMCwwLDAsMTguNDIsMTIuNDNaIiBzdHlsZT0iZmlsbDojZmZmIi8+PHBhdGggZD0iTTE0LjcxLDE2LjJhLjY3LjY3LDAsMSwxLDEuMzQsMHY0Ljg2YS42Ny42NywwLDEsMS0xLjM0LDBaIiBzdHlsZT0iZmlsbDojZmZmIi8+PHBhdGggZD0iTTIwLjc3LDEwLjk0YS42Ny42NywwLDAsMSwuNjctLjY4LjY4LjY4LDAsMCwxLC42Ny42OXYxMC4xYS42Ny42NywwLDEsMS0xLjM0LDBaIiBzdHlsZT0iZmlsbDojZmZmIi8+PC9zdmc+)
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.
Quick Start Guide
Try our sandbox example to get a Bitmovin Player working with sample content in just a few steps:
Replace the ‘PLAYER_KEY_GOES_HERE’ value with your Bitmovin Player Licence key
Click play to create your first impression!
Get Started with your own Project
The following steps will walk you through adding the SDK to a new or existing Project step by step. Here is the full snippet for a working player instance. Simply insert your license key and add your domain to your allowlist. We’ll go through the components of this example below.
Before you Start...
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.
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 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 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.
Full Example Review
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!