Understanding HLS: HTTP Live Streaming Technical Guide

HTTP Live Streaming (HLS) is the dominant protocol for video delivery worldwide, developed by Apple in 2009. This guide covers HLS architecture, playlist structure, and optimization techniques for production deployments.

How HLS Works

HLS breaks video into small HTTP-based file downloads, making it compatible with standard web infrastructure and CDNs.

Core Components

1. Encoder: Converts source video to HLS format (H.264/H.265 video, AAC audio)

2. Origin Server: Hosts m3u8 playlists and .ts segment files

3. CDN: Distributes content globally via edge servers

4. Player: Downloads playlists, selects quality, fetches and plays segments

Streaming Workflow

1. Video is encoded into multiple quality levels (renditions)

2. Each quality produces .ts segments (typically 2-10 seconds each)

3. m3u8 playlists index all segments with metadata

4. Player downloads master playlist, selects appropriate quality

5. Player fetches media playlist, downloads segments sequentially

m3u8 Playlist Structure

HLS uses two types of playlists: Master Playlist and Media Playlist.

Master Playlist Example

The master playlist lists all available quality variants:

EXTM3U

EXT-X-VERSION:3

EXT-X-STREAM-INF:BANDWIDTH=800000,RESOLUTION=640x360

360p.m3u8

EXT-X-STREAM-INF:BANDWIDTH=1400000,RESOLUTION=842x480

480p.m3u8

EXT-X-STREAM-INF:BANDWIDTH=2800000,RESOLUTION=1280x720

720p.m3u8

EXT-X-STREAM-INF:BANDWIDTH=5000000,RESOLUTION=1920x1080

1080p.m3u8

Media Playlist Example

Each quality variant has its own media playlist:

EXTM3U

EXT-X-VERSION:3

EXT-X-TARGETDURATION:10

EXT-X-MEDIA-SEQUENCE:0

EXTINF:10.0,

segment0.ts

EXTINF:10.0,

segment1.ts

EXTINF:10.0,

segment2.ts

Key Playlist Tags

TagPurpose EXTM3UDeclares HLS playlist format EXT-X-VERSIONProtocol version number EXT-X-TARGETDURATIONMaximum segment duration EXT-X-STREAM-INFVariant stream information EXTINFSegment duration and title EXT-X-ENDLISTMarks end of VOD playlist

Adaptive Bitrate Streaming (ABR)

ABR allows players to switch quality levels dynamically based on network conditions.

How ABR Works

1. Player monitors download speed and buffer level

2. If bandwidth drops, player switches to lower quality

3. If bandwidth improves, player upgrades quality

4. Switches happen at segment boundaries (no interruption)

ABR Algorithm Factors

Current download throughput
Buffer occupancy level
Recent throughput history
Device capabilities
Network type (WiFi vs cellular)

Low-Latency HLS (LL-HLS)

Introduced by Apple in 2019, LL-HLS reduces latency from 10-30 seconds to 2-5 seconds.

Key LL-HLS Features

Partial Segments: Stream content before full segment is complete using HTTP chunked transfer encoding.

Blocking Playlist Reload: Server holds playlist request until new content is available, eliminating polling overhead.

Preload Hints: Playlist includes hints about upcoming segment URLs, enabling predictive fetching.

Rendition Reports: Server reports status of other renditions to enable faster quality switches.

Latency Comparison

ModeTypical LatencySegment Duration Standard HLS15-30 seconds6-10 seconds Tuned HLS8-12 seconds4-6 seconds LL-HLS2-5 seconds2-4 seconds

Implementation Best Practices

Encoding Recommendations

Use constant bitrate (CBR) for consistent segment sizes
Place keyframes at segment boundaries (GOP = segment duration)
Include multiple audio tracks for accessibility
Encode at standard resolutions (360p, 480p, 720p, 1080p, 4K)

Segment Duration Guidelines

Use CaseRecommended Duration VOD content6-10 seconds Live (standard)6 seconds Live (low latency)2-4 seconds Live (LL-HLS)2 seconds with partials

CDN Configuration

Set appropriate cache TTLs (segment duration for live)
Enable HTTP/2 or HTTP/3 for multiplexing
Configure CORS headers for cross-origin playback
Use persistent connections for reduced latency

Player Implementation

Using hls.js

hls.js is the standard JavaScript library for HLS playback in browsers that do not natively support HLS (all except Safari).

Basic setup involves creating an Hls instance, attaching it to a video element, loading the source URL, and handling the MANIFEST_PARSED event to start playback.

For low-latency mode, configure liveSyncDurationCount, liveMaxLatencyDurationCount, and maxLiveSyncPlaybackRate parameters.

Native HLS (Safari)

Safari supports HLS natively. Simply set the video source to the m3u8 URL.

Troubleshooting Common Issues

Buffering Problems

Check segment duration consistency
Verify CDN edge server proximity
Monitor available bandwidth vs bitrate ladder
Ensure keyframe alignment

Quality Switching Issues

Verify master playlist bandwidth values
Check player ABR algorithm settings
Monitor buffer levels during switches

Conclusion

HLS remains the industry standard for video delivery due to universal browser support, CDN compatibility, and proven scalability. For lower latency requirements, implement LL-HLS with proper server and player configuration.

Platforms like dcast.tv handle HLS encoding and delivery automatically, including LL-HLS support, letting creators focus on content rather than infrastructure complexity.