Implementing Adaptive Bitrate Streaming with HLS and DASH

Adaptive Bitrate (ABR) streaming allows web applications to dynamically adjust video quality in real time based on a user's network speed, device capabilities, and viewport size. This article provides a direct, technical overview of how web development teams implement ABR using the two prevailing industry protocols: HTTP Live Streaming (HLS) and Dynamic Adaptive Streaming over HTTP (MPEG-DASH). It covers video encoding, manifest generation, Content Delivery Network (CDN) distribution, and front-end player integration.

1. Generating the Encoding Ladder

Before delivering video via HLS or DASH, teams must transcode raw video files into multiple resolution and bitrate variants—known as an encoding ladder.

  • Rendition Profiles: Teams generate standard profiles (e.g., 1080p at 5 Mbps, 720p at 2.5 Mbps, 480p at 1 Mbps, and 360p at 500 kbps).
  • GOP (Group of Pictures) Alignment: To switch smoothly between streams without visual stutter, keyframes (I-frames) must align precisely across every rendition. Teams enforce a strict, closed GOP interval (typically every 2 seconds).
  • Tooling: This process is automated using cloud transcoding services (AWS Elemental MediaConvert, Google Transcoder API) or command-line pipelines built with FFmpeg.

2. Segmenting and Packaging Content

Once encoded, continuous video tracks are sliced into small, standalone segments, typically 2 to 6 seconds in duration.

  • Format Options: Traditionally, HLS utilized MPEG-2 Transport Stream (.ts) files, while DASH used fragmented MP4 (.m4s or fMP4). Modern workflows predominantly use the Common Media Application Format (CMAF), which packages fMP4 segments that both HLS and DASH can consume, cutting storage costs roughly in half.
  • Manifest Creation:
    • HLS Manifests: The packager generates a master playlist (.m3u8) listing available streams, alongside individual media playlists (.m3u8) for each resolution containing the sequential URLs of the .ts or .m4s segments.
    • DASH Manifest: The packager outputs a single XML-based Media Presentation Description file (.mpd) that defines the adaptation sets, representations, and segment templates.

3. Hosting and CDN Caching

Because both protocols operate over standard HTTP/HTTPS:

  • Static Storage: Segment files and manifests are uploaded to object storage (such as Amazon S3 or Google Cloud Storage).
  • CDN Configuration: Teams deploy a CDN (such as Cloudflare, Fastly, or CloudFront) in front of the storage. Video segments are cached aggressively with long Cache-Control max-age headers, while manifest files use short TTLs (Time-To-Live) to accommodate live updates or changes in availability.

4. Front-End Player Integration

Browsers handle ABR protocols differently, requiring web development teams to use specialized client-side libraries.

  • Safari (iOS & macOS): Safari provides native HTML5 <video> support for HLS. The browser natively consumes the .m3u8 manifest using <video src="stream.m3u8"></video>.
  • Chrome, Firefox, Edge, and Android: These browsers do not natively decode HLS or DASH manifests. Instead, teams use JavaScript libraries leveraging the browser's Media Source Extensions (MSE) API:
    • HLS.js: Parses HLS manifests and feeds transmuxed segments directly to the HTML5 video element.
    • Dash.js: The reference client implementation for parsing DASH .mpd files.
    • Universal Players: Libraries such as Video.js, Shaka Player, or Plyr wrap around HLS.js and Dash.js to provide a uniform API, UI controls, and fallback strategies.

5. Managing ABR Switching Algorithms

Client-side libraries feature built-in heuristic algorithms that continuously assess:

  1. Bandwidth Estimation: Measuring the download speed of recent chunks.
  2. Buffer Fill Level: Monitoring the number of forward seconds buffered in memory.

If bandwidth drops or buffer levels fall below critical thresholds, the player requests the next segment from a lower-bitrate variant listed in the manifest. When bandwidth stabilizes, the player requests segments from a higher-quality profile, ensuring continuous playback without buffering pauses.