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.
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.
MediaSource()
Constructs and returns a new MediaSource
object with no associated source buffers.
MediaSource.activeSourceBuffers
Read only
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.
MediaSource.duration
Gets and sets the duration of the current media being presented.
MediaSource.handle
Read only Experimental
Inside a dedicated worker, returns a MediaSourceHandle
object, a proxy for the MediaSource
that can be transferred from the worker back to the main thread and attached to a media element via its HTMLMediaElement.srcObject
property.
MediaSource.readyState
Read only
Returns an enum representing the state of the current MediaSource
, whether it is not currently attached to a media element (closed
), attached and ready to receive SourceBuffer
objects (open
), or attached but the stream has been ended via MediaSource.endOfStream()
(ended
.)
MediaSource.sourceBuffers
Read only
Returns a SourceBufferList
object containing the list of SourceBuffer
objects associated with this MediaSource
.
MediaSource.canConstructInDedicatedWorker
Read only Experimental
A boolean; returns true
if MediaSource
worker support is implemented, providing a low-latency feature detection mechanism.
Inherits methods from its parent interface, EventTarget
.
MediaSource.addSourceBuffer()
Creates a new SourceBuffer
of the given MIME type and adds it to the MediaSource.sourceBuffers
list.
MediaSource.clearLiveSeekableRange()
Clears a seekable range previously set with a call to setLiveSeekableRange()
.
MediaSource.endOfStream()
Signals the end of the stream.
MediaSource.removeSourceBuffer()
Removes the given SourceBuffer
from the MediaSource.sourceBuffers
list.
MediaSource.setLiveSeekableRange()
Sets the range that the user can seek to in the media element.
MediaSource.isTypeSupported()
Returns a boolean value indicating if the given MIME type is supported by the current user agent — this is, if it can successfully create SourceBuffer
objects for that MIME type.
sourceclose
Fired when the MediaSource
instance is not attached to a media element anymore.
sourceended
Fired when the MediaSource
instance is still attached to a media element, but endOfStream()
has been called.
sourceopen
Fired when the MediaSource
instance has been opened by a media element and is ready for data to be appended to the SourceBuffer
objects in sourceBuffers
.
The following simple example loads a video with XMLHttpRequest
, playing it as soon as it can. This example was written by Nick Desaulniers and can be viewed live here (you can also download the source for further investigation). The function getMediaSource()
, which is not defined here, returns a MediaSource
.
js
const video = document.querySelector("video"); const assetURL = "frag_bunny.mp4"; // Need to be specific for Blink regarding codecs // ./mp4info frag_bunny.mp4 | grep Codec const mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'; let mediaSource; if ("MediaSource" in window && MediaSource.isTypeSupported(mimeCodec)) { mediaSource = getMediaSource(); console.log(mediaSource.readyState); // closed video.src = URL.createObjectURL(mediaSource); mediaSource.addEventListener("sourceopen", sourceOpen); } else { console.error("Unsupported MIME type or codec: ", mimeCodec); } function sourceOpen() { console.log(this.readyState); // open const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec); fetchAB(assetURL, (buf) => { sourceBuffer.addEventListener("updateend", () => { mediaSource.endOfStream(); video.play(); console.log(mediaSource.readyState); // ended }); sourceBuffer.appendBuffer(buf); }); } function fetchAB(url, cb) { console.log(url); const xhr = new XMLHttpRequest(); xhr.open("get", url); xhr.responseType = "arraybuffer"; xhr.onload = () => { cb(xhr.response); }; xhr.send(); }
MediaSource
in a dedicated worker and passing it to the main threadThe handle
property can be accessed inside a dedicated worker and the resulting MediaSourceHandle
object is then transferred over to the thread that created the worker (in this case the main thread) via a postMessage()
call:
js
// Inside dedicated worker let mediaSource = new MediaSource(); let handle = mediaSource.handle; // Transfer the handle to the context that created the worker postMessage({ arg: handle }, [handle]); mediaSource.addEventListener("sourceopen", () => { // Await sourceopen on MediaSource before creating SourceBuffers // and populating them with fetched media — MediaSource won't // accept creation of SourceBuffers until it is attached to the // HTMLMediaElement and its readyState is "open" });
Over in the main thread, we receive the handle via a message
event handler, attach it to a <video>
via its HTMLMediaElement.srcObject
property, and play
the video:
js
worker.addEventListener("message", (msg) => { let mediaSourceHandle = msg.data.arg; video.srcObject = mediaSourceHandle; video.play(); });
Note: MediaSourceHandle
s cannot be successfully transferred into or via a shared worker or service worker.
Specification |
---|
Media Source Extensions™ # mediasource |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
MediaSource |
3123–31 | 12 | 42 | 11Only works on Windows 8+. |
15 | 8 | 4.4.3 | 33 | 41 | 14 | 13Exposed in Mobile Safari on iPad but not on iPhone. |
2.0 |
MediaSource |
3123–31 | 12 | 42 | 11 | 1815–18 | 8 | 4.4.34.4–4.4.3 | 3125–31 | 41 | 1814–18 | 13Exposed in Mobile Safari on iPad but not on iPhone. |
2.01.5–2.0 |
activeSourceBuffers |
23 | 12 | 42 | 11Only works on Windows 8+. |
15 | 8 | 4.4.3 | 25 | 41 | 14 | 13Exposed in Mobile Safari on iPad but not on iPhone. |
1.5 |
addSourceBuffer |
23 | 12 | 42 | 11Only works on Windows 8+. |
15 | 8 | 4.4.3 | 25 | 41 | 14 | 13Exposed in Mobile Safari on iPad but not on iPhone. |
1.5 |
canConstructInDedicatedWorker_static |
108 | 108 | No | No | 94 | No | 108 | 108 | No | 73 | No | 21.0 |
clearLiveSeekableRange |
62 | 17 | 50 | No | 49 | 10.1 | 62 | 62 | 50 | 46 | 13Exposed in Mobile Safari on iPad but not on iPhone. |
8.0 |
duration |
23 | 12 | 42 | 11Only works on Windows 8+. |
15 | 8 | 4.4.3 | 25 | 41 | 14 | 13Exposed in Mobile Safari on iPad but not on iPhone. |
1.5 |
endOfStream |
23 | 12 | 42 | 11Only works on Windows 8+. |
15 | 8 | 4.4.3 | 25 | 41 | 14 | 13Exposed in Mobile Safari on iPad but not on iPhone. |
1.5 |
handle |
108 | 108 | No | No | 94 | No | 108 | 108 | No | 73 | No | 21.0 |
isTypeSupported_static |
23["codecs string can contain any subset of optional parameters (should be all or none).", "Errors if codecs string contains unexpected characters (should evaluate string up to character)."] |
12["codecs string can contain any subset of optional parameters (should be all or none).", "Errors if codecs string contains unexpected characters (should evaluate string up to character)."] |
42Before Firefox 101,isTypeSupported() ignored codecs parameter options for av01 codecs (treating them as av1 ). |
11Only works on Windows 8+. |
15["codecs string can contain any subset of optional parameters (should be all or none).", "Errors if codecs string contains unexpected characters (should evaluate string up to character)."] |
8 | 4.4.3["codecs string can contain any subset of optional parameters (should be all or none).", "Errors if codecs string contains unexpected characters (should evaluate string up to character)."] |
25["codecs string can contain any subset of optional parameters (should be all or none).", "Errors if codecs string contains unexpected characters (should evaluate string up to character)."] |
41Before Firefox 101,isTypeSupported() ignored codecs parameter options for av01 codecs (treating them as av1 ). |
14["codecs string can contain any subset of optional parameters (should be all or none).", "Errors if codecs string contains unexpected characters (should evaluate string up to character)."] |
13Exposed in Mobile Safari on iPad but not on iPhone. |
1.5["codecs string can contain any subset of optional parameters (should be all or none).", "Errors if codecs string contains unexpected characters (should evaluate string up to character)."] |
readyState |
23 | 12 | 42 | 11Only works on Windows 8+. |
15 | 8 | 4.4.3 | 33 | 41 | 14 | 13Exposed in Mobile Safari on iPad but not on iPhone. |
2.0 |
removeSourceBuffer |
23 | 12 | 42 | 11Only works on Windows 8+. |
15 | 8 | 4.4.3 | 25 | 41 | 14 | 13Exposed in Mobile Safari on iPad but not on iPhone. |
1.5 |
setLiveSeekableRange |
62 | 17 | 50 | No | 49 | 10.1 | 62 | 62 | 50 | 46 | 13Exposed in Mobile Safari on iPad but not on iPhone. |
8.0 |
sourceBuffers |
23 | 12 | 42 | 11Only works on Windows 8+. |
15 | 8 | 4.4.3 | 25 | 41 | 14 | 13Exposed in Mobile Safari on iPad but not on iPhone. |
1.5 |
sourceclose_event |
5331–53Theonsourceclose event handler property is not supported. |
1712–17Theonsourceclose event handler property is not supported. |
8742–87Theonsourceclose event handler property is not supported. |
11Only works on Windows 8+. |
4018–40Theonsourceclose event handler property is not supported. |
10.18–10.1Theonsourceclose event handler property is not supported. |
534.4.3–53Theonsourceclose event handler property is not supported. |
5331–53Theonsourceclose event handler property is not supported. |
8741–87Theonsourceclose event handler property is not supported. |
4118–41Theonsourceclose event handler property is not supported. |
13Exposed in Mobile Safari on iPad but not on iPhone. |
6.02.0–6.0Theonsourceclose event handler property is not supported. |
sourceended_event |
5331–53Theonsourceended event handler property is not supported. |
1712–17Theonsourceended event handler property is not supported. |
42 | 11Only works on Windows 8+. |
4018–40Theonsourceended event handler property is not supported. |
10.18–10.1Theonsourceended event handler property is not supported. |
534.4.3–53Theonsourceclose event handler property is not supported. |
5331–53Theonsourceended event handler property is not supported. |
41 | 4118–41Theonsourceended event handler property is not supported. |
13Exposed in Mobile Safari on iPad but not on iPhone. |
6.02.0–6.0Theonsourceended event handler property is not supported. |
sourceopen_event |
5331–53Theonsourceopen event handler property is not supported. |
1712–17Theonsourceopen event handler property is not supported. |
42 | 11Only works on Windows 8+. |
4018–40Theonsourceopen event handler property is not supported. |
10.18–10.1Theonsourceopen event handler property is not supported. |
534.4.3–53Theonsourceopen event handler property is not supported. |
5331–53Theonsourceopen event handler property is not supported. |
41 | 4118–41Theonsourceopen event handler property is not supported. |
13Exposed in Mobile Safari on iPad but not on iPhone. |
6.02.0–6.0Theonsourceopen event handler property is not supported. |
worker_support |
108 | 108 | No | No | 94 | No | 108 | 108 | No | 73 | No | 21.0 |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/MediaSource