MediaSource

MediaSource is a browser API implemented as part of the Media Source Extensions (MSE) specification. It enables dynamic, JavaScript-controlled streaming of media data by feeding segments to a media element. It is designed to support adaptive streaming protocols such as MPEG-DASH and HLS by constructing media streams in the browser.

In practice, a script creates a MediaSource object, attaches it to a video or audio element using a blob URL, then waits for the sourceopen event to create one or more SourceBuffer objects with a MIME type. Segments are appended with sourceBuffer.appendBuffer, and the timeline can be advanced with timestampOffset. The end-of-stream is signaled by endOfStream when all data has been delivered. The media element will play the buffered content as it is decoded.

Supported formats and browser compatibility: MSE works with fragmented MP4 and WebM containers, with codecs selection via MIME types. Support varies by browser and platform; major browsers provide MSE support, though features may differ, and DRM-protected content requires Encrypted Media Extensions (EME). Developers often use MSE to implement adaptive bitrate streaming in conjunction with DASH or HLS.

It is distinct from standard video playback and is intended for programmatic control of buffering. The MediaSource object is part of ongoing standardization and is widely used in web video players.