Online Hls Player Today

Let's use a public test stream (provided by Akamai):

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
</head>
<body>
  <video id="video" controls width="800"></video>
  <script>
    const video = document.getElementById('video');
    const hls = new Hls();
    hls.loadSource('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8');
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED, () => video.play());
  </script>
</body>
</html>

Paste that into an .html file, open in Chrome, and you have a working online HLS player. online hls player

Focused specifically on the playlist extension, this player offers a few more advanced options. Let's use a public test stream (provided by Akamai): &lt;

When a user hovers over the seek bar, they should see a frame preview. This requires the player to parse a separate .vtt sprite sheet. Paste that into an

  • hls.js
  • Shaka Player
  • Clappr
  • JW Player (commercial)
  • THEOplayer (commercial)
  • Bitmovin Player (commercial)
  • Clappr, Plyr (UI-focused)

    • | Scenario | Recommendation | |----------|----------------| | Quick debugging of an m3u8 URL | Use hls.js demo page or HLS test player (e.g., castr.io) | | Embedding in a public website | Video.js + hls.js plugin | | Enterprise live streaming (low latency) | THEOplayer or Bitmovin (LL-HLS + CMAF) | | Offline / mobile app | Native ExoPlayer (Android) / AVPlayer (iOS) |

    The industry standard. It handles HLS natively and offers robust analytics.