← Blog/Streaming Formats

What is HLS Streaming? A Complete Guide for Developers

Published 2024-04-10·8 min read·By VideoLab

Learn what HTTP Live Streaming (HLS) is, how M3U8 playlists work, and how to test and debug HLS streams using VideoLab.

What is HLS Streaming?

HTTP Live Streaming (HLS) is an adaptive bitrate streaming protocol developed by Apple. It works by breaking video streams into small segments (typically 2–10 seconds each) and delivering them via standard HTTP. This makes HLS compatible with virtually every CDN and firewall configuration.

How HLS Works

HLS uses a playlist file called an M3U8 manifest that lists all the available video segments and quality levels. Here's what the workflow looks like:

1. Master Playlist (.m3u8) — Lists all quality variants (e.g., 360p, 720p, 1080p)

2. Media Playlist (.m3u8) — Lists the actual video segments for a specific quality

3. Video Segments (.ts or .mp4 fragmented) — The small chunks of video data

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-STREAM-INF:BANDWIDTH=800000,RESOLUTION=640x360
360p.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=2800000,RESOLUTION=1280x720
720p.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=5000000,RESOLUTION=1920x1080
1080p.m3u8

Why HLS is Dominant

Common HLS Issues

IssueLikely CauseHow to Debug
Stream won't loadCORS headers missingCheck Network tab in DevTools
Playback stuttersSegment duration too longCheck `#EXT-X-TARGETDURATION`
Quality doesn't switchABR algorithm not triggeredMonitor bandwidth estimate
Offline segmentsCDN cache issueCheck segment URLs directly

Testing HLS Streams

VideoLab's HLS Player uses hls.js to play M3U8 streams directly in your browser. The debug panel shows:

Useful HLS Test Streams

Here are some free HLS test streams you can use with VideoLab:

Conclusion

HLS is the backbone of modern video streaming. Understanding how M3U8 playlists, segments, and adaptive bitrate work together is essential for any developer building or troubleshooting video applications. Use VideoLab's HLS player and debug panel to test your streams and diagnose issues instantly.

Try VideoLab Free →

Put this knowledge to use. Test your video streams, debug errors, and export diagnostics — all in your browser.

Open VideoLab ▶