Media Source Extensions Explained — How Video Streaming Works

👉 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/ Inspect a video on YouTube or X and the source is often not a normal MP4 URL. It looks like a blob. The browser is still decoding and playing — but JavaScript is deciding which media gets loaded next. A streaming player cannot treat the video as one file. Different users have different networks, and the same connection can change during playback. That is why the media is prepared as an initialization segment plus smaller, aligned pieces — so the player can fetch, buffer, and later switch quality one segment at a time. This is Part 1. We connect a MediaSource to a normal video element, append encoded bytes into a SourceBuffer, and watch what happens when playback catches the end of the buffer. Part 2 adds quality switching — adaptive bitrate streaming. You'll learn: Why streaming sites do not give video one MP4 URL Why media is split into an init segment plus timeline-aligned pieces How MediaSource connects JavaScript-controlled media to the video element How SourceBuffer receives encoded bytes — and what video.buffered tells you The basic player loop: fetch, append, play, then fetch more before the buffer runs out Final takeaway: MSE does not replace the video element. It gives the application control over the input to the browser's decode and playback pipeline. 📘 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 📩 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 #mse #mediasourceextensions #javascript #videostreaming #webdevelopment