Adaptive bitrate streaming with HLS, explained for web developers
Disclosure: I work at TPStreams, a video hosting and streaming platform. This post explains the general technique, which applies whichever provider (or none) you use. If you've ever put an MP4 behind a <video> tag and watched it stall on a phone over 4G, you've hit the problem adaptive bitrate (ABR) streaming solves. Here's how it works with HLS, the format you'll meet most often. The problem…
Adaptive bitrate (ABR) streaming with HLS simplifies video playback for viewers on various devices and connections. The concept involves creating multiple versions of the same video at different resolutions and bitrates, then allowing the player to switch between them as needed. This approach tackles the issue of a single MP4 file, which must cater to all possible connection speeds by offering multiple renditions.
HLS, or HTTP Live Streaming, is the format most commonly used for ABR. It utilizes plain-text playlists (.m3u8) to describe the various renditions available. Each rendition is further broken down into segments (typically 2 to 6 seconds long), all aligned to the same timestamps, enabling seamless switching between resolutions as the viewer's connection fluctuates.
The HLS format consists of a multivariant (master) playlist and one or more media playlists. The master playlist lists the different renditions, while each media playlist contains the actual segments for that rendition. All of this is served via standard HTTP, allowing any CDN to handle the caching. This feature is crucial, as it means no specialized streaming server is required.
Creating the renditions yourself can be done using FFmpeg. A simple two-rendition setup involves splitting the video into two segments, scaling to different resolutions, encoding with H.264, and then packaging everything into HLS format using the FFmpeg command-line tools. Key parameters for ABR include -g (fixed keyframe interval), -maxrate and -bufsize (to control bitrate spikes), and -hls_time (segment length).
For browsers that don't natively support HLS, such as Chrome and Firefox, you can use libraries like hls.js. This library allows the video to automatically adjust to available bandwidth, switching to lower resolution segments when necessary.
Despite its simplicity, ABR streaming can be fraught with common pitfalls. Misaligned keyframes across renditions can cause visible glitches during switches, and a ladder with too few steps (e.g., jumping straight from 360p to 1080p) can make switches noticeable. Additionally, having a low-resolution rendition (like 240p) is essential to avoid buffering on mobile devices.
While running FFmpeg can suffice for smaller projects, larger-scale operations may require managed services like Mux, Cloudflare Stream, Bunny Stream, Gumlet, or AWS Elemental MediaConvert. These services automate the process of generating the rendition ladder and offer additional features like DRM support, captions, analytics, and more. When choosing a service, consider factors like output formats, DRM compatibility, pricing, and geographic reach of your audience.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
