Teleport SDK Integration with Hls.js

This section provides instructions for integrating the Teleport SDK with the Hls.js library for HLS content playback in HTML5 players.

1. Script Connection

Ensure that you have connected the main Teleport SDK script and the loader for Hls.js. You can use separate scripts or a ready-made bundle.

Separate Scripts:

<!-- Main Teleport SDK script -->
<script src="https://cdn.teleport.media/stable/teleport.js"></script>
<!-- Loader for Hls.js -->
<script src="https://cdn.teleport.media/stable/teleport.hlsjs.js"></script>

Bundle (includes SDK, loader, and polyfills):

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

2. Teleport SDK Initialization

After connecting the scripts, you need to initialize the Teleport SDK, passing your API key and the Hls.js instance.

// 1. Initialize Hls.js
const video = document.getElementById('video'); // Replace 'video' with the ID of your <video> element
const hls = new Hls();

// 2. Initialize Teleport SDK
teleport.initialize({
    apiKey: "YOUR_API_KEY", // Your API key from the Teleport cabinet
    loader: {
        type: "hlsjs", // Plugin identifier for Hls.js
        params: {
            hls: hls // Pass the Hls.js instance
        }
    }
})
.then(function (instance) {
    console.log('Teleport SDK successfully initialized for Hls.js!', instance);
    // Here you can load your HLS manifest
    hls.loadSource('YOUR_HLS_MANIFEST_URL'); // URL of your HLS manifest
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED, function() {
        video.play();
    });
})
.catch(function (error) {
    console.error('Teleport SDK initialization error:', error);
});

// Optional: release Teleport resources when closing the page
window.addEventListener("unload", function () {
    if (tlprt) {
        tlprt.dispose();
        tlprt = null;
    }
});

Additional Configuration

For finer tuning of Teleport SDK behavior (e.g., URL cleaning, segment quality detection), refer to the Customization section.