SourceBuffer
The SourceBuffer
interface represents a chunk of media to be passed into an HTMLMediaElement
and played, via a MediaSource
object. This can be made up of one or several media segments.
Instance properties
SourceBuffer.appendWindowEnd
-
Controls the timestamp for the end of the append window.
SourceBuffer.appendWindowStart
-
Controls the timestamp for the start of the append window. This is a timestamp range that can be used to filter what media data is appended to the
SourceBuffer
. Coded media frames with timestamps within this range will be appended, whereas those outside the range will be filtered out. SourceBuffer.audioTracks
Read only-
A list of the audio tracks currently contained inside the
SourceBuffer
. SourceBuffer.buffered
Read only-
Returns the time ranges that are currently buffered in the
SourceBuffer
. SourceBuffer.mode
-
Controls how the order of media segments in the
SourceBuffer
is handled, in terms of whether they can be appended in any order, or they have to be kept in a strict sequence. SourceBuffer.textTracks
Read only Experimental-
A list of the text tracks currently contained inside the
SourceBuffer
. SourceBuffer.timestampOffset
-
Controls the offset applied to timestamps inside media segments that are subsequently appended to the
SourceBuffer
. SourceBuffer.updating
Read only-
A boolean indicating whether the
SourceBuffer
is currently being updated — i.e. whether anSourceBuffer.appendBuffer()
orSourceBuffer.remove()
operation is currently in progress. SourceBuffer.videoTracks
Read only-
A list of the video tracks currently contained inside the
SourceBuffer
.
Instance methods
Inherits methods from its parent interface, EventTarget
.
SourceBuffer.abort()
-
Aborts the current segment and resets the segment parser.
SourceBuffer.appendBuffer()
-
Appends media segment data from an
ArrayBuffer
, aTypedArray
or aDataView
object to theSourceBuffer
. SourceBuffer.appendBufferAsync()
Non-standard Experimental-
Starts the process of asynchronously appending the specified buffer to the
SourceBuffer
. Returns aPromise
which is fulfilled once the buffer has been appended. SourceBuffer.changeType()
-
Changes the MIME type that future calls to
appendBuffer()
will expect the new data to conform to. SourceBuffer.remove()
-
Removes media segments within a specific time range from the
SourceBuffer
. SourceBuffer.removeAsync()
Non-standard Experimental-
Starts the process of asynchronously removing media segments in the specified range from the
SourceBuffer
. Returns aPromise
which is fulfilled once all matching segments have been removed.
Events
abort
-
Fired whenever
SourceBuffer.appendBuffer()
orSourceBuffer.appendStream()
is ended by a call toSourceBuffer.abort()
.SourceBuffer.updating
changes fromtrue
tofalse
. error
-
Fired whenever an error occurs during
SourceBuffer.appendBuffer()
orSourceBuffer.appendStream()
.SourceBuffer.updating
changes fromtrue
tofalse
. update
-
Fired whenever
SourceBuffer.appendBuffer()
orSourceBuffer.remove()
completes.SourceBuffer.updating
changes fromtrue
tofalse
. This event is fired beforeupdateend
. updateend
-
Fired after
SourceBuffer.appendBuffer()
orSourceBuffer.remove()
ends. This event is fired afterupdate
. updatestart
-
Fired whenever the value of
SourceBuffer.updating
changes fromfalse
totrue
.
Examples
The following simple example loads a video chunk by chunk as fast as possible, playing it as soon as it can. This example was written by Nick Desaulniers and can be viewed live here (you can also download the source for further investigation).
js
const video = document.querySelector("video");
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"';
if ("MediaSource" in window && MediaSource.isTypeSupported(mimeCodec)) {
const 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
const mediaSource = this;
const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
fetchAB(assetURL, (buf) => {
sourceBuffer.addEventListener("updateend", () => {
mediaSource.endOfStream();
video.play();
console.log(mediaSource.readyState); // ended
});
sourceBuffer.appendBuffer(buf);
});
}
function fetchAB(url, cb) {
console.log(url);
const xhr = new XMLHttpRequest();
xhr.open("get", url);
xhr.responseType = "arraybuffer";
xhr.onload = () => {
cb(xhr.response);
};
xhr.send();
}
Specifications
Specification |
---|
Media Source Extensions™ # sourcebuffer |
Browser compatibility
BCD tables only load in the browser