Teleport Media Docs

Русский

English

Русский

English

Appearance

Интеграция Teleport SDK для Web ​

Этот раздел поможет вам интегрировать Teleport SDK в ваш веб-проект.

1. Регистрация домена в Teleport PDN ​

Для начала работы с Teleport необходимо зарегистрировать ваш домен и получить API-ключи:

  1. Зарегистрируйтесь на https://dash.teleport.media.
  2. В разделе "Интеграция" пройдите процедуру валидации домена одним из предложенных способов.
  3. После успешного подтверждения домена, во вкладке "My domains" вы получите API-ключи, необходимые для работы скрипта Teleport.
  4. Теперь вы готовы к подключению Teleport SDK, следуя дальнейшим инструкциям.

Важно

Ваш API-ключ является уникальным идентификатором вашего проекта. Храните его в безопасности и не делитесь им публично.

2. Подключение Teleport SDK ​

Существует несколько удобных способов подключения библиотеки Teleport к вашей веб-странице:

Вариант 1: Отдельные скрипты (основной + лоадер) ​

Подключите основной скрипт Teleport и отдельный лоадер для используемого вами плеера:

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

Вариант 2: Отдельные скрипты с полифилами ​

Если вам нужна поддержка старых браузеров, подключите скрипт с полифилами перед основным скриптом и лоадером:

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>

Вариант 3: Использование бандла (основной + лоадер + полифилы) ​

Наиболее простой способ — подключить готовый бандл, который включает в себя основной скрипт, лоадер для плеера и полифилы:

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

Название бандла формируется путем добавления суффикса .bundle к имени скрипта лоадера (например, teleport.hlsjs.bundle.js).

Порядок подключения

Для всех вышеуказанных вариантов критически важен порядок подключения скриптов на странице.

Список доступных бандлов: ​

  • 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. Инициализация Teleport SDK ​

После подключения библиотеки Teleport на вашу страницу, необходимо её инициализировать.

Важно

Варианты инициализации могут значительно отличаться в зависимости от используемого медиаплеера. Подробные инструкции по инициализации для каждого плеера вы найдете в соответствующем разделе: Плагины для плееров.

Пример инициализации для Shaka Player ​

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>

<!--Подключение основного SDK-->
<script src="https://cdn.teleport.media/stable/teleport.js"></script>
<!--Подключение плагина для Shaka Player-->
<script src="https://cdn.teleport.media/stable/teleport.shaka.js"></script>
<!--Скрипт инициализации-->
<script>
    var tlprt;
    var STREAM_URL = "<URL видео-манифеста>";
    var API_KEY = "<APIKEY полученных из кабинета>"
    function initApp() {
        shaka.polyfill.installAll();
        var video = document.getElementById("video");
        var player = new shaka.Player(video);
        player.addEventListener("error", onErrorEvent);

        // инициализируем экземпляр Teleport
        teleport.initialize({
                    apiKey: API_KEY,
                    loader: {               // параметры интеграции с плеером
                        type: "shaka",      // идентификатор плагина
                        params: {
                            player: player  // экземпляр плеера
                        }
                    }
                })
                .then(function (instance) {
                    // запускаем плеер и сохраняем экземпляр teleport
                    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!');
                    // подписываемся за событие закрытия страницы, чтобы корректно освободить ресурсы
                    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>