Preview:
<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="https://tonton-live-sg1.akamaized.net/live-hls/tonton12_720p/hdntl=exp=1732268813~acl=%2f*~data=hdntl~hmac=fc91eacdcf4461a9a4e38a3a688e17db76768e2a9c8d5a185056616df3ccce77/index.m3u8" type="application/x-mpegURL">
    </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>
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter