StreamsPlaybackEncodingBitmovin Dashboard

Getting Started with the Web SDK

Bitmovin Player is available on multiple different browser & product platforms. In this guide the focus is on HTML5 playback environments and how to configure the Player Web SDK in these environment.

Suggest Edits

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.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bitmovin SDK - Getting Started WEB SDK</title>
  <meta charset="UTF-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- STEP 1 - SDK Installation-->
  <script src="https://cdn.bitmovin.com/player/web/8/bitmovinplayer.js" type="text/javascript"></script>
</head>
<body>

<!-- STEP 2 - Provide a player container element-->
<div id="my-player"></div>

<script>
//<!-- STEP 3 - Configure and Initialize the player-->
var playerConfig = {
  "key": "<PLAYER_LICENSE_KEY>",
  "playback": {
    "muted": true,
    "autoplay": false
  }
}
var container = document.getElementById('my-player');
var player = new bitmovin.player.Player(container, playerConfig);

//<!-- STEP 4 - Configure and load a Source for the player -->
var sourceConfig = {
  "title": "Default Demo Source Config",
  "description": "Select another example in \"Step 4 - Load a Source\" to test it here",
  "dash": "https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd",
  "hls": "https://bitmovin-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8",
  "smooth": "https://test.playready.microsoft.com/smoothstreaming/SSWSS720H264/SuperSpeedway_720.ism/manifest",
  "progressive": "https://bitmovin-a.akamaihd.net/content/MI201109210084_1/MI201109210084_mpeg-4_hd_high_1080p25_10mbits.mp4",
  "poster": "https://bitmovin-a.akamaihd.net/content/MI201109210084_1/poster.jpg"
}

player.load(sourceConfig).then(function() {
    console.log('Successfully loaded Source Config!');
  }).catch(function(reason) {
    console.log('Error while loading source:', reason);
  }
);

</script>
</body>
</html>

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.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bitmovin SDK - Getting Started WEB SDK</title>
  <meta charset="UTF-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- STEP 1 - SDK Installation-->
</head>
<body>
  <!-- STEP 2 - Provide a player container element-->
  <script>
    //<!-- STEP 3 - Configure and Initialize the player-->

    //<!-- STEP 4 - Configure and load a Source for the player -->
  </script>
</body>
</html>

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.

<script src="https://cdn.bitmovin.com/player/web/8/bitmovinplayer.js" type="text/javascript"></script>

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.

<div id="my-player"></div>

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.

var playerConfig = {
  "key": "<PLAYER_LICENSE_KEY>",
  "playback": {
    "muted": true,
    "autoplay": false
  }
}

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.

var container = document.getElementById('my-player');
var player = new bitmovin.player.Player(container, playerConfig);

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.

var sourceConfig = {
  "title": "Default Demo Source Config",
  "description": "Select another example in \"Step 4 - Load a Source\" to test it here",
  "dash": "https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd",
  "hls": "https://bitmovin-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8",
  "smooth": "https://test.playready.microsoft.com/smoothstreaming/SSWSS720H264/SuperSpeedway_720.ism/manifest",
  "progressive": "https://bitmovin-a.akamaihd.net/content/MI201109210084_1/MI201109210084_mpeg-4_hd_high_1080p25_10mbits.mp4",
  "poster": "https://bitmovin-a.akamaihd.net/content/MI201109210084_1/poster.jpg"
}

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.

player.load(sourceConfig).then(function() {
    console.log('Successfully loaded Source Config!');
  }).catch(function(reason) {
    console.log('Error while loading source:', reason);
  }
);

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

API

Smart TV development

Getting Started

DRM - Digital Rights Management

Getting Started

API

Updated 5 months ago