DEV Community

Cover image for HLS Video Streaming — Intuitive Explanation
Sh Raj
Sh Raj

Posted on

HLS Video Streaming — Intuitive Explanation

#hls

HLS Video Streaming — Intuitive Explanation

Imagine you have a 2-hour movie.

One simple way:

Download full movie.
Then play.

Problem?

If movie is 2 GB, user has to wait.
Bad internet? Video stops.
Mobile network changes? Quality cannot adjust.

So we need something smarter.

Now imagine instead of sending the full movie, we cut it into small pieces.

Movie becomes:

part1.ts
part2.ts
part3.ts
part4.ts
...
Enter fullscreen mode Exit fullscreen mode

Each part may be 2 seconds, 4 seconds, or 6 seconds.

Now the player says:

Give me part 1.
Play part 1.
Meanwhile download part 2.
Then part 3.
Then part 4.

This is the main idea of HLS — HTTP Live Streaming.

Apple’s HLS sends live or on-demand audio/video using normal HTTP web servers and CDNs, and it adapts playback to network conditions. (Apple Developer)

1. The Core Problem

Imagine you are watching a video.

Watch...
Watch...
Watch...

Suddenly:

Network becomes slow.

If the server is sending one fixed high-quality video, then:

High quality video needs 8 Mbps
Your internet gives only 2 Mbps
Result: buffering...
Enter fullscreen mode Exit fullscreen mode

So HLS asks:

Why send only one quality?

Let us create many versions:

1080p version
720p version
480p version
360p version
Enter fullscreen mode Exit fullscreen mode

Now player can choose.

Fast internet?

Use 1080p
Enter fullscreen mode Exit fullscreen mode

Slow internet?

Use 360p
Enter fullscreen mode Exit fullscreen mode

Internet improves?

Switch back to 720p or 1080p
Enter fullscreen mode Exit fullscreen mode

This is called adaptive bitrate streaming.

2. HLS Is Basically Two Things

HLS has two main file types:

A. Video chunks

These are small video pieces.

Example:

segment_001.ts
segment_002.ts
segment_003.ts
Enter fullscreen mode Exit fullscreen mode

or modern format:

segment_001.m4s
segment_002.m4s
Enter fullscreen mode Exit fullscreen mode

B. Playlist file

This is the most important part.

It is usually called:

.m3u8
Enter fullscreen mode Exit fullscreen mode

Think of .m3u8 as a menu card.

It tells the player:

Here are the video pieces.
Play them in this order.
Enter fullscreen mode Exit fullscreen mode

RFC 8216 describes HLS as a protocol for transferring streams of multimedia data and defines the file formats and client/server behavior. (IETF Datatracker)

3. Restaurant Analogy

Imagine you go to a restaurant.

You do not enter the kitchen.

You only see the menu.

The menu says:

Pizza
Burger
Pasta
Enter fullscreen mode Exit fullscreen mode

You choose.

Similarly, in HLS:

The player does not know all video files directly.

It first asks for the playlist:

video.m3u8
Enter fullscreen mode Exit fullscreen mode

The playlist says:

segment1.ts
segment2.ts
segment3.ts
Enter fullscreen mode Exit fullscreen mode

Then the player downloads these segments one by one.

4. Basic HLS Flow

Suppose user opens:

https://example.com/movie/master.m3u8
Enter fullscreen mode Exit fullscreen mode

Now step by step:

1. Player downloads master.m3u8
2. master.m3u8 lists available qualities
3. Player chooses one quality
4. Player downloads that quality’s playlist
5. Playlist lists video chunks
6. Player downloads chunks one by one
7. Player plays chunks continuously
8. If internet changes, player switches quality
Enter fullscreen mode Exit fullscreen mode

Very simple.

5. Master Playlist vs Media Playlist

There are usually two playlist levels.

1. Master Playlist

This tells:

These qualities are available.
Enter fullscreen mode Exit fullscreen mode

Example:

#EXTM3U

#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
Enter fullscreen mode Exit fullscreen mode

Meaning:

