1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

┌─────────────────────────────────────────────────────────────────────────────────┐
│                     ADAPTIVE BITRATE STREAMING                                   │
└─────────────────────────────────────────────────────────────────────────────────┘
 
                    SERVER STORAGE
                    ═══════════════
                    
     video_id_2160p_20mbps/           video_id_1080p_5mbps/
     ├── segment_001.m4s              ├── segment_001.m4s
     ├── segment_002.m4s              ├── segment_002.m4s
     ├── segment_003.m4s              ├── segment_003.m4s
     └── ...                          └── ...
     
     video_id_720p_2mbps/             video_id_360p_500kbps/
     ├── segment_001.m4s              ├── segment_001.m4s
     ├── segment_002.m4s              ├── segment_002.m4s
     ├── segment_003.m4s              ├── segment_003.m4s
     └── ...                          └── ...
     
                          │
                          │ Manifest file lists all variants
                          ▼
               ┌─────────────────────┐
               │  master.m3u8 or     │
               │  manifest.mpd       │
               └─────────────────────┘
                          │
                          │ Player downloads manifest
                          ▼
               ┌─────────────────────────────────────────────────────────────────┐
               │                      VIDEO PLAYER                                │
               │                                                                  │
               │   ┌─────────────┐    ┌─────────────┐    ┌─────────────┐        │
               │   │ Network     │───▶│ ABR         │───▶│ Buffer      │        │
               │   │ Monitor     │    │ Controller  │    │ Manager     │        │
               │   └─────────────┘    └─────────────┘    └─────────────┘        │
               │                            │                   │                │
               │                            │ Select quality    │ Request        │
               │                            ▼                   ▼                │
               │   Time 0s   [  HD  |  HD  |  SD  |  HD  |  HD  ] ─▶ Playback   │
               │             Seg 1   Seg 2  Seg 3  Seg 4  Seg 5                 │
               │                       ↑                                         │
               │               Network congestion                                │
               │               detected, switched to SD                          │
               └─────────────────────────────────────────────────────────────────┘

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

#EXTM3U
#EXT-X-VERSION:7
 
# Audio tracks (for multi-language support)
#EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="aac",NAME="English",DEFAULT=YES,URI="audio/en.m3u8"
#EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="aac",NAME="Spanish",URI="audio/es.m3u8"
 
# Subtitle tracks
#EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subs",NAME="English",URI="subs/en.m3u8"
 
# Video variants (resolution, bandwidth, codecs)
#EXT-X-STREAM-INF:BANDWIDTH=150000,RESOLUTION=426x240,CODECS="avc1.42e00a,mp4a.40.2",AUDIO="aac"
240p/playlist.m3u8
 
#EXT-X-STREAM-INF:BANDWIDTH=400000,RESOLUTION=640x360,CODECS="avc1.4d401e,mp4a.40.2",AUDIO="aac"
360p/playlist.m3u8
 
#EXT-X-STREAM-INF:BANDWIDTH=1000000,RESOLUTION=854x480,CODECS="avc1.4d401f,mp4a.40.2",AUDIO="aac"
480p/playlist.m3u8
 
#EXT-X-STREAM-INF:BANDWIDTH=2500000,RESOLUTION=1280x720,CODECS="avc1.4d401f,mp4a.40.2",AUDIO="aac"
720p/playlist.m3u8
 
#EXT-X-STREAM-INF:BANDWIDTH=5000000,RESOLUTION=1920x1080,CODECS="avc1.640028,mp4a.40.2",AUDIO="aac"
1080p/playlist.m3u8
 
#EXT-X-STREAM-INF:BANDWIDTH=15000000,RESOLUTION=2560x1440,CODECS="avc1.640032,mp4a.40.2",AUDIO="aac"
1440p/playlist.m3u8
 
#EXT-X-STREAM-INF:BANDWIDTH=25000000,RESOLUTION=3840x2160,CODECS="avc1.640033,mp4a.40.2",AUDIO="aac"
2160p/playlist.m3u8

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

#EXTM3U
#EXT-X-VERSION:7
#EXT-X-TARGETDURATION:4
#EXT-X-PLAYLIST-TYPE:VOD
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-MAP:URI="init.mp4"
 
