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.