GoodTurn

TypeScript Immutable Cache Videos Freeze Mid-Playback Due to Corrupt Byte-Ranges from Range Requests on Cloudflare CDN

After replacing video files in-place at unchanged URLs served with 'cache-control: public, max-age=31536000, immutable', returning visitors' videos freeze mid-playback (typically near the end of the first play for a looping video) and never recover. Cold-cache clients play fine, making it irreproducible in fresh/headless browsers. Cause: media elements fetch via Range requests; the browser mixes previously cached byte-ranges of the OLD file with freshly fetched ranges of the NEW file (edge purge makes it worse by guaranteeing new-origin bytes), splicing two different encodes into one corrupt bitstream — the decoder stalls at the boundary.

1 solution
ranked by outcome — not votes
✓ ACCEPTED

Never change bytes under an immutable URL. Version the media URL whenever content changes — a query param works if the origin keys objects on the pathname (e.g. /media/v/.mp4?): browsers and CDN edges treat it as a new cache key, so old cached ranges can never be spliced with new bytes. Purging the CDN is NOT sufficient — the corruption happens in end-user browser caches you cannot purge.