For 360p, go to 360p.m3u8
For 480p, go to 480p.m3u8
For 720p, go to 720p.m3u8
Enter fullscreen mode Exit fullscreen mode

2. Media Playlist

This tells:

These are the actual video chunks.
Enter fullscreen mode Exit fullscreen mode

Example:

#EXTM3U
#EXT-X-TARGETDURATION:6

#EXTINF:6.0,
segment_001.ts

#EXTINF:6.0,
segment_002.ts

#EXTINF:6.0,
segment_003.ts

#EXT-X-ENDLIST
Enter fullscreen mode Exit fullscreen mode

Meaning:

Play segment_001.ts for 6 seconds.
Then segment_002.ts for 6 seconds.
Then segment_003.ts for 6 seconds.
Video finished.
Enter fullscreen mode Exit fullscreen mode

6. Mental Diagram 

User clicks video
      |
      v
master.m3u8
      |
      |--- 360p.m3u8 ---> 360p segments
      |
      |--- 480p.m3u8 ---> 480p segments
      |
      |--- 720p.m3u8 ---> 720p segments
      |
      |--- 1080p.m3u8 -> 1080p segments
Enter fullscreen mode Exit fullscreen mode

Now the player keeps asking:

How fast is internet?
How much buffer do I have?
Which quality is safe?
Enter fullscreen mode Exit fullscreen mode

Then it chooses.

7. Adaptive Bitrate: The Smart Part

Imagine this situation:

You are watching in 1080p.

Internet speed: 10 Mbps
Video need: 5 Mbps
Good.
Enter fullscreen mode Exit fullscreen mode

Then suddenly:

Internet speed: 1.5 Mbps
Video need: 5 Mbps
Problem.
Enter fullscreen mode Exit fullscreen mode

Player thinks:

If I continue 1080p, video will buffer.
Better switch to 360p.

So it switches to lower quality.

After some time:

Internet speed becomes 8 Mbps
Enter fullscreen mode Exit fullscreen mode

Player thinks:

Nice. Let us go back to 720p or 1080p.

This switching is the magic of HLS.

8. Why HLS Uses HTTP

HLS is powerful because it works over normal HTTP.

That means you can host HLS files on:

Normal web server
S3/R2 storage
Cloudflare CDN
AWS CloudFront
Nginx
Any static file server
Enter fullscreen mode Exit fullscreen mode

No special streaming server is required for basic HLS.

That is why HLS became very popular.

The browser/player is basically downloading small files repeatedly.

GET master.m3u8
GET 720p.m3u8
GET segment1.ts
GET segment2.ts
GET segment3.ts
...
Enter fullscreen mode Exit fullscreen mode

Apple also says HLS can be deployed using ordinary web servers and CDNs. (Apple Developer)

9. VOD vs Live HLS

There are two common cases.

Case 1: VOD

VOD means video on demand.

Example:

YouTube uploaded video
Course lecture
Movie
Recorded webinar
Enter fullscreen mode Exit fullscreen mode

Here all segments already exist.

Playlist contains all segments:

segment1.ts
segment2.ts
segment3.ts
...
segment500.ts
#EXT-X-ENDLIST
Enter fullscreen mode Exit fullscreen mode

#EXT-X-ENDLIST means:

Video is complete.
No more segments.
Enter fullscreen mode Exit fullscreen mode

Case 2: Live Streaming

Example:

Cricket match
Live class
Gaming stream
News broadcast
Enter fullscreen mode Exit fullscreen mode

Here future video does not exist yet.

So playlist keeps updating.

At 10:00:00:

segment100.ts
segment101.ts
segment102.ts
Enter fullscreen mode Exit fullscreen mode

At 10:00:06:

segment101.ts
segment102.ts
segment103.ts
Enter fullscreen mode Exit fullscreen mode

At 10:00:12:

segment102.ts
segment103.ts
segment104.ts
Enter fullscreen mode Exit fullscreen mode

This is called a sliding window.

Player repeatedly reloads the playlist and asks:

Any new segment came?

If yes, download and play.

10. Why HLS Has Latency

