[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

Thu Sep 13 2018

Get Started with the Bitmovin Player

Before you startLink Icon

You are about to get ready to use our Bitmovin Player, which will help you to simplify your video playback workflows as it provides you with cross platform and DRM support, as well as other exciting features.

So, if you haven’t sign up to use our player already, please go to the signup page of our portal and create a new account to try our services for free! Your account will start with a 30 days trial period, which comes with an included volume of 5000 player impressions for free so you can start using our Bitmovin player right away.

Once you signed up, you will receive an activation link via email. Just click on it, and you are ready to login with your credentials.

Configure your player licenseLink Icon

Go to https://bitmovin.com/dashboard/player/licenses where you will find all available configurations for your player license(s). In order to use the player on your website, you have to add the domain of your website to your player license. This is a security mechanism and protects your license being used elsewhere. Therefore, enter your website domain (e.g. example.com) into the text field below “Add Domain” and click on “+Add”.

Hint: The domain “localhost” is whitelisted by default to ease the development process, so you don’t have to deal license denials while working on your integration locally.

Embed the Bitmovin player into websiteLink Icon

The first step is to include the Bitmovin Player into your website by embedding the Bitmovin players javascript source to your website. You will find some “ready to use” code snippets, which already contain your player license key in the “Embed” section of our dashboard.

Example

The following example will show you step by step how the Bitmovin Player can be integrated into a website:

1<!DOCTYPE html>
2<html>
3<head>
4 <meta charset="utf-8">
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
6</head>
7
8<body>
9</body>
10</html>

Let’s start by embedding the player source file into the element of our template:

1<!DOCTYPE html>
2<html>
3<head>
4 <meta charset="utf-8">
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
6 <script type="text/javascript" src="https://cdn.bitmovin.com/player/web/8.0.0/bitmovinplayer.js"></script>
7</head>
8
9<body>
10</body>
11</html>

Hint: If you don’t want to use our CDN hosted player version, as shown in the example, you can host our player yourself as well. Just click the “Download the Player” button in the embed tab of the dashboard and you will get the player package for the channel and version, selected in the dropdown menus above.

Now, we have to add a <div id="my-player"></div> element, where we want our player to be inserted. It requires an “id”, which will be used later on to identify HTML element.

1<!DOCTYPE html>
2<html>
3<head>
4 <meta charset="utf-8">
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
6 <script type="text/javascript" src="https://cdn.bitmovin.com/player/web/8.0.0/bitmovinplayer.js"></script>
7</head>
8
9<body>
10<div id="my-player"></div>
11</body>
12</html>

Configure Your PlayerLink Icon

While the Bitmovin player offers plenty of options to customize the player’s behavior as well as its look & feel, we will start with a common configuration, which contains multiple input sources as well as a poster image, and the player license key:

1<!DOCTYPE html>
2<html>
3<head>
4 <meta charset="utf-8">
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
6 <script type="text/javascript" src="https://cdn.bitmovin.com/player/web/8.0.0/bitmovinplayer.js"></script>
7</head>
8
9<body>
10<div id="my-player"></div>
11<script type="text/javascript">
12const container = document.getElementById('my-player');
13const playerConfig = {
14 key: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'
15};
16const source = {
17 title: "Getting Started with the Bitmovin Player",
18 description: "Now you are ready to embed the Bitmovin Player into your own website :)",
19 dash: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
20 hls: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8',
21 progressive: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/MI201109210084_mpeg-4_hd_high_1080p25_10mbits.mp4',
22 poster: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/poster.jpg'
23};
24</script>
25</body>
26</html>

Please replace xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx with your player license key, which is shown at https://bitmovin.com/dashboard/player/licenses of your account. The next step is to initialize a new instance of the Bitmovin Player, which requires a reference to the HTML element from before, and its general configuration:

1const player = new bitmovin.player.Player(container, playerConfig);

Now we can to start using the player and provide it with the content we want to play using the load() API call:

1player.load(source).then(
2 player => {
3 console.log('Successfully created Bitmovin Player instance')
4 },
5 reason => {
6 console.log('Error while creating Bitmovin Player instance')
7 }
8);

Hint: The load() call returns a Promise which is resolved if the setup succeeds, and rejected if it fails. For both cases, you can provide a callback function, in order execute anything else once the Bitmovin Player and its API is ready to use.

Let’s add those code snippets to our template in order to see how an complete example looks like, and if it works as expected:

1<!DOCTYPE html>
2<html>
3<head>
4 <meta charset="utf-8">
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
6 <script type="text/javascript" src="https://bitmovin-a.akamaihd.net/bitmovin-player/stable/7.3/bitmovinplayer.js"></script>
7</head>
8
9<body>
10<div id="my-player"></div>
11<script type="text/javascript">
12const container = document.getElementById('my-player');
13const playerConfig = {
14 key: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'
15};
16const source = {
17 title: "Getting Started with the Bitmovin Player",
18 description: "Now you are ready to embed the Bitmovin Player into your own website :)",
19 dash: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
20 hls: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8',
21 progressive: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/MI201109210084_mpeg-4_hd_high_1080p25_10mbits.mp4',
22 poster: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/poster.jpg'
23};
24
25const player = new bitmovin.player.Player(container, playerConfig);
26
27player.load(source).then(
28 player => {
29 console.log('Successfully created Bitmovin Player instance')
30 },
31 reason => {
32 console.log('Error while creating Bitmovin Player instance')
33 }
34);
35</script>
36</body>
37</html>

Give us feedback