Skip to content

Teleport SDK Integration with Video.js HLS ​

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

1. Script Connection ​

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

Separate Scripts: ​

html
<!-- Main Teleport SDK script -->
<script src="https://cdn.teleport.media/stable/teleport.js"></script>
<!-- Loader for Video.js HLS -->
<script src="https://cdn.teleport.media/stable/teleport.videojs-hls.js"></script>

Bundle (includes SDK, loader, and polyfills): ​

html
<script src="https://cdn.teleport.media/stable/teleport.videojs-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.

js
// 1. Get the Video.js player instance
const player = videojs('my-video-player'); // Replace 'my-video-player' with the ID of your <video> element

// 2. Initialize Teleport SDK
teleport.initialize({
    apiKey: "YOUR_API_KEY", // Your API key from the Teleport cabinet
    loader: {
        type: "videojs-hls", // Plugin identifier for Video.js HLS
        params: {
            player: player // Pass the Video.js player instance
        }
    }
})
.then(function (instance) {
    console.log('Teleport SDK successfully initialized for Video.js HLS!', instance);
    // Here you can load your HLS manifest
    player.src({
        src: 'YOUR_HLS_MANIFEST_URL', // URL of your HLS manifest
        type: 'application/x-mpegURL'
    });
    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.