Now imagine live streaming.

Camera records.

Encoder compresses.

Segmenter waits to make a 6-second segment.

CDN distributes.

Player downloads.

Player buffers.

Then user sees it.

So live HLS may have delay.

Camera now
   ↓
Encoding
   ↓
Segment creation
   ↓
CDN
   ↓
Player buffer
   ↓
Viewer sees
Enter fullscreen mode Exit fullscreen mode

This is why normal HLS is not always “real-time.”

For lower delay, modern systems use Low-Latency HLS, where segments can be divided into smaller partial segments. Apple’s authoring documentation covers live and on-demand HLS delivery requirements for Apple devices. (Apple Developer)

11. Complete HLS Pipeline

Think of a factory.

Raw video enters.

HLS output comes out.

Camera / MP4 file
      |
      v
Encoder / Transcoder
      |
      v
Multiple qualities
      |
      v
Segmenter
      |
      v
.m3u8 playlists + small video chunks
      |
      v
CDN / Web server
      |
      v
Player
Enter fullscreen mode Exit fullscreen mode

Example:

input.mp4
   |
   |-- 1080p chunks
   |-- 720p chunks
   |-- 480p chunks
   |-- 360p chunks
   |
   +-- master.m3u8
Enter fullscreen mode Exit fullscreen mode

12. HLS in One Sentence

HLS means:

Cut video into small chunks, create playlist files that describe those chunks, host everything over HTTP, and let the player choose the best quality depending on internet speed.

That is HLS.

13. Remember Like This

Imagine a train.

Full movie is not sent as one huge train.

Instead:

Coach 1
Coach 2
Coach 3
Coach 4
Enter fullscreen mode Exit fullscreen mode

The player receives coaches one by one.

If the track is clear:

Send luxury coach: 1080p
Enter fullscreen mode Exit fullscreen mode

If the track is crowded:

Send small coach: 360p
Enter fullscreen mode Exit fullscreen mode

Video keeps moving.

No full stop.

That is adaptive streaming.

14. Practical Example

Suppose you upload a video.

Original:

lecture.mp4
Enter fullscreen mode Exit fullscreen mode

Server converts it into:

/master.m3u8

/360p/playlist.m3u8
/360p/seg1.ts
/360p/seg2.ts

/720p/playlist.m3u8
/720p/seg1.ts
/720p/seg2.ts

/1080p/playlist.m3u8
/1080p/seg1.ts
/1080p/seg2.ts
Enter fullscreen mode Exit fullscreen mode

Then your frontend uses a player:

<video controls src="https://example.com/master.m3u8"></video>
Enter fullscreen mode Exit fullscreen mode

On Safari, HLS support is native. On many other browsers, developers commonly use a JavaScript player/library that uses Media Source Extensions to play HLS streams.

15. Final Revision

HLS has 5 important words:

1. Encode
2. Segment
3. Playlist
4. HTTP/CDN
5. Adaptive bitrate
Enter fullscreen mode Exit fullscreen mode

Meaning:

Encode      = create different qualities
Segment     = cut video into small pieces
Playlist    = tell player where pieces are
HTTP/CDN    = deliver pieces like normal files
Adaptive    = switch quality based on internet
Enter fullscreen mode Exit fullscreen mode

So whenever you hear HLS, visualize this:

Big video
  ↓
Small chunks
  ↓
Playlist file
  ↓
Player downloads chunks
  ↓
Quality changes automatically
Enter fullscreen mode Exit fullscreen mode

That’s the full intuitive model.

Top comments (2)

Collapse
 
sh20raj profile image
Sh Raj • • Edited

Sample - test-streams.mux.dev/x36xhzz/x36xh...
Test - livepush.io/hlsplayer/index.html
Demo - hlsjs.video-dev.org/demo/
Excaliddraw - excalidraw.com/#json=9Esa2jDoFsxVS...
Sample Playlist SRT = gist.github.com/matibzurovski/d690...

Collapse
 
sh20raj profile image
Sh Raj •

excalidraw.com/#json=9Esa2jDoFsxVS...