Teleport Media Docs

English

Русский

English

Русский

Appearance

Teleport SDK Integration for Web ​

This section will help you integrate the Teleport SDK into your web project.

1. Domain Registration in Teleport PDN ​

To start working with Teleport, you need to register your domain and obtain API keys:

  1. Register on cabinet.teleport.media.
  2. In the "Integration" section, complete the domain validation procedure using one of the suggested methods.
  3. After successful domain confirmation, in the "My domains" tab, you will receive API keys required for the Teleport script to work.
  4. You are now ready to connect the Teleport SDK by following further instructions.

Important

Your API key is a unique identifier for your project. Keep it secure and do not share it publicly.

2. Connecting the Teleport SDK ​

There are several convenient ways to connect the Teleport library to your web page:

Option 1: Separate Scripts (core + loader) ​

Connect the main Teleport script and a separate loader for your chosen player:

html
<script src="https://cdn.teleport.media/stable/teleport.js"></script>
<script src="https://cdn.teleport.media/stable/teleport.hlsjs.js"></script>

Option 2: Separate Scripts with Polyfills ​

If you need to support older browsers, connect the polyfill script before the main script and loader:

html
<script src="https://cdn.teleport.media/stable/teleport.polyfill.js"></script>
<script src="https://cdn.teleport.media/stable/teleport.js"></script>
<script src="https://cdn.teleport.media/stable/teleport.hlsjs.js"></script>

Option 3: Using a Bundle (core + loader + polyfills) ​

The simplest way is to connect a ready-made bundle that includes the core script, player loader, and polyfills:

html
<script src="https://cdn.teleport.media/stable/teleport.hlsjs.bundle.js"></script>

The bundle name is formed by adding the .bundle suffix to the loader script name (e.g., teleport.hlsjs.bundle.js).

Connection Order

For all the above options, the order of script connection on the page is critically important.

List of available bundles: ​

  • https://cdn.teleport.media/stable/teleport.shaka.bundle.js
  • https://cdn.teleport.media/stable/teleport.clappr-hls.bundle.js
  • https://cdn.teleport.media/stable/teleport.clappr-dash.bundle.js
  • https://cdn.teleport.media/stable/teleport.hlsjs.bundle.js
  • https://cdn.teleport.media/stable/teleport.videojs-hls.bundle.js
  • https://cdn.teleport.media/stable/teleport.uppod.bundle.js
  • https://cdn.teleport.media/stable/teleport.dashjs.bundle.js

3. Initializing the Teleport SDK ​

After connecting the Teleport library to your page, you need to initialize it.

Important

Initialization options may vary significantly depending on the media player used. Detailed initialization instructions for each player can be found in the corresponding section: Player Plugins.

Shaka Player Initialization Example ​

html
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>TELEPORT SHAKA EXAMPLE</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/shaka-player/2.2.5/shaka-player.compiled.debug.js"></script>
</head>
<body>
<video id="video"
       width="640"
       muted
       poster="//shaka-player-demo.appspot.com/assets/poster.jpg"
       controls autoplay></video>

<!--Connecting the core SDK-->
<script src="https://cdn.teleport.media/stable/teleport.js"></script>
<!--Connecting the Shaka Player plugin-->
<script src="https://cdn.teleport.media/stable/teleport.shaka.js"></script>
<!--Initialization script-->
<script>
    var tlprt;
    var STREAM_URL = "<URL video-manifest>";
    var API_KEY = "<APIKEY obtained from the cabinet>"
    function initApp() {
        shaka.polyfill.installAll();
        var video = document.getElementById("video");
        var player = new shaka.Player(video);
        player.addEventListener("error", onErrorEvent);

        // initialize Teleport instance
        teleport.initialize({
                    apiKey: API_KEY,
                    loader: {               // integration parameters with the player
                        type: "shaka",      // plugin identifier
                        params: {
                            player: player  // player instance
                        }
                    }
                })
                .then(function (instance) {
                    // start player and save teleport instance
                    tlprt = instance;

                    return player.load(manifestUri);
                })
                .then(function (instance) {
                    tlprt = instance;

                    // This runs if the asynchronous load is successful.
                    console.log('The video has now been loaded!');
                    // subscribe to page close event to correctly release resources
                    window.addEventListener("unload", function () {
                        if (tlprt) {
                            tlprt.dispose();
                            tlprt = null;
                        }
                    });
                })
                .catch(onError);
    }

    function onErrorEvent(event) {
        // Extract the shaka.util.Error object from the event.
        onError(event.detail);
    }

    function onError(error) {
        // Log the error.
        console.error("Error code", error.code, "object", error);
    }

    document.addEventListener("DOMContentLoaded", initApp);
</script>
</body>
</html>