# Each EXTINF specifies segment duration
#EXTINF:4.000,
segment_000.m4s
#EXTINF:4.000,
segment_001.m4s
#EXTINF:4.000,
segment_002.m4s
#EXTINF:4.000,
segment_003.m4s
#EXTINF:3.800,
segment_004.m4s
 
# ... more segments
 
#EXTINF:2.500,
segment_299.m4s
#EXT-X-ENDLIST

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

<?xml version="1.0" encoding="UTF-8"?>
<MPD xmlns="urn:mpeg:dash:schema:mpd:2011"
     type="static"
     mediaPresentationDuration="PT10M30.5S"
     minBufferTime="PT2S"
     profiles="urn:mpeg:dash:profile:isoff-on-demand:2011">
  
  <Period id="1" duration="PT10M30.5S">
    
    <!-- Video Adaptation Set (all video variants) -->
    <AdaptationSet
        mimeType="video/mp4"
        codecs="avc1.640028"
        segmentAlignment="true"
        startWithSAP="1">
      
      <!-- 240p representation -->
      <Representation
          id="video-240p"
          bandwidth="150000"
          width="426"
          height="240"
          frameRate="30">
        <SegmentTemplate
            media="video/240p/segment_$Number$.m4s"
            initialization="video/240p/init.mp4"
            duration="4000"
            startNumber="0"
            timescale="1000"/>
      </Representation>
      
      <!-- 720p representation -->
      <Representation
          id="video-720p"
          bandwidth="2500000"
          width="1280"
          height="720"
          frameRate="30">
        <SegmentTemplate
            media="video/720p/segment_$Number$.m4s"
            initialization="video/720p/init.mp4"
            duration="4000"
            startNumber="0"
            timescale="1000"/>
      </Representation>
      
      <!-- 1080p representation -->
      <Representation
          id="video-1080p"
          bandwidth="5000000"
          width="1920"
          height="1080"
          frameRate="30">
        <SegmentTemplate
            media="video/1080p/segment_$Number$.m4s"
            initialization="video/1080p/init.mp4"
            duration="4000"
            startNumber="0"
            timescale="1000"/>
      </Representation>
      
    </AdaptationSet>
    
    <!-- Audio Adaptation Set -->
    <AdaptationSet
        mimeType="audio/mp4"
        codecs="mp4a.40.2"
        lang="en">
      <Representation
          id="audio-128k"
          bandwidth="128000">
        <SegmentTemplate
            media="audio/en/segment_$Number$.m4s"
            initialization="audio/en/init.mp4"
            duration="4000"
            startNumber="0"
            timescale="1000"/>
      </Representation>
    </AdaptationSet>
    
  </Period>
</MPD>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179

// =============================================================
// APPROACH 1: THROUGHPUT-BASED ABR
// =============================================================
// Simple and widely used. Measure download speed, select bitrate
// that fits within available bandwidth with safety margin.
 
class ThroughputBasedABR implements ABRController {
  private throughputHistory: number[] = [];
  private readonly safetyFactor = 0.85; // Use 85% of measured bandwidth
  
  selectQuality(variants: Variant[], state: PlayerState): Variant {
    // Calculate estimated throughput
    const estimatedThroughput = this.getEstimatedThroughput();
    
    // Find highest bitrate that fits with safety margin
    const safeThroughput = estimatedThroughput * this.safetyFactor;
    
    // Select highest quality that fits
    let selected = variants[0]; // Lowest quality fallback
    for (const variant of variants) {
      if (variant.bandwidth <= safeThroughput) {
        selected = variant;
      }
    }
    
    return selected;
  }
  
  private getEstimatedThroughput(): number {
    if (this.throughputHistory.length === 0) return 0;
    
    // Use harmonic mean of recent samples
    // (more stable than arithmetic mean)
    const recentSamples = this.throughputHistory.slice(-5);
    const harmonicMean = recentSamples.length / 
      recentSamples.reduce((sum, t) => sum + 1/t, 0);
    
    return harmonicMean;
  }
  
  onSegmentDownloaded(bytesDownloaded: number, durationMs: number): void {
    const throughput = (bytesDownloaded * 8) / (durationMs / 1000); // bps
    this.throughputHistory.push(throughput);
    
    // Keep only recent samples
    if (this.throughputHistory.length > 20) {
      this.throughputHistory.shift();
    }
  }
}
 
