This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The sourceBuffers
read-only property of the MediaSource
interface returns a SourceBufferList
object containing the list of SourceBuffer
objects associated with this MediaSource
.
Syntax
var mySourceBuffers = mediaSource.sourceBuffers;
Value
Example
The following snippet is based on a simple example written by Nick Desaulniers (view the full demo live, or download the source for further investigation.)
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();
console.log(mediaSource.sourceBuffers); // will contain the source buffer that was added above
video.play();
//console.log(mediaSource.readyState); // ended
});
sourceBuffer.appendBuffer(buf);
});
};
...
Specifications
Specification | Status | Comment |
---|---|---|
Media Source Extensions The definition of 'sourceBuffers' 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 | Edge | Firefox Mobile (Gecko) | Firefox OS (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|
Basic support | 4.4.4 | (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+.