HTTP Live Streaming Tutorial: From Encode to Playback
What You Will Build
This tutorial walks a simple path: take a source video (or live input), create HLS segments + playlists, host them, then play the M3U8 URL. Concepts first: what is HLS.
Step 1: Encode Multiple Qualities
Create a small ladder (e.g. 360p/720p/1080p) so ABR can work. Keep codecs browser-friendly (H.264 + AAC) unless you have a reason not to.
Step 2: Package into HLS
Use a packager/FFmpeg to produce .m3u8 playlists and segments. Example VOD packaging:
ffmpeg -i input.mp4 -c:v libx264 -c:a aac -f hls -hls_time 6 -hls_playlist_type vod index.m3u8
Creating playlists by hand: create M3U8 playlist.
Step 3: Publish over HTTP
Upload playlists and segments to a web server or CDN. Set correct Content-Type and CORS if browsers load cross-origin. CORS help: fix M3U8 CORS.
Step 4: Play and Verify
Open the master or media playlist URL in our player. Check first frame time, ABR switches, and errors. Save offline with the downloader or convert with the converter if needed.
Live Extension
For live, omit VOD end tags, keep writing segments, and refresh the playlist. Expect higher latency unless you adopt LL-HLS practices. See live vs VOD.
Frequently Asked Questions
Do I need a special streaming server?
Not for basic VOD — any static HTTP host can serve HLS files.
What segment length should I use?
Often 4–10 seconds depending on latency goals.
Can I test without a CDN?
Yes on localhost or any web server.
How do I play the result?
Paste the .m3u8 URL into an HLS player.