[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

Fri Jun 28 2019

Integrating Bitmovin Player with Teleport

RequirementsLink Icon

  • 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.

InstallationLink Icon

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>

ConfigurationLink Icon

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

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

  1. Initialize Teleport by specifying bitmovin as the loader, and provide the reference to the 'playerConfig' network API as parameter.
  2. Once Teleport is initialized, get the API loader
  3. Overwrite the sendHttpRequest method of the Bitmovin Network API with the sendHttpRequest method of the API loader.
  4. 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 exampleLink Icon

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>

Give us feedback