Интеграция Teleport SDK с Clappr (HLS)

Этот раздел содержит инструкции по интеграции Teleport SDK с медиаплеером Clappr для воспроизведения HLS-контента.

1. Подключение скриптов

Убедитесь, что вы подключили основной скрипт Teleport SDK и лоадер для Clappr HLS. Вы можете использовать отдельные скрипты или готовый бандл.

Отдельные скрипты:

<!-- Основной скрипт Teleport SDK -->
<script src="https://cdn.teleport.media/stable/teleport.js"></script>
<!-- Лоадер для Clappr HLS -->
<script src="https://cdn.teleport.media/stable/teleport.clappr-hls.js"></script>

Бандл (включает SDK, лоадер и полифилы):

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

2. Инициализация Teleport SDK

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

// 1. Инициализируйте Clappr
const player = new Clappr.Player({
    source: 'YOUR_HLS_MANIFEST_URL', // URL вашего HLS-манифеста
    parentId: '#player-container', // ID элемента, куда будет встроен плеер
    plugins: [HlsjsPlayback] // Убедитесь, что плагин для HLS подключен (например, hls.js)
});

// 2. Инициализируйте Teleport SDK
teleport.initialize({
    apiKey: "YOUR_API_KEY", // Ваш API-ключ из кабинета Teleport
    loader: {
        type: "clappr-hls", // Идентификатор плагина для Clappr HLS
        params: {
            player: player // Передайте экземпляр Clappr
        }
    }
})
.then(function (instance) {
    console.log('Teleport SDK успешно инициализирован для Clappr HLS!', instance);
    player.play();
})
.catch(function (error) {
    console.error('Ошибка инициализации Teleport SDK:', error);
});

// Опционально: освобождение ресурсов Teleport при закрытии страницы
window.addEventListener("unload", function () {
    if (tlprt) {
        tlprt.dispose();
        tlprt = null;
    }
});

Дополнительная настройка

Для более тонкой настройки поведения Teleport SDK (например, очистка URL, определение качества сегментов), ознакомьтесь с разделом Конфигурация.