<tutorialjinni.com/>

Free HLS Player HTML5

Posted Under: HTML5, JavaScript, Programming, Tutorials, Video on Sep 8, 2022
Free HLS Player HTML5
HTTP Live Streaming or HLS Player is a media streaming protocol that deliver content to the users according to their bandwidth availability. The basic building blocks of a HLS streams are M3U8 playlists. You can create multiple files for distribution to the player, which can adaptively change streams to optimize the playback experience. As an HTTP-based technology, no streaming server is required, so all the switching logic resides on the player. HTML5 Video Tag does not support it out of the box, but with the help of a simple javascript library you can turn your humble HTML5 Video Tag in to a HLS Player. For that you need HLS.js library and simple invocation code. hls.js uses Media Source Extensions, so it must be available on the browser, good news it that almost all modern browsers supports it. Below is a working code for quick copy paste. 



<html>
    <head>
        <meta charset="UTF-8">
        <title>Simple Free HLS Player Example</title>  
        <!-- Include hls.js from a CDN -->
        <script src="https://cdn.tutorialjinni.com/hls.js/1.2.1/hls.min.js"></script>
        
    </head>
    <body>
        <!-- HTML5 Video Tag -->
        <video id="video" 
               width='480px' height='360px' controls autoplay
               src="http://docs.evostream.com/sample_content/assets/hls-bunny-166/playlist.m3u8">
        </video>
        <!-- Invocation Script -->
        <script>
            if (Hls.isSupported()) {
              var video = document.getElementById('video');
              var hls = new Hls();
              hls.loadSource(video.src);
              hls.attachMedia(video);
            }else{
                alert("Cannot stream HLS, use another video source");
            }
        </script>
    </body>
</html>


imgae