// =============================================================
// APPROACH 2: BUFFER-BASED ABR (BBA)
// =============================================================
// Uses buffer level as primary signal. More buffer = higher quality.
// Resistant to bandwidth estimation errors.
 
class BufferBasedABR implements ABRController {
  private readonly bufferReservoir = 10; // seconds - stay above this
  private readonly bufferCushion = 30;   // seconds - ramp up quality here
  
  selectQuality(variants: Variant[], state: PlayerState): Variant {
    const bufferLevel = state.bufferLength; // seconds
    
    if (bufferLevel < this.bufferReservoir) {
      // Buffer is critically low - select lowest quality
      return variants[0];
    }
    
    if (bufferLevel > this.bufferCushion) {
      // Buffer is full - select highest quality
      return variants[variants.length - 1];
    }
    
    // Linear interpolation between reservoir and cushion
    const fraction = (bufferLevel - this.bufferReservoir) / 
                    (this.bufferCushion - this.bufferReservoir);
    
    const index = Math.floor(fraction * (variants.length - 1));
    return variants[index];
  }
  
  onSegmentDownloaded(bytesDownloaded: number, durationMs: number): void {
    // BBA doesn't use throughput measurements
  }
}
 
// =============================================================
// APPROACH 3: HYBRID ABR (Modern Approach)
// =============================================================
// Combines throughput estimation, buffer state, and quality history.
// Used by most production players (dash.js, hls.js, Shaka).
 
class HybridABR implements ABRController {
  private throughputEstimator: ThroughputEstimator;
  private qualityHistory: Variant[] = [];
  
  // Tuning parameters
  private readonly minBuffer = 10;        // seconds
  private readonly maxBuffer = 30;        // seconds
  private readonly safetyFactor = 0.8;
  private readonly switchUpThreshold = 1.5;  // Switch up if 1.5x headroom
  private readonly switchDownThreshold = 0.8; // Switch down if < 80% bandwidth
  private readonly oscillationWindow = 15;    // seconds - prevent rapid switching
  
  selectQuality(variants: Variant[], state: PlayerState): Variant {
    const bufferLevel = state.bufferLength;
    const throughput = this.throughputEstimator.getEstimate();
    const currentQuality = state.currentQuality;
    
    // RULE 1: Buffer emergency - immediately drop to lowest
    if (bufferLevel < this.minBuffer / 2) {
      return variants[0];
    }
    
    // RULE 2: Buffer is low - be conservative, only drop quality
    if (bufferLevel < this.minBuffer) {
      const conservativeTarget = throughput * 0.5; // Very conservative
      for (let i = 0; i <= currentQuality.index; i++) {
        if (variants[i].bandwidth > conservativeTarget) {
          return variants[Math.max(0, i - 1)];
        }
      }
      return variants[currentQuality.index];
    }
    
    // RULE 3: Estimate sustainable quality from throughput
    const safeThroughput = throughput * this.safetyFactor;
    let targetIndex = 0;
    for (let i = 0; i < variants.length; i++) {
      if (variants[i].bandwidth <= safeThroughput) {
        targetIndex = i;
      }
    }
    
    // RULE 4: Limit upward switches (prevent oscillation)
    if (targetIndex > currentQuality.index) {
      // Only switch up if we have significant headroom
      const headroom = safeThroughput / variants[targetIndex].bandwidth;
      if (headroom < this.switchUpThreshold) {
        targetIndex = currentQuality.index;
      }
      
      // Check for recent quality oscillation
      if (this.hasRecentOscillation()) {
        targetIndex = currentQuality.index;
      }
      
      // Only switch up by one level at a time
      targetIndex = Math.min(targetIndex, currentQuality.index + 1);
    }
    
    // RULE 5: Allow aggressive downward switches if needed
    if (targetIndex < currentQuality.index) {
      // Can drop multiple levels if bandwidth is very low
    }
    
    // RULE 6: Use buffer to modify decision
    if (bufferLevel > this.maxBuffer && targetIndex < variants.length - 1) {
      // Buffer is very full, try higher quality
      targetIndex = Math.min(targetIndex + 1, variants.length - 1);
    }
    
    return variants[targetIndex];
  }
  
