Media source | Frontend Practical Guide

Limited supportUse with care and provide a fallback when broad support matters.

Overview

The MediaSource API is a custom data source for media elements commonly used for adaptive streaming. Also known as Media Source Extensions (MSE). It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.

Browser support

Feature	Desktop				Mobile
Feature	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`BufferedChangeEvent` Experimental				17		17.1
`sourceBuffer` The read-only AudioTrack property sourceBuffer returns the SourceBuffer that created the track, or null if the track was not created by a SourceBuffer or the SourceBuffer has been removed from the MediaSource.sourceBuffers attribute of its parent media source.	51	12		8	51	13
`addedRanges` Experimental The addedRanges read-only property of the BufferedChangeEvent interface returns a TimeRanges object representing the time ranges that were added to the associated ManagedSourceBuffer. These are the ranges added between the last updatestart and updateend events, during the most recent run of the coded frame processing algorithm.				17		17.1
`BufferedChangeEvent` Experimental The BufferedChangeEvent() constructor of the BufferedChangeEvent interface creates a new BufferedChangeEvent object instance.				17		17.1
`removedRanges` Experimental The removedRanges read-only property of the BufferedChangeEvent interface returns a TimeRanges object representing the time ranges that were removed from the associated ManagedSourceBuffer. These are the ranges removed between the last updatestart and updateend events, during the most recent run of the coded frame removal or coded frame eviction algorithm,…				17		17.1
`srcObject` The srcObject property of the HTMLMediaElement interface sets or returns the object which serves as the source of the media associated with the HTMLMediaElement, or null if not assigned.	108	108	42	11	108	11
`MediaSource` The MediaSource interface of the Media Source Extensions API represents a source of media data for an HTMLMediaElement object. A MediaSource object can be attached to a HTMLMediaElement to be played in the user agent.	31	12	42	8	31	13
`activeSourceBuffers` The activeSourceBuffers read-only property of the MediaSource interface returns a SourceBufferList object containing a subset of the SourceBuffer objects contained within MediaSource.sourceBuffers — the list of objects providing the selected video track, enabled audio tracks, and shown/hidden text tracks.	23	12	42	8	25	13
`addSourceBuffer` The addSourceBuffer() method of the MediaSource interface creates a new SourceBuffer of the given MIME type and adds it to the MediaSource's MediaSource.sourceBuffers list. The new SourceBuffer is also returned.	23	12	42	8	25	13
`canConstructInDedicatedWorker_static` The canConstructInDedicatedWorker static property of the MediaSource interface returns true if MediaSource worker support is implemented, providing a low-latency feature detection mechanism.	108	108		18	108	18
`clearLiveSeekableRange` The clearLiveSeekableRange() method of the MediaSource interface clears a seekable range previously set with a call to MediaSource.setLiveSeekableRange().	62	17	50	10.1	62	13
`duration` The duration property of the MediaSource interface gets and sets the duration of the current media being presented.	23	12	42	8	25	13
`endOfStream` The endOfStream() method of the MediaSource interface signals the end of the stream.	23	12	42	8	25	13
`handle` The handle read-only property of the MediaSource interface returns a MediaSourceHandle object, a proxy for the MediaSource that can be transferred from a dedicated worker back to the main thread and attached to a media element via its HTMLMediaElement.srcObject property.	108	108		18	108	18
`isTypeSupported_static` The MediaSource.isTypeSupported() static method returns a boolean value which is true if the given MIME type and (optional) codec are likely to be supported by the current user agent.	23	12	42	8	25	13
`MediaSource` The MediaSource() constructor of the MediaSource interface constructs and returns a new MediaSource object with no associated source buffers.	31	12	42	8	33	13
`readyState` The readyState read-only property of the MediaSource interface returns an enum representing the state of the current MediaSource. The three possible values are:	23	12	42	8	33	13
`removeSourceBuffer` The removeSourceBuffer() method of the MediaSource interface removes the given SourceBuffer from the SourceBufferList associated with this MediaSource object.	23	12	42	8	25	13
`setLiveSeekableRange` The setLiveSeekableRange() method of the MediaSource interface sets the range that the user can seek to in the media element.	62	17	50	10.1	62	13
`sourceBuffers` The sourceBuffers read-only property of the MediaSource interface returns a SourceBufferList object containing the list of SourceBuffer objects associated with this MediaSource.	23	12	42	8	25	13
`sourceclose_event` The sourceclose event is fired when a MediaSource object's MediaSource.readyState changes to "closed". This indicates that the MediaSource has been detached from the media element.	53	17	87	10.1	53	13
`sourceended_event` The sourceended event is fired when a MediaSource object's MediaSource.readyState changes to "ended". This indicates that the application has finished sending data to the MediaSource. When an application has finished appending all media data to the SourceBuffer objects associated with a MediaSource, it calls the MediaSource.endOfStream() method on the…	53	17	42	10.1	53	13
`sourceopen_event` The sourceopen event is fired when a MediaSource object's MediaSource.readyState changes to "open". This indicates that the MediaSource is ready to receive data from SourceBuffer objects. This can occur either when the MediaSource object is first attached to a media element or when the MediaSource.readyState changes from "ended" back to "open".	53	17	42	10.1	53	13
`worker_support` Experimental Available in workers	108	108			108
`MediaSourceHandle` The MediaSourceHandle interface of the Media Source Extensions API is a proxy for a MediaSource that can be transferred from a dedicated worker back to the main thread and attached to a media element via its HTMLMediaElement.srcObject property. MediaSource objects are not transferable because they are event targets, hence the need for MediaSourceHandles.	108	108		18	108	18
`SourceBuffer` The SourceBuffer interface represents a chunk of media to be passed into an HTMLMediaElement and played, via a MediaSource object. This can be made up of one or several media segments.	31	12	42	8	31	13
`abort` The abort() method of the SourceBuffer interface aborts the current segment and resets the segment parser.	23	12	42	8	25	13
`abort_event` The abort event of the SourceBuffer interface is fired when the buffer appending is aborted, because the SourceBuffer.abort() or SourceBuffer.remove() method is called while the SourceBuffer.appendBuffer() algorithm is still running. The SourceBuffer.updating property transitions from true to false. This event is fired before the…	53	17	42	10.1	53	13
`abort_event (worker support)` Experimental Available in workers	108	108			108
`abort (worker support)` Experimental Available in workers	108	108			108
`appendBuffer` The appendBuffer() method of the SourceBuffer interface appends media segment data from an ArrayBuffer, a TypedArray or a DataView object to the SourceBuffer.	23	12	42	8	33	13
`appendBuffer (worker support)` Experimental Available in workers	108	108			108
`appendWindowEnd` The appendWindowEnd property of the SourceBuffer interface controls the timestamp for the end of the append window, a timestamp range that can be used to filter what media data is appended to the SourceBuffer. Coded media frames with timestamps within this range will be appended, whereas those outside the range will be filtered out.	23	12	42	8	33	13
`appendWindowEnd (worker support)` Experimental Available in workers	108	108			108
`appendWindowStart` The appendWindowStart property of the SourceBuffer interface controls the timestamp for the start of the append window, a timestamp range that can be used to filter what media data is appended to the SourceBuffer. Coded media frames with timestamps within this range will be appended, whereas those outside the range will be filtered out.	23	12	42	8	33	13
`appendWindowStart (worker support)` Experimental Available in workers	108	108			108
`audioTracks` The audioTracks read-only property of the SourceBuffer interface returns a list of the audio tracks currently contained inside the SourceBuffer.	70	12		8	70	13
`audioTracks (worker support)` Experimental Available in workers	108	108			108
`buffered` The buffered read-only property of the SourceBuffer interface returns the time ranges that are currently buffered in the SourceBuffer as a normalized TimeRanges object.	23	12	42	8	33	13
`buffered (worker support)` Experimental Available in workers	108	108			108
`changeType` The changeType() method of the SourceBuffer interface sets the MIME type that future calls to SourceBuffer.appendBuffer should expect the new media data to conform to. This makes it possible to change codecs or container type mid-stream.	70	79	63	12.1	70	13
`changeType (worker support)` Experimental Available in workers	108	108			108
`error_event` The error event of the SourceBuffer interface is fired when an error occurs during the processing of an SourceBuffer.appendBuffer operation. This may happen, for example, if the data being appended is not in the expected format, the SourceBuffer is in an invalid state, or the user agent is unable to process the data. The SourceBuffer.updating property…	53	17	42	10.1	53	13
`error_event (worker support)` Experimental Available in workers	108	108			108
`mode` The mode property of the SourceBuffer interface controls whether media segments can be appended to the SourceBuffer in any order, or in a strict sequence.	23	12	42	8	33	13
`mode (worker support)` Experimental Available in workers	108	108			108
`remove` The remove() method of the SourceBuffer interface removes media segments within a specific time range from the SourceBuffer. This method can only be called when SourceBuffer.updating equals false. If SourceBuffer.updating is not equal to false, call SourceBuffer.abort().	23	12	42	8	33	13
`remove (worker support)` Experimental Available in workers	108	108			108
`textTracks` Experimental The textTracks read-only property of the SourceBuffer interface returns a list of the text tracks currently contained inside the SourceBuffer.				8		13
`timestampOffset` The timestampOffset property of the SourceBuffer interface controls the offset applied to timestamps inside media segments that are appended to the SourceBuffer.	23	12	42	8	33	13
`timestampOffset (worker support)` Experimental Available in workers	108	108			108
`update_event` The update event of the SourceBuffer interface signals the successful completion of an SourceBuffer.appendBuffer or SourceBuffer.remove operation. The SourceBuffer.updating attribute transitions from true to false. This event is fired before the SourceBuffer.updateend_event event.	53	17	42	10.1	53	13
`update_event (worker support)` Experimental Available in workers	108	108			108
`updateend_event` The updateend event of the SourceBuffer interface signals the (not necessarily successful) completion of an SourceBuffer.appendBuffer or SourceBuffer.remove operation. The SourceBuffer.updating attribute transitions from true to false. This event is fired after the SourceBuffer.updateevent, SourceBuffer.errorevent, or SourceBuffer.abort_event events.	53	17	42	10.1	53	13
`updateend_event (worker support)` Experimental Available in workers	108	108			108
`updatestart_event` The updatestart event of the SourceBuffer interface signals the beginning of an SourceBuffer.appendBuffer or SourceBuffer.remove operation. The SourceBuffer.updating attribute transitions from false to true.	53	17	42	10.1	53	13
`updatestart_event (worker support)` Experimental Available in workers	108	108			108
`updating` The updating read-only property of the SourceBuffer interface indicates whether the SourceBuffer is currently being updated — i.e., whether an SourceBuffer.appendBuffer or SourceBuffer.remove operation is currently in progress.	23	12	42	8	33	13
`updating (worker support)` Experimental Available in workers	108	108			108
`videoTracks` The videoTracks read-only property of the SourceBuffer interface returns a list of the video tracks currently contained inside the SourceBuffer.	70	12		8	70	13
`videoTracks (worker support)` Experimental Available in workers	108	108			108
`SourceBufferList` The SourceBufferList interface represents a simple container list for multiple SourceBuffer objects.	31	12	42	8	31	13
`addsourcebuffer_event` `addsourcebuffer` event	53	17	42	10.1	53	13
`addsourcebuffer_event (worker support)` Experimental Available in workers	108	108			108
`length` The length read-only property of the SourceBufferList interface returns the number of SourceBuffer objects in the list.	23	12	42	8	33	13
`length (worker support)` Experimental Available in workers	108	108			108
`removesourcebuffer_event` `removesourcebuffer` event	53	17	42	10.1	53	13
`removesourcebuffer_event (worker support)` Experimental Available in workers	108	108			108
`sourceBuffer` The read-only sourceBuffer property of the TextTrack interface returns the SourceBuffer that created the track, or null if the track was not created by a SourceBuffer or the SourceBuffer has been removed from the MediaSource.sourceBuffers attribute of its parent media source.				8		13
`sourceBuffer` The read-only VideoTrack property sourceBuffer returns the SourceBuffer that created the track, or null if the track was not created by a SourceBuffer or the SourceBuffer has been removed from the MediaSource.sourceBuffers attribute of its parent media source.	51	12		7	51	13

1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

JAVASCRIPT

const video = document.querySelector('video');
const ms = new MediaSource();
video.src = URL.createObjectURL(ms);
ms.addEventListener('sourceopen', () => {
  const sb = ms.addSourceBuffer('video/mp4; codecs="avc1.42E01E"');
  fetch('segment.mp4').then(r => r.arrayBuffer()).then(buf => sb.appendBuffer(buf));
});

Live demo

Streaming pipeline

Outline how Media Source Extensions build media playback from appended segments.

PreviewFullscreen

Where MSE helps

Use Media Source when the page needs fine-grained control over buffered media data.

PreviewFullscreen

Complexity warning

Remember that Media Source is lower-level than ordinary file playback.

PreviewFullscreen

Use cases

Use Media source
Use Media source when standard HTML needs a more specific platform feature, semantic signal, or browser capability.
Handle edge cases
Apply Media source to solve a focused requirement without redesigning the whole page architecture.

Cautions

Test Media source in your target browsers and input environments before depending on it as a primary behavior.
Provide a fallback path or acceptable degradation strategy when support is still limited.

Overview

Browser support

Syntax

Live demo

Streaming pipeline

Where MSE helps

Complexity warning

Use cases

Use Media source

Handle edge cases

Cautions

Accessibility

Related links