Bitmovin Docs - Player Tutorials | Integrating Bitmovin Player with Teleport

Requirements

In order to use the Teleport P2P solution, you need a Teleport Account, and a verified domain of your streaming to get an API Key for its configuration.
Teleport.js is compatible with Bitmovin Player Web SDK v8.2 and higher.

Installation

Include teleport.js strictly inside the section before the video-player initialization.

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <!-- any code -->
5    <script src="https://cdn.teleport.media/stable/teleport.bitmovin.bundle.js"></script>
6    <script type="text/javascript" src="https://cdn.bitmovin.com/player/web/8/bitmovinplayer.js"></script>
7    <!-- any code -->
8</head>
9<body>
10  <!-- any code -->
11</body>
12</html>

Configuration

For the configuration of the Bitmovin Player and Teleport.js you need

the Bitmovin Player Key of your Bitmovin Player License, which you can find in your Bitmovin Dashboard, and
the Teleport API Key which you can obtain your Teleport client area.

Bitmovin Player

The basic configuration of the Bitmovin Player would look like the following. The empty network object is necessary for the following steps where the Bitmovin Network API is used to integrate with the Teleport.js API.

1const playerConfig = {
2    key: BITMOVIN_LICENSE_KEY,
3    network: {}
4};

Teleport.js

Initialize Teleport by specifying bitmovin as the loader, and provide the reference to the 'playerConfig' network API as parameter.
Once Teleport is initialized, get the API loader
Overwrite the sendHttpRequest method of the Bitmovin Network API with the sendHttpRequest method of the API loader.
Initialize the Bitmovin Player with its playerConfig and provide its instance to Teleport using the setPlayer method.

1  let player;
2  let container = document.getElementById('my-player');
3
4  //Step 1
5  teleport.initialize({
6    apiKey: TELEPORT_API_KEY,
7    loader: {
8      type: "bitmovin",
9      params: { networkConfig: playerConfig.network },
10    },
11  }).then(function(instance) {
12    //Step 2
13    var teleportBitmovinPlugin = instance.getLoader();
14    
15    //Step 3
16    if (teleportBitmovinPlugin) {
17      playerConfig.network.sendHttpRequest = teleportBitmovinPlugin.sendHttpRequest;
18    }
19    
20    //Step 4
21    player = new bitmovin.player.Player(container, playerConfig);
22    teleportBitmovinPlugin.setPlayer(player);
23
24    player.load(source).then(
25      function(player) {
26        console.log('Successfully created Bitmovin Player instance');
27      },
28      function(reason) {
29        console.log('Error while creating Bitmovin Player instance');
30      },
31    );
32  });

That's it, you are ready to load a player source and start with your P2P based content playback!

Full example

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <title>Bitmovin SDK + Teleport</title>
5    <meta charset="UTF-8"/>
6    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <script src="https://cdn.teleport.media/stable/teleport.bitmovin.bundle.js"></script>
9    <!-- Bitmovin Player -->
10    <script type="text/javascript" src="https://cdn.bitmovin.com/player/web/8/bitmovinplayer.js"></script>
11</head>
12<body>
13<div id="my-player"></div>
14<script type="text/javascript">
15
16
17  let BITMOVIN_PLAYER_KEY = "BITMOVIN PLAYER KEY";
18  let TELEPORT_API_KEY = "TELEPORT API KEY";
19
20  const playerConfig = {
21    key: BITMOVIN_PLAYER_KEY,
22    network: {},
23  };
24
25  let player;
26  let container = document.getElementById('my-player');
27  let source = {
28    title: "Bitmovin Player Web SDK + Teleport.js Demo",
29    dash: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
30    hls: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8',
31    progressive:
32      'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/MI201109210084_mpeg-4_hd_high_1080p25_10mbits.mp4',
33    poster: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/poster.jpg',
34  };
35
36  teleport.initialize({
37    apiKey: TELEPORT_API_KEY,
38    loader: {
39      type: "bitmovin",
40      params: { networkConfig: playerConfig.network },
41    },
42  }).then(function(instance) {
43    let teleportBitmovinPlugin = instance.getLoader();
44
45    if (teleportBitmovinPlugin) {
46      playerConfig.network.sendHttpRequest = teleportBitmovinPlugin.sendHttpRequest;
47    }
48
49    player = new bitmovin.player.Player(container, playerConfig);
50
51    teleportBitmovinPlugin.setPlayer(player);
52
53    player.load(source).then(
54      function(player) {
55        console.log('Successfully created Bitmovin Player instance');
56      },
57      function(reason) {
58        console.log('Error while creating Bitmovin Player instance');
59      },
60    );
61  });
62
63</script>
64</body>
65</html>

Integrating Bitmovin Player with Teleport