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
- The value specified for
mimeType
is an empty string rather than a valid MIME type. InvalidStateError
- The
MediaSource
is not in the"open"
readyState
. NotSupportedError
- 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
- 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 | Status | Comment |
---|---|---|
Media Source Extensions The definition of 'addSourceBuffer()' in that specification. |
Recommendation | Initial definition. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
addSourceBuffer | Chrome Full support 23 | Edge Full support 12 | Firefox
Full support
42
| IE
Full support
11
| Opera Full support 15 | Safari Full support 8 | WebView Android Full support 4.4.3 | Chrome Android Full support 25 | Firefox Android Full support 41 | Opera Android Full support 14 | Safari iOS No support No | Samsung Internet Android Full support 1.5 |
Legend
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
- See implementation notes.
- See implementation notes.
- User must explicitly enable this feature.
- User must explicitly enable this feature.