Hls.js

Tuesday, March 31, 2020 5:24 AM

hls.js - это библиотека JavaScript, которая реализует клиент HTTP Live Streaming. Он использует HTML5-видео и MediaSource Extensions для воспроизведения.

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

Teleport.js совместим с версиями hls.js старше 0.7.0.

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

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

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

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

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

Пример:

<script src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script>
<script src="https://cdn.teleport.media/stable/teleport.hlsjs.bundle.js"></script>

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

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

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

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

            function initApp() {
                // инициализируем плеер
                var hls = new Hls();
                var video = document.getElementById('video');

                hls.loadSource(STREAM_URL);
                hls.attachMedia(video);

                hls.on(Hls.Events.MANIFEST_PARSED, function () {
                    video.play();
                });

                // инициализируем экземпляр Teleport
                teleport.initialize({
                            apiKey: API_KEY,
                            loader: { // параметры интеграции с плеером
                                type: "hlsjs", // идентификатор плагина
                                params: {
                                    hlsjs: hls // экземпляр плеера
                                }
                            }
                        })
                        .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