MediaSource.addSourceBuffer()
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
var sourceBuffer = mediaSource.addSourceBuffer(mimeType);
Parameters
mimeType
-
A
DOMString
specifying the MIME type of theSourceBuffer
to 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
InvalidAccessError
DOMException
-
Thrown if the value specified for
mimeType
is an empty string rather than a valid MIME type. InvalidStateError
DOMException
-
Thrown if the
MediaSource
is not in the"open"
readyState
. NotSupportedError
DOMException
-
Thrown if the specified
mimeType
isn't supported by the user agent, or is not compatible with the MIME types of otherSourceBuffer
objects that are already included in the media source'ssourceBuffers
list. QuotaExceededError
DOMException
-
Thrown if the user agent can't handle any more
SourceBuffer
objects, or creating a newSourceBuffer
using the givenmimeType
would result in an unsupported configuration ofSourceBuffer
s.
Example
The following snippet is from a simple example written by Nick Desaulniers (view the full demo live, or download the source for further investigation.)
var assetURL = 'frag_bunny.mp4';
// Need to be specific for Blink regarding codecs
// ./mp4info frag_bunny.mp4 | grep Codec
var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
var mediaSource = new MediaSource;
//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
var mediaSource = this;
var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
fetchAB(assetURL, function (buf) {
sourceBuffer.addEventListener('updateend', function (_) {
mediaSource.endOfStream();
video.play();
//console.log(mediaSource.readyState); // ended
});
sourceBuffer.appendBuffer(buf);
});
};
Specifications
Specification |
---|
Media Source Extensions™ # dom-mediasource-addsourcebuffer |
Browser compatibility
BCD tables only load in the browser