This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
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.
Syntax
var sourceBuffer = mediaSource.addSourceBuffer(mimeType);
Parameters
- mimeType
- The MIME type of the source buffer you want to create.
Returns
A SourceBuffer
object.
Errors
The following errors may be thrown when calling this method.
Error | Explanation |
---|---|
InvalidAccessError |
The supplied mimeType is an empty string. |
InvalidStateError |
MediaSource.readyState is not equal to open . |
NotSupportedError |
The supplied mimeType is not supported by the current browser, or it is not compatible with the mimeType s specified for the SourceBuffer objects that already exist in MediaSource.sourceBuffers . |
QuotaExceededError |
The user agent can't handle any more SourceBuffer objects, or creating a SourceBuffer based on this mimeType would result in an unsupported SourceBuffer configuration. |
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. |
Candidate Recommendation | Initial definition. |
Browser compatibility
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support | 23 | (Yes) | 25.0 (25.0)[1] 42.0 (42.0) |
11[2] | 15 | 8 |
Feature | Android Webview | Chrome for Android | Edge | Firefox Mobile (Gecko) | Firefox OS (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|---|
Basic support | 30 | 30 | (Yes) |
No support |
No support | 11 | 30 | No support |
[1] Available after switching the about:config
preference media.mediasource.enabled
to true
. In addition, support was limited to a whitelist of sites, for example YouTube, Netflix, and other popular streaming sites. The whitelist was removed and Media Source Extensions was enabled by default in 42+ for all sites.
[2] Only works on Windows 8+.