Teleport SDK Integration with Flowplayer

This section provides instructions for integrating the Teleport SDK with the Flowplayer media player.

1. Script Connection

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

Bundle (includes SDK, loader, and polyfills):

<script src="https://cdn.teleport.media/stable/teleport.flowplayer.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 Flowplayer
// It is assumed that Flowplayer is already initialized on the page
// For example: flowplayer('#player-container', { src: 'YOUR_STREAM_URL' });
const player = flowplayer('#player-container'); // Or another way to get the Flowplayer instance

// 2. Initialize Teleport SDK
teleport.initialize({
    apiKey: "YOUR_API_KEY", // Your API key from the Teleport cabinet
    loader: {
        type: "flowplayer", // Plugin identifier for Flowplayer
        params: {
            player: player // Pass the Flowplayer instance
        }
    }
})
.then(function (instance) {
    console.log('Teleport SDK successfully initialized for Flowplayer!', instance);
    // Here you can start video playback via Flowplayer
    // player.play();
})
.catch(function (error) {
    console.error('Ошибка инициализации Teleport SDK:', 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.