  private hasRecentOscillation(): boolean {
    if (this.qualityHistory.length < 4) return false;
    
    const recent = this.qualityHistory.slice(-4);
    // Check for alternating pattern: high-low-high-low
    let switches = 0;
    for (let i = 1; i < recent.length; i++) {
      if (recent[i].index !== recent[i-1].index) switches++;
    }
    
    return switches >= 3; // 3+ switches in 4 segments = oscillation
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

┌─────────────────────────────────────────────────────────────────────────────────┐
│                           VIDEO PLAYER ARCHITECTURE                              │
└─────────────────────────────────────────────────────────────────────────────────┘
 
          ┌─────────────────────────────────────────────────────────────┐
          │                     PLAYER API LAYER                        │
          │  • play(), pause(), seek(), setQuality()                   │
          │  • Events: playing, paused, ended, error, qualityChange    │
          └───────────────────────────────┬─────────────────────────────┘
                                          │
          ┌───────────────────────────────┼───────────────────────────────┐
          │                               │                               │
          ▼                               ▼                               ▼
┌─────────────────────┐      ┌─────────────────────┐      ┌─────────────────────┐
│  MANIFEST PARSER    │      │   ABR CONTROLLER    │      │   UI CONTROLLER     │
│                     │      │                     │      │                     │
│  • Parse HLS/DASH   │◀────▶│  • Quality select   │      │  • Playback controls│
│  • Build variant map│      │  • Throughput est.  │      │  • Progress bar     │
│  • Handle updates   │      │  • Buffer monitor   │      │  • Quality picker   │
└──────────┬──────────┘      └──────────┬──────────┘      └─────────────────────┘
           │                            │
           ▼                            ▼
┌─────────────────────────────────────────────────────────────────────────────────┐
│                           SEGMENT LOADER                                         │
│  • HTTP fetch with timeout/retry                                                │
│  • Request prioritization (video over audio)                                    │
│  • Bandwidth measurement                                                         │
│  • Request abort on seek/quality change                                          │
└─────────────────────────────────────────────────────────────────────────────────┘
                                          │
                                          ▼
┌─────────────────────────────────────────────────────────────────────────────────┐
│                           BUFFER MANAGER                                         │
│  • Append segments to SourceBuffer (MSE API)                                    │
│  • Handle codec changes (SourceBuffer recreation)                               │
│  • Buffer eviction for memory management                                        │
│  • Gap detection and handling                                                    │
└─────────────────────────────────────────────────────────────────────────────────┘
                                          │
                                          ▼
┌─────────────────────────────────────────────────────────────────────────────────┐
│                 MEDIA SOURCE EXTENSIONS (MSE) API                                │
│                         [Browser Native]                                         │
│  • MediaSource object                                                           │
│  • SourceBuffer for video/audio                                                 │
│  • Manages decoded frame buffer                                                 │
└─────────────────────────────────────────────────────────────────────────────────┘
                                          │
                                          ▼
┌─────────────────────────────────────────────────────────────────────────────────┐
│                          VIDEO DECODER                                           │
│                         [Browser Native]                                         │
│  • Hardware-accelerated decoding                                                │
│  • H.264, VP9, AV1, HEVC (where supported)                                      │
└─────────────────────────────────────────────────────────────────────────────────┘
                                          │
                                          ▼
                              ┌─────────────────────┐
                              │    <video> Element │
                              │      RENDERING      │
                              └─────────────────────┘

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169

// =============================================================
// STRATEGY 1: FAST STARTUP
// =============================================================
 
interface StartupOptimization {
  // Start with lower quality for faster first frame
  initialBitrate: 'lowest' | 'measured' | 'predicted';
  
  // Preload strategies
  preloadHint: boolean;       // Use Link rel=preload for manifest
  initSegmentPreload: boolean; // Prefetch init segments
  
  // Eager segment loading
  startFetchOnCanPlay: boolean; // Start fetching before play()
}
 
async function optimizedStartup(videoUrl: string): Promise<void> {
  // 1. Preload manifest while video element initializes
  const manifestPromise = fetch(videoUrl, { priority: 'high' });
  
  // 2. Start with lowest quality for fastest first frame
  const manifest = await manifestPromise;
  const variants = parseManifest(manifest);
  const initialVariant = variants[0]; // Lowest quality
  
  // 3. Prefetch init segment and first media segment
  const initPromise = fetch(initialVariant.initUrl);
  const firstSegmentPromise = fetch(initialVariant.segments[0].url);
  
  // 4. As soon as we have first segment, begin playback
  const [initData, firstSegment] = await Promise.all([
    initPromise, firstSegmentPromise
  ]);
  
  await appendToBuffer(initData);
  await appendToBuffer(firstSegment);
  
  // 5. Begin playback - user sees video almost instantly
  video.play();
  
  // 6. Continue loading and switch to higher quality
  startNormalPlayback(variants);
}
 
// =============================================================
// STRATEGY 2: PRELOAD NEXT SEGMENT
// =============================================================
 
class PreloadManager {
  private preloadedSegments: Map<string, ArrayBuffer> = new Map();
  
  // Speculatively fetch the next segment while playing current
  async preloadNextSegments(
    currentPosition: number,
    variants: Variant[],
    currentVariant: Variant
  ): Promise<void> {
    const nextSegmentIndex = this.getNextSegmentIndex(currentPosition);
    
    // Preload current quality
    this.preloadSegment(currentVariant, nextSegmentIndex);
    
    // Also preload fallback quality in case of bandwidth drop
    const fallbackVariant = this.selectFallbackVariant(currentVariant, variants);
    if (fallbackVariant) {
      this.preloadSegment(fallbackVariant, nextSegmentIndex);
    }
  }
  
  // Cancel preload if seek or quality change
  cancelPreloads(): void {
    for (const [url, controller] of this.pendingFetches) {
      controller.abort();
    }
    this.preloadedSegments.clear();
  }
}
 
// =============================================================
// STRATEGY 3: SMART SEEK HANDLING
// =============================================================
 
class SeekOptimizer {
  async handleSeek(targetTime: number, player: Player): Promise<void> {
    // 1. Determine if we have the target in buffer
    const buffered = player.getBufferedRanges();
    const inBuffer = this.isTimeBuffered(targetTime, buffered);
    
    if (inBuffer) {
      // Simple case: just update playhead
      player.setCurrentTime(targetTime);
      return;
    }
    
    // 2. Cancel any pending segment downloads
    player.abortPendingRequests();
    
    // 3. Flush buffer around target (keep recent for backward seeks)
    player.flushBuffer({
      keepBefore: targetTime - 30,
      keepAfter: targetTime + 2,
    });
    
    // 4. Start loading from target position at current quality
    const targetSegment = this.findSegmentAtTime(targetTime, player.currentVariant);
    
    // 5. Consider dropping quality temporarily for faster seek
    const seekVariant = player.bufferLevel < 5 
      ? this.selectLowerQuality(player.currentVariant)
      : player.currentVariant;
    
    await player.loadSegment(seekVariant, targetSegment);
    
    // 6. Resume normal ABR after seek completes
    player.resumeNormalPlayback();
  }
}
 
// =============================================================
// QOE METRICS COLLECTION
// =============================================================
 
interface QoEMetrics {
  // Startup
  timeToFirstFrame: number;     // ms from play() to first frame rendered
  timeToPlaying: number;        // ms from play() to video.playing event
  
  // Buffering
  rebufferingEvents: number;
  totalRebufferDuration: number; // ms
  rebufferRatio: number;        // rebuffer time / total time
  
  // Quality
  averageBitrate: number;       // Weighted by time at each quality
  qualitySwitchCount: number;
  timeAtEachQuality: Map<string, number>;
  
  // Engagement
  watchTime: number;
  completion: number;           // % of video watched
  abandonPoint: number | null;  // Time when user left (if any)
}
 
class QoECollector {
  collectMetrics(session: PlaybackSession): QoEMetrics {
    // Calculate weighted average bitrate
    let totalWeightedBitrate = 0;
    let totalTime = 0;
    
    for (const [quality, duration] of session.timeAtEachQuality) {
      totalWeightedBitrate += quality.bitrate * duration;
      totalTime += duration;
    }
    
    return {
      timeToFirstFrame: session.firstFrameTime - session.playRequestTime,
      timeToPlaying: session.playingTime - session.playRequestTime,
      rebufferingEvents: session.rebufferEvents.length,
      totalRebufferDuration: session.rebufferEvents.reduce((s, e) => s + e.duration, 0),
      rebufferRatio: session.rebufferDuration / session.totalPlayTime,
      averageBitrate: totalWeightedBitrate / totalTime,
      qualitySwitchCount: session.qualitySwitches.length,
      timeAtEachQuality: session.timeAtEachQuality,
      watchTime: session.totalPlayTime,
      completion: session.totalPlayTime / session.videoDuration,
      abandonPoint: session.abandonedAt,
    };
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101

// LL-HLS (Low-Latency HLS) Key Features
// Standardized in HLS version 9 (2020)
 
/*
 * TRADITIONAL HLS LIVE PLAYLIST
 * - Segment duration: 6 seconds
 * - 3 segments in playlist = 18 seconds behind live
 */
#EXTM3U
#EXT-X-VERSION:6
#EXT-X-TARGETDURATION:6
#EXT-X-MEDIA-SEQUENCE:1000
#EXTINF:6.0,
segment_1000.ts
#EXTINF:6.0,
segment_1001.ts
#EXTINF:6.0,
segment_1002.ts
 
/*
 * LL-HLS LIVE PLAYLIST
 * - Segment duration: 6 seconds (but available as partial segments)
 * - Partial segments: 0.2-0.5 seconds each
 * - Can start playing almost immediately
 */
#EXTM3U
#EXT-X-VERSION:9
#EXT-X-TARGETDURATION:6
#EXT-X-PART-INF:PART-TARGET=0.5
#EXT-X-SERVER-CONTROL:CAN-BLOCK-RELOAD=YES,PART-HOLD-BACK=1.5
#EXT-X-MEDIA-SEQUENCE:1000
 
#EXTINF:6.0,
#EXT-X-PART:DURATION=0.5,URI="segment_1000_part0.m4s"
#EXT-X-PART:DURATION=0.5,URI="segment_1000_part1.m4s"
... (12 parts total)
segment_1000.m4s
 
#EXTINF:6.0,
#EXT-X-PART:DURATION=0.5,URI="segment_1001_part0.m4s"
#EXT-X-PART:DURATION=0.5,URI="segment_1001_part1.m4s"
... (more parts)
 
// Key LL-HLS features:
// 1. Partial segments (EXT-X-PART) - download parts as they're encoded
// 2. Blocking playlist reload - server holds request until new content
// 3. Preload hints - tells client what to fetch next
// 4. Rendition reports - include status of other renditions
 
interface LLHLSConfig {
  // Segment production
  partDuration: number;        // 0.2-0.5 seconds typical
  partsPerSegment: number;     // e.g., 12 parts × 0.5s = 6s segment
  
  // Player behavior
  partHoldBack: number;        // How far behind live edge (in parts)
  playlistReloadTime: number;  // Max time between playlist refreshes
  
  // Server requirements
  blockingReload: boolean;     // Hold request until new content
  preloadHints: boolean;       // Include hints for next parts
}
 
// Player logic for Low Latency
class LLHLSPlayer {
  async liveSync(): Promise<void> {
    // Calculate target live edge position
    const liveEdge = this.manifest.lastPartEndTime;
    const targetPosition = liveEdge - this.config.partHoldBack;
    
    // If we've drifted too far behind, catch up
    const currentPosition = this.video.currentTime;
    const drift = targetPosition - currentPosition;
    
    if (drift > this.config.maxDrift) {
      // Option 1: Seek to live edge (jarring)
      // Option 2: Increase playback rate temporarily (smoother)
      this.video.playbackRate = 1.05; // 5% faster until caught up
    } else if (drift < -1) {
      // Too far ahead? Shouldn't happen but slow down
      this.video.playbackRate = 0.95;
    } else {
      this.video.playbackRate = 1.0;
    }
  }
  
  async reloadPlaylist(): Promise<void> {
    // Blocking reload - server holds request until new content
    const url = new URL(this.playlistUrl);
    url.searchParams.set('_HLS_msn', this.lastMSN + 1);
    url.searchParams.set('_HLS_part', this.lastPart + 1);
    
    // This request blocks server-side until next part is ready
    const response = await fetch(url, {
      headers: { 'Accept': 'application/vnd.apple.mpegurl' }
    });
    
    const newManifest = await response.text();
    this.updateManifest(newManifest);
  }
}