M3U8 Streaming Architecture: From Server to Browser

An M3U8 streaming system involves multiple stages, each with its own role:

1. Video Source — Camera, file, or live feed
2. Encoder — Compresses and formats the video (x264, NVENC, etc.)
3. Packager — Segments the encoded video into HLS format (TS/fMP4 + M3U8)
4. Origin Server — Stores and serves the packaged files
5. CDN — Caches and distributes content globally
6. Client Player — hls.js or native player fetches and renders the stream

The encoding stage creates multiple quality renditions of the source. Modern encoders produce:

• 360p @ 500-800 kbps (low quality, mobile)
• 480p @ 800-1500 kbps (standard definition)
• 720p @ 1500-4000 kbps (HD)
• 1080p @ 3000-8000 kbps (Full HD)
• 4K @ 15000-40000 kbps (Ultra HD, optional)

The packager then segments each rendition into 2-10 second chunks and generates the M3U8 playlists.

A Content Delivery Network (CDN) is essential for streaming at scale. CDNs cache video segments at edge servers worldwide, reducing latency and load on the origin server. Key CDN features for HLS:

• HTTP/2 support for multiplexed segment requests
• Cache optimization for small files (segments)
• Origin shield to protect the source server
• DDoS protection for live events

On the client side, the player (like hls.js) handles:

• Fetching and parsing the master playlist
• ABR algorithm selection based on bandwidth estimates
• Segment downloading with concurrent connections
• Buffer management (fill rate, max duration)
• Error recovery (retry segments, fallback to lower quality)
• Live stream playlist refreshing