Dash.js - Teleport Documentation

Поддерживаемые версии

Teleport.js совместим с версиями Dash.js с 2.6.0 по 2.9.3

(Поддержка версий с 3.0.0 появится в скором времени)

Для начала работы

До первой инициализации teleport.js необходимо привязать домен и получить API ключ apiKey в личном кабинете клиента Teleport.

Инициализация

Загрузка javascript модулей при интеграции Dash.js с teleport.js происходит в следующем порядке:

Dash.js.
Бандл Teleport Core с плагином для Dash.js (все варианты подключения библиотеки Teleport).

Пример:

<script src="https://cdnjs.cloudflare.com/ajax/libs/dashjs/2.9.3/dash.all.min.js"></script>
<script src="https://cdn.teleport.media/stable/teleport.dashjs.bundle.js"></script>

Для загрузки видеоплеером сегментов из пиринга необходимо:

Создать экземпляр плеера Dash.js.
Инициализировать Телепорт, передав в качестве параметра лоадера созданный экземпляр плеера.

Полный пример

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DASH JS - TELEPORT</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dashjs/2.9.3/dash.all.min.js"></script>
    <script src="https://cdn.teleport.media/stable/teleport.dashjs.bundle.js"></script>
</head>
<body>
<video id="video"
       width="640"
       muted
       poster="https://cloud.githubusercontent.com/assets/2762250/7824984/985c3e76-03bc-11e5-807b-1402bde4fe56.png"
       controls autoplay></video>
<script>
    let tlprt;
    let player;
    var STREAM_URL = "<URL видео-манифеста>";
    var API_KEY = "<APIKEY полученных из кабинета>";
    function initApp()
    {
        let video = document.getElementById("video");
        player = dashjs.MediaPlayer().create();

        teleport.initialize({
                    apiKey: API_KEY,
                    loader: {
                        type: "dashjs",
                        params: {player: player}
                    }
                })
                .then(function (instance)
                {
                    tlprt = instance;

                    return player.initialize(video, STREAM_URL, true);
                })
                .then(function ()
                {
                    // 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 onError(error)
    {
        console.error("Error code", error.code, "object", error);
    }

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