Simulate-Live from HLS VOD

Feb 7, 2025

Simulate-Live from HLS VOD

Description

This article explores how to transform an HLS Video on Demand (VOD) stream into a simulated live experience. By modifying the HLS manifest dynamically, we can ensure that users joining the stream see content at a real-time-simulated position rather than from the beginning. We discuss the problem, the idea behind the solution, debugging to find the right approach, step-by-step implementation, and the final JavaScript code that makes it possible.

Problem

How to simulate a live broadcast experience from a VOD source

HLS (HTTP Live Streaming) is widely used for delivering video content over the internet. However, many videos are available as Video on Demand (VOD), meaning users can start, pause, and seek through the content at any time.

While this flexibility is useful, there are scenarios where we need to simulate a live broadcast experience from a VOD source. This means that when a user joins, they should see the video at the point where a real-time stream would have been if it were truly live.

Find the Solution

What HLS is?

HLS (HTTP Live Streaming) is a streaming technology developed by Apple, that allows video files to be broken into smaller chunks and delivered over HTTP. This makes streaming more efficient and adaptable to different network conditions. The core of HLS is the M3U8 playlist file and its segments file.

Building blocks of HLS

HLS (HTTP Live Streaming) operates using two main types of M3U8 playlists: main playlist and media playlist

Main playlist

A main playlist is an M3U8 file that tells the HLS player which video quality options are available. It contains multiple variants of the same video at different bitrates or resolutions, allowing the player to adapt to network conditions dynamically.

1
#EXTM3U
2
#EXT-X-STREAM-INF:BANDWIDTH=1280000,AVERAGE-BANDWIDTH=1000000
3
http://example.com/low.m3u8
4
#EXT-X-STREAM-INF:BANDWIDTH=2560000,AVERAGE-BANDWIDTH=2000000
5
http://example.com/mid.m3u8
6
#EXT-X-STREAM-INF:BANDWIDTH=7680000,AVERAGE-BANDWIDTH=6000000
7
http://example.com/hi.m3u8
8
#EXT-X-STREAM-INF:BANDWIDTH=65000,CODECS="mp4a.40.5"
9
http://example.com/audio-only.m3u8

Example of main playlist contains:

Low quality (e.g., 480p, lower bitrate)

1
#EXT-X-STREAM-INF:BANDWIDTH=1280000,AVERAGE-BANDWIDTH=1000000
2
http://example.com/low.m3u8

Medium quality (e.g., 720p, moderate bitrate)

1
#EXT-X-STREAM-INF:BANDWIDTH=2560000,AVERAGE-BANDWIDTH=2000000
2
http://example.com/mid.m3u8

High quality (e.g., 1080p, high bitrate)

1
#EXT-X-STREAM-INF:BANDWIDTH=7680000,AVERAGE-BANDWIDTH=6000000
2
http://example.com/hi.m3u8

Audio-only option

1
#EXT-X-STREAM-INF:BANDWIDTH=65000,CODECS="mp4a.40.5"
2
http://example.com/audio-only.m3u8

Media (Level) playlist

A Media Playlist (or Level Playlist) contains the actual video segments (chunks of video) that are played sequentially.

Types of Media Playlists:

VOD (Video on Demand): Fixed playlist with an #EXT-X-ENDLIST tag.

1
#EXTM3U
2
#EXT-X-PLAYLIST-TYPE:VOD
3
#EXT-X-TARGETDURATION:10
4
#EXT-X-VERSION:4
5
#EXT-X-MEDIA-SEQUENCE:0
6
#EXTINF:10.0,
7
http://example.com/movie1/fileSequenceA.ts
8
#EXTINF:10.0,
9
http://example.com/movie1/fileSequenceB.ts
10
#EXTINF:10.0,
11
http://example.com/movie1/fileSequenceC.ts
12
#EXTINF:9.0,
13
http://example.com/movie1/fileSequenceD.ts
14
#EXT-X-ENDLIST

Live Streaming: Updates dynamically with #EXT-X-MEDIA-SEQUENCE

1
#EXTM3U
2
#EXT-X-TARGETDURATION:10
3
#EXT-X-VERSION:4
4
#EXT-X-MEDIA-SEQUENCE:1
5
#EXTINF:10.0,
6
fileSequence1.ts
7
#EXTINF:10.0,
8
fileSequence2.ts
9
#EXTINF:10.0,
10
fileSequence3.ts
11
#EXTINF:10.0,
12
fileSequence4.ts
13
#EXTINF:10.0,
14
fileSequence5.ts

How Hls work

HLS works by breaking video content into small chunks (segments) and providing an M3U8 playlist file that lists these segments. The player continuously fetches and plays these segments, enabling adaptive bitrate streaming. An M3U8 playlist file may include:

#EXTM3U – Indicates that this is an M3U8 playlist.
#EXT-X-TARGETDURATION – The maximum segment duration.
#EXTINF – Specifies the duration of each segment.
#EXT-X-ENDLIST – Marks the end of a VOD playlist.

Example of m3u8 for VOD

