Uppod HTML5

Tuesday, March 31, 2020 5:24 AM

Uppod - плеер с возможностью проигрывания видео и поддержкой HLS.

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

Teleport.js совместим с версиями Uppod HTML5 0.13.03 - 0.13.05.

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

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

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

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

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

Пример:

<script src="/uppod-0.13.03.js"></script>
<script src="https://cdn.teleport.media/stable/teleport.uppod.bundle.js"></script>

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

  1. Создать экземпляр плеера Uppod.
  2. Инициализировать Телепорт, передав в качестве параметра лоадера конструктор Uppod.

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

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>TELEPORT UPPOD EXAMPLE</title>
    </head>
    <body>
        <div id="video"></div>
        <script src="/uppod-0.13.05.js"></script>
        <script src="https://cdn.teleport.media/stable/teleport.uppod.bundle.js"></script>
        <script>
            var tlprt;
            var STREAM_URL = "<URL видео-манифеста>";
            var API_KEY = "<APIKEY полученных из кабинета>";

            function initApp() {
                // инициализируем плеер
                var player = new Uppod({
                    m: "video",
                    uid: "video",
                    file: STREAM_URL
                });

                // инициализируем экземпляр Teleport
                teleport.initialize({
                            apiKey: API_KEY,
                            loader: { // параметры интеграции с плеером
                                type: "uppod", // идентификатор плагина
                                params: {
                                    uppod: Uppod // конструктор плеера
                                }
                            }
                        })
                        .then(function (instance) {
                            // сохраняем экземпляр teleport
                            tlprt = instance;

                            console.log("The video has now been loaded!");
                            // подписываемся за событие закрытия страницы, чтобы корректно освободить ресурсы
                            window.addEventListener("unload", function () {
                                if (tlprt) {
                                    tlprt.dispose();
                                    tlprt = null;
                                }
                            });
                        })
                        .catch(onError);
            }

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

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

Документация по Teleport API