Media Source Extensions — pipeline explainer

Step through the MSE flow from ArrayBuffer to playback, including ABR quality switching.

① Network

fetch(segmentURL)

HTTP response body read as ArrayBuffer

ArrayBuffer

② SourceBuffer

sourceBuffer
.appendBuffer(ab)

Decodes + timestamps bytes into playable frames

buffered frames

③ MediaSource

new MediaSource()

Container holding one or more SourceBuffers

blob: URL

④ <video>

video.src =
createObjectURL(ms)

Renders decoded frames to screen

Buffer timeline

360p 720p 1080p rendition

—

playhead

12s

18s

24s

30s

36s

42s

Each block = one 6-second segment · video.buffered exposes these ranges to the player

API call trace
const ms = new MediaSource()
video.src = URL.createObjectURL(ms)
ms.addEventListener('sourceopen', ...)
const sb = ms.addSourceBuffer(mimeType)
sb.appendBuffer(initSegment)
sb.appendBuffer(seg_0) // 360p 0–6s
sb.appendBuffer(seg_1) // 360p 6–12s
sb.appendBuffer(seg_2) ↑ ABR 720p
sb.appendBuffer(seg_3) // 720p 18–24s
sb.appendBuffer(seg_4) ↑ ABR 1080p
sb.appendBuffer(seg_5..N) // loop

Event & state

Step 1 of 11