Documents
Integration with hls.js


Include hls.js into your website as usual. Then add Teltoo’s HTML5 SDK (teltoo.js) and the video adapter that we provide for integration with hls.js (teltoo-hlsjs.min.js). Therefore, you are incorporating only two scripts: the Teltoo’s SDK and the Teltoo’s hls.js adapter. Include your API Key for the Teltoo SDK, as shown in the following example:

<body>
<!-- Include Hls.js Player -->
<script src="//cdnjs.cloudflare.com/ajax/libs/hls.js/0.10.1/hls.min.js"></script>
      
<!-- Include Teltoo SDK and the video adapter for Hls.js -->
<script src="//scripts.aws.teltoo.com/teltoo.js" data-teltoo-api-key="YOUR_API_KEY"></script>
<script src="//scripts.aws.teltoo.com/teltoo-hlsjs/teltoo-hlsjs.min.js"></script>
</body>

Remember to replace YOUR_API_KEY with your API Key.  You can access your account and copy it from the “Control Panel” section.

Alternatively, you can install hls.js using npm (npm install --save hls.js) or any other method you prefer, but you must use Teltoo’s script links for the rest.

Note: You can not use a self-hosted version of Teltoo’s script on your website.

The Teltoo video adapter will detect the hls.js instance and activate the P2P technology for the streams whose playlist/manifest files (.mpd/.m3u8) you configure in the Control Panel.

Find below a fully working example:

<html>
    <head>...</head>
    
    <body>
        <script src="//cdnjs.cloudflare.com/ajax/libs/hls.js/0.10.1/hls.min.js"></script>
        <script data-teltoo-api-key="YOUR_API_KEY" src="//scripts.aws.teltoo.com/teltoo.js"></script>
        <script src="//scripts.aws.teltoo.com/teltoo-hlsjs/teltoo-hlsjs.min.js"></script>

        <video id="video" controls> 
        </video>
        
        <script>
            var url = 'YOUR_VIDEO_SOURCE';
            var video = document.getElementById('video');

            if(Hls.isSupported()) {
                var hls = new Hls();
                hls.loadSource(url);
                hls.attachMedia(video);
                hls.on(Hls.Events.MANIFEST_PARSED, function() {
                       video.play();
                    });
            }
        </script>
    </body>
</html>



Want to know more?

Talk to an expert