Media Source Extensions (MSE)
Media Source Extensions (MSE) is a web browser API that lets JavaScript feed video and audio data into the HTML5 video element piece by piece. MSE makes adaptive streaming possible in browsers that cannot play HLS or DASH natively. A player library downloads segments, chooses the right quality and appends them to a buffer that the browser then decodes and plays.
Why it matters
Without MSE, browsers like Chrome and Firefox could only play whole files, not adaptive streams. MSE is what lets a web player switch quality mid-video, insert ads and play live streams, so it underpins most premium web video experiences.
How it works
- A JavaScript player creates a MediaSource object and attaches it to a video element.
- The player downloads segments of video and audio from a manifest such as HLS or DASH.
- It appends each segment into a SourceBuffer that the browser decodes and plays.
- It chooses which quality to fetch next and removes old data from the buffer to save memory.
Does iPhone support Media Source Extensions?
Recent iPhones support a variant called Managed Media Source, added in iOS 17.1, rather than the classic MSE API. Older iPhones did not support MSE at all, which is why HLS on iPhone was played natively by Safari. Players such as hls.js now use Managed Media Source when it is available.
What is the difference between MSE and EME?
MSE feeds video data into the browser, while EME handles decryption of DRM-protected content. A web player uses MSE to append segments of an adaptive stream and EME to get license keys from a DRM server. Premium streaming in the browser usually uses both together.
Where it's used
OTT services and online course platforms rely on MSE-based web players so viewers on Chrome, Firefox and Edge get automatic quality switching in the browser without installing an app.
By the numbers
- Media Source Extensions became a W3C Recommendation in November 2016. (Media Source Extensions, W3C)
