Teleport SDK Integration with Clappr (HLS)

This section provides instructions for integrating the Teleport SDK with the Clappr media player for HLS content playback.

1. Script Connection

Ensure that you have connected the main Teleport SDK script and the loader for Clappr HLS. 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 Clappr HLS -->
<script src="https://cdn.teleport.media/stable/teleport.clappr-hls.js"></script>

Bundle (includes SDK, loader, and polyfills):

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

2. Teleport SDK Initialization

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

// 1. Initialize Clappr
const player = new Clappr.Player({
    source: 'YOUR_HLS_MANIFEST_URL', // URL of your HLS manifest
    parentId: '#player-container', // ID of the element where the player will be embedded
    plugins: [HlsjsPlayback] // Ensure the HLS plugin is connected (e.g., hls.js)
});

// 2. Initialize Teleport SDK
teleport.initialize({
    apiKey: "YOUR_API_KEY", // Your API key from the Teleport cabinet
    loader: {
        type: "clappr-hls", // Plugin identifier for Clappr HLS
        params: {
            player: player // Pass the Clappr instance
        }
    }
})
.then(function (instance) {
    console.log('Teleport SDK successfully initialized for Clappr HLS!', instance);
    player.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.