Интеграция Teleport SDK с Hls.js
Этот раздел содержит инструкции по интеграции Teleport SDK с библиотекой Hls.js для воспроизведения HLS-контента в HTML5-плеерах.
1. Подключение скриптов
Убедитесь, что вы подключили основной скрипт Teleport SDK и лоадер для Hls.js. Вы можете использовать отдельные скрипты или готовый бандл.
Отдельные скрипты:
html
<!-- Основной скрипт Teleport SDK -->
<script src="https://cdn.teleport.media/stable/teleport.js"></script>
<!-- Лоадер для Hls.js -->
<script src="https://cdn.teleport.media/stable/teleport.hlsjs.js"></script>Бандл (включает SDK, лоадер и полифилы):
html
<script src="https://cdn.teleport.media/stable/teleport.hlsjs.bundle.js"></script>2. Инициализация Teleport SDK
После подключения скриптов необходимо инициализировать Teleport SDK, передав ваш API-ключ и экземпляр Hls.js.
js
// 1. Инициализируйте Hls.js
const video = document.getElementById('video'); // Замените 'video' на ID вашего <video> элемента
const hls = new Hls();
// 2. Инициализируйте Teleport SDK
teleport.initialize({
apiKey: "YOUR_API_KEY", // Ваш API-ключ из кабинета Teleport
loader: {
type: "hlsjs", // Идентификатор плагина для Hls.js
params: {
hls: hls // Передайте экземпляр Hls.js
}
}
})
.then(function (instance) {
console.log('Teleport SDK успешно инициализирован для Hls.js!', instance);
// Здесь можно загрузить ваш HLS-манифест
hls.loadSource('YOUR_HLS_MANIFEST_URL'); // URL вашего HLS-манифеста
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function() {
video.play();
});
})
.catch(function (error) {
console.error('Ошибка инициализации Teleport SDK:', error);
});
// Опционально: освобождение ресурсов Teleport при закрытии страницы
window.addEventListener("unload", function () {
if (tlprt) {
tlprt.dispose();
tlprt = null;
}
});Дополнительная настройка
Для более тонкой настройки поведения Teleport SDK (например, очистка URL, определение качества сегментов), ознакомьтесь с разделом Конфигурация.