Clappr HLS

Tuesday, March 31, 2020 5:24 AM

Clappr - это расширяемая библиотека для создания видеоплееров. Он поддерживается многими браузерами и в основном всеми мобильными устройствами, в том числе в некоторых игровых консолях.

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

Teleport.js совместим с версиями Clappr 0.2.70 и выше.

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

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

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

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

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

Пример:

<script src="https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js"></script>
<script src="https://cdn.teleport.media/stable/teleport.clappr-hls.bundle.js"></script>

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

  1. Инициализировать Телепорт, указав в качестве лоадера clappr-hls.
  2. После инициализации скрипта Телепорта получить API лоадера, и далее плагин TeleportClapprHlsPlugin. Он необходим для поддержки пиринга плеером Clappr.
  3. Создать экземпляр Clappr, указав дополнительный плагин TeleportClapprHlsPlugin.

Лоадер для плеера Clappr ожидает что объект Clappr будет доступен в глобальной области видимости. Т. е. если у вас SPA которое включает этот плеер, то необходимо присвоить переменной window.Clappr неймспейс плеера до загрузки скриптов Teleport. Например, так:

// Для CommonJS модулей
window.Clappr = require("clappr");

// Для ES6 модулей
import * as Clappr from "clappr";

window.Clappr = Clappr;

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

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

            function initApp() {
                teleport.initialize({
                        apiKey: API_KEY,
                        loader: { // параметры интеграции с плеером
                            type: "clappr-hls" // идентификатор плагина
                        }
                    })
                    .then(function (instance) {
                        tlprt = instance;

                        // Получаем плагин для Clappr из лоадера
                        var TeleportClapprHlsPlugin = instance.getLoader().getPlugin();

                        // инициализируем плеер
                        var player = new Clappr.Player({
                            source: STREAM_URL,
                            autoPlay: true,
                            plugins: [
                                TeleportClapprHlsPlugin
                            ],
                            parentId: "#video"
                        });
                    })
                    .then(function () {
                        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