MediaSource: addSourceBuffer() method
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Note: This feature is available in Dedicated Web Workers.
The addSourceBuffer() method of the
MediaSource interface creates a new SourceBuffer of the
given MIME type and adds it to the MediaSource's
sourceBuffers list. The new
SourceBuffer is also returned.
Syntax
addSourceBuffer(mimeType)
Parameters
mimeType-
A string specifying the MIME type of the
SourceBufferto create and add to theMediaSource.
Return value
A SourceBuffer object representing the new source buffer that has been
created and added to the media source.
Exceptions
InvalidAccessErrorDOMException-
Thrown if the value specified for
mimeTypeis an empty string rather than a valid MIME type. InvalidStateErrorDOMException-
Thrown if the
MediaSourceis not in the"open"readyState. NotSupportedErrorDOMException-
Thrown if the specified
mimeTypeisn't supported by the user agent, or is not compatible with the MIME types of otherSourceBufferobjects that are already included in the media source'ssourceBufferslist. QuotaExceededError-
Thrown if the user agent can't handle any more
SourceBufferobjects, or creating a newSourceBufferusing the givenmimeTypewould result in an unsupported configuration ofSourceBuffers.
Examples
The following snippet is from an example written by Nick Desaulniers (view the full demo live, or download the source for further investigation). The function getMediaSource(), which is not defined here, returns a MediaSource.
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"';
const mediaSource = getMediaSource();
if ("MediaSource" in window && MediaSource.isTypeSupported(mimeCodec)) {
console.log(mediaSource.readyState); // closed
mediaSource.addEventListener("sourceopen", sourceOpen);
video.src = URL.createObjectURL(mediaSource);
} 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);
});
}
Specifications
| Specification |
|---|
| Media Source Extensions™ # dom-mediasource-addsourcebuffer |
Browser compatibility
Loading…