A video URL is only the beginning
Learn to: trace a fetched media resource through buffering, decoding and presentation.
Prerequisites: 01-layer-map
Browser pipeline
On a narrow screen, swipe the diagram horizontally to keep its labels readable.
Mental model verified
A container organizes encoded tracks. A codec defines the encoding; a delivery protocol describes how media is retrieved. HLS and DASH do not magically make unsupported codecs work. MSE lets JavaScript append encoded media; decoding and rendering still happen in the browser.
[S01] [S02]Worked example synthesis
A browser may download a 200 OK MP4 yet show a media error because its codec/profile is unsupported. Debug in this order: valid source and media type; bytes and response headers; codec/container compatibility; buffered ranges and timeline; only then the controls.
[S01] [S03]Decision and trade-off synthesis
Use a progressive MP4 for a modest clip when simplicity wins. Adaptive segmented media earns its complexity for variable networks, longer sessions and live workflows. Test actual devices rather than assuming identical behavior across Chromium and Safari.
[S02]Pitfall → improvement synthesis
Treat preload as a hint, not a bandwidth guarantee. Put a poster and stable aspect ratio around the player; load richer engines only where the use case needs them. Validate the media independently from the framework wrapper.
[S03] [S06]Check yourself: Can hls.js add support for every video codec?
No. Its pipeline must still produce media that the browser’s MediaSource and decoder support.