How Bilibili and Zhihu Achieve Fast Video Playback Using HTTP Range Requests and SourceBuffer
This article explains how video platforms like Bilibili and Zhihu use HTTP Range requests to fetch specific byte segments of a video and the browser's SourceBuffer API to dynamically append those fragments, enabling instant seeking and smooth playback without downloading the entire file.
Video platforms like Bilibili and Zhihu achieve instant seeking by downloading only the required video segment using HTTP Range requests, which return a 206 Partial Content response with a Content‑Range header.
By opening DevTools and filtering for status-code:206 , you can observe each range request as you move the playback slider; the Content‑Range column shows the byte range of the fragment.
The client calculates which predefined segment (e.g., 2097152‑3145727 bytes) corresponds to the clicked position and requests that range, allowing the player to start playback immediately while the next segments are fetched in the background.
On the browser side the Media Source Extensions API (SourceBuffer) is used to append each received fragment to a media source and render it; old fragments can be removed when the user seeks elsewhere.
Servers may store videos as separate segment files (e.g., m3u8/ts or Bilibili’s m4s) or serve a single MP4 file and serve byte ranges on demand; both approaches enable fast, seamless playback.
IT Services Circle
Delivering cutting-edge internet insights and practical learning resources. We're a passionate and principled IT media platform.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.