How YouTube Changes Video Quality Mid-Playback

👉 Frontend System Design Essentials — Course: https://icodeit.thinkific.com/courses/frontend-system-design-essentials 👉 Frontend System Design Essentials — Book: https://leanpub.com/frontend-system-design-essentials/ When you watch YouTube, quality often changes without you touching anything. 1080p becomes 720p or 480p when the network drops — then climbs again when it recovers. Playback never restarts. That only works because the same timeline is prepared in several qualities, split into aligned segments. The player decides which quality of the next segment to fetch — adaptive bitrate streaming, or ABR. This is Part 2. We estimate throughput from the last download, watch buffer ahead with video.buffered, and combine both signals to choose quality before appending into the same SourceBuffer from Part 1. The goal is not maximum quality. It is the best quality we can keep while playback stays stable. You'll learn: Why streaming prepares multiple aligned qualities instead of one file How to estimate bandwidth from segment size and download time Why noisy network measurements alone cause quality thrashing How buffer ahead changes the decision when playback is at risk The feedback loop: observe → decide → fetch → append Final takeaway: ABR is not a smarter video tag. It is a control loop that trades some visual quality to reduce stall risk — using network and buffer as inputs to pick the next segment. 📘 MY BOOKS & COURSES 👉 Frontend System Design Essentials (Course): https://icodeit.thinkific.com/courses/frontend-system-design-essentials 👉 Frontend System Design Essentials (Book): https://leanpub.com/frontend-system-design-essentials/ 👉 React Anti-Patterns (Amazon): https://www.amazon.com/dp/1805123971 👉 More Tutorials on Advanced Patterns: https://icodeit.com.au/tutorials/advanced-network-patterns-react #frontend #systemdesign #abr #adaptivebitrate #videostreaming #mse #javascript #webdevelopment 📩 STAY CONNECTED 🧠 Newsletter (system design & clean code): https://juntao.substack.com 🌐 Website & Blog: https://icodeit.com.au 🐦 Twitter / X: http://twitter.com/JuntaoQiu 📺 YouTube (subscribe): https://www.youtube.com/@icodeit.juntao JetBrains has kindly provided a 20% discount for viewers of this channel. Use the code ICODEIT20 when purchasing a personal annual license from the JetBrains store. The code is valid until June 30, 2027. For transparency: JetBrains has also provided me with a complimentary All Products Pack license. There are no requirements around what I say about their tools. #frontend #systemdesign #abr #adaptivebitrate #videostreaming #mse #javascript #webdevelopment