1
#EXTM3U
2
#EXT-X-VERSION:3
3
#EXT-X-PLAYLIST-TYPE:VOD
4
#EXT-X-TARGETDURATION:10
5
#EXTINF:10,
6
segment1.ts
7
#EXTINF:10,
8
segment2.ts
9
#EXTINF:10,
10
segment3.ts
11
#EXT-X-ENDLIST

How HLS Live Stream Works

Unlike VOD, live HLS streams update continuously as new segments are generated. Key differences include:

No #EXT-X-ENDLIST, allowing the playlist to grow dynamically.

The presence of #EXT-X-MEDIA-SEQUENCE, indicating the sequence number of the first segment in the playlist.

The playlist only contains a moving window of the latest segments, simulating real-time playback.

Example of m3u8 for live stream at

timestamp t1

1
#EXTM3U
2
#EXT-X-VERSION:3
3
#EXT-X-TARGETDURATION:10
4
#EXT-X-MEDIA-SEQUENCE:1000
5
#EXTINF:10,
6
segment1000.ts
7
#EXTINF:10,
8
segment1001.ts
9
#EXTINF:10,
10
segment1002.ts

timestamp t2

1
#EXTM3U
2
#EXT-X-VERSION:3
3
#EXT-X-TARGETDURATION:10
4
#EXT-X-MEDIA-SEQUENCE:1000
5
#EXT-X-MEDIA-SEQUENCE:1001
6
#EXTINF:10,
7
segment1000.ts
8
#EXTINF:10,
9
segment1001.ts
10
#EXTINF:10,
11
segment1002.ts
12
#EXTINF:10,
13
segment1003.ts

Idea

To achieve a simulated live experience from an HLS VOD stream, we can manipulate the playlist (.m3u8) dynamically. The goal is to:

Remove indicators that define the stream as VOD.
Trim the playlist so that playback starts at a calculated point, mimicking a real-time progression.

There many player that could be used to play HLS stream, but in this article, we will use HLS.js, a JavaScript library that implements an HLS client. Checkout its reference player. Also, the version of HLS.js that we will use is 1.5.20 at the time write this article.

Debugging

We first need to know how HLS.js works and how it loads the playlist. Look at the image below we could see that HLS.js use playlist-loader to handle it.

Further more debug, we could see that HLS.js use loader to load the segment and we can config the loader via config.pLoader or config.loader in the HLS.js config. reference to source

1
  /**
2
   * Returns defaults or configured loader-type overloads (pLoader and loader config params)
3
   */
4
  private createInternalLoader(
5
    context: PlaylistLoaderContext,
6
  ): Loader<LoaderContext> {
7
    const config = this.hls.config;
8
    const PLoader = config.pLoader;
9
    const Loader = config.loader;
10
    const InternalLoader = PLoader || Loader;
11
    const loader = new InternalLoader(config) as Loader<PlaylistLoaderContext>;
12

13
    this.loaders[context.type] = loader;
14
    return loader;
15
  }
16

17
  private getInternalLoader(
18
    context: PlaylistLoaderContext,
19
  ): Loader<LoaderContext> | undefined {
20
    return this.loaders[context.type];
21
  }
22

23
  private resetInternalLoader(contextType): void {
24
    if (this.loaders[contextType]) {
25
      delete this.loaders[contextType];
26
    }
27
  }

At this port, we gonna use config.pLoader to config the loader to load the playlist and modify the playlist before it’s loaded. Checkout config.pLoader document, we could see that the document already prepare this for us. And all we have to do it copy it and modify the process function to fit our need.

1
// special playlist post processing function
2
function process(playlist) {
3
  if (playlist.includes('#EXT-X-STREAM-INF')) {
4
    // we only process media playlist
5
    return playlist
6
  }
7

8
    // Remove VOD tag indicator
9
    return playlist
10
      .replace('#EXT-X-PLAYLIST-TYPE:VOD\n', '')
11
      .replace('#EXT-X-ENDLIST\n', '');
12
}
13

14
class pLoader extends Hls.DefaultConfig.loader {
15
  constructor(config) {
16
    super(config);
17
    var load = this.load.bind(this);
18
    this.load = function (context, config, callbacks) {
19
      if (context.type == 'manifest') {
20
        var onSuccess = callbacks.onSuccess;
21
        callbacks.onSuccess = function (response, stats, context) {
22
          response.data = process(response.data);
23
          onSuccess(response, stats, context);
24
        };
25
      }
26
      load(context, config, callbacks);
27
    };
28
  }
29
}
30

31
var hls = new Hls({
32
  pLoader: pLoader, // to create make sure simulate live work
33
  liveDurationInfinity: true, // to remove the duration in the video tag
34
  startPosition: 0, // start playing position
35
});

Demo

Available demo at here

Conclusion

By intercepting and modifying the HLS manifest, we can create a simulated live experience for VOD content. This approach ensures users experience the video as if it were a live stream, enhancing engagement for specific use cases like scheduled replays or simulated broadcasts. Using a custom HLS.js loader, we can dynamically adjust playback behavior while keeping the infrastructure simple and scalable.