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.
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.
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 an SourceBuffer.appendBuffer()
or SourceBuffer.remove()
operation is currently in progress.
SourceBuffer.videoTracks
Read only
A list of the video tracks currently contained inside the SourceBuffer
.
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
, a TypedArray
or a DataView
object to the SourceBuffer
.
SourceBuffer.appendBufferAsync()
Non-standard Experimental
Starts the process of asynchronously appending the specified buffer to the SourceBuffer
. Returns a Promise
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 a Promise
which is fulfilled once all matching segments have been removed.
abort
Fired whenever SourceBuffer.appendBuffer()
is ended by a call to SourceBuffer.abort()
. SourceBuffer.updating
changes from true
to false
.
error
Fired whenever an error occurs during SourceBuffer.appendBuffer()
. SourceBuffer.updating
changes from true
to false
.
update
Fired whenever SourceBuffer.appendBuffer()
or SourceBuffer.remove()
completes. SourceBuffer.updating
changes from true
to false
. This event is fired before updateend
.
updateend
Fired after SourceBuffer.appendBuffer()
or SourceBuffer.remove()
ends. This event is fired after update
.
updatestart
Fired whenever the value of SourceBuffer.updating
changes from false
to true
.
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(); }
Specification |
---|
Media Source Extensions™ # sourcebuffer |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
SourceBuffer |
3123–31 | 12 | 42 | 11Only works on Windows 8+. |
1815–18 | 8 | 4.4.34.4–4.4.3 | 3125–31 | 42 | 1814–18 | 13Exposed in Mobile Safari on iPad but not on iPhone. |
3.02.0–3.0 |
abort |
23 | 12 | 42 | 11Only works on Windows 8+. |
15 | 8 | 4.4.3 | 25 | 42 | 14 | 13Exposed in Mobile Safari on iPad but not on iPhone. |
2.0 |
abort_event |
5331–53Theonabort event handler property is not supported. |
1712–17Theonabort event handler property is not supported. |
42 | 11Only works on Windows 8+. |
4018–40Theonabort event handler property is not supported. |
10.18–10.1Theonabort event handler property is not supported. |
534.4.3–53Theonabort event handler property is not supported. |
5331–53Theonabort event handler property is not supported. |
42 | 4118–41Theonabort event handler property is not supported. |
13Exposed in Mobile Safari on iPad but not on iPhone. |
6.02.0–6.0Theonabort event handler property is not supported. |
appendBuffer |
23 | 12 | 42 | 11Only works on Windows 8+. |
15 | 8 | 4.4.3 | 33 | 42 | 14 | 13Exposed in Mobile Safari on iPad but not on iPhone. |
3.0 |
appendBufferAsync |
No | No | 62 | No | No | No | No | No | No | No | No | No |
appendWindowEnd |
23 | 12 | 42 | 11Only works on Windows 8+. |
15 | 8 | 4.4.3 | 33 | 42 | 14 | 13Exposed in Mobile Safari on iPad but not on iPhone. |
3.0 |
appendWindowStart |
23 | 12 | 42 | 11Only works on Windows 8+. |
15 | 8 | 4.4.3 | 33 | 42 | 14 | 13Exposed in Mobile Safari on iPad but not on iPhone. |
3.0 |
audioTracks |
70 | 7912–79 | No | 11Only works on Windows 8+. |
57 | 8 | No | 70 | No | No | 13Exposed in Mobile Safari on iPad but not on iPhone. |
No |
buffered |
23 | 12 | 42 | 11Only works on Windows 8+. |
15 | 8 | 4.4.3 | 33 | 42 | 14 | 13Exposed in Mobile Safari on iPad but not on iPhone. |
3.0 |
changeType |
70 | 79 | 63 | No | 57 | 12.1 | 70 | 70 | 63 | 49 | 13Exposed in Mobile Safari on iPad but not on iPhone. |
10.0 |
error_event |
5331–53Theonerror event handler property is not supported. |
1712–17Theonerror event handler property is not supported. |
42 | 11Only works on Windows 8+. |
4018–40Theonerror event handler property is not supported. |
10.18–10.1Theonerror event handler property is not supported. |
534.4.3–53Theonerror event handler property is not supported. |
5331–53Theonerror event handler property is not supported. |
42 | 4118–41Theonerror event handler property is not supported. |
13Exposed in Mobile Safari on iPad but not on iPhone. |
6.02.0–6.0Theonerror event handler property is not supported. |
mode |
23 | 12 | 42 | 11Only works on Windows 8+. |
15 | 8 | 4.4.3 | 33 | 42 | 14 | 13Exposed in Mobile Safari on iPad but not on iPhone. |
3.0 |
remove |
23 | 12 | 42 | 11Only works on Windows 8+. |
15 | 8 | 4.4.3 | 33 | 42 | 14 | 13Exposed in Mobile Safari on iPad but not on iPhone. |
3.0 |
removeAsync |
No | No | 62 | No | No | No | No | No | No | No | No | No |
textTracks |
No | No | No | No | No | 8 | No | No | No | No | 13Exposed in Mobile Safari on iPad but not on iPhone. |
No |
timestampOffset |
23 | 12 | 42 | 11Only works on Windows 8+. |
15 | 8 | 4.4.3 | 33 | 42 | 14 | 13Exposed in Mobile Safari on iPad but not on iPhone. |
3.0 |
update_event |
5331–53Theonupdate event handler property is not supported. |
1712–17Theonupdate event handler property is not supported. |
42 | 11Only works on Windows 8+. |
4018–40Theonupdate event handler property is not supported. |
10.18–10.1Theonupdate event handler property is not supported. |
534.4.3–53Theonupdate event handler property is not supported. |
5331–53Theonupdate event handler property is not supported. |
42 | 4118–41Theonupdate event handler property is not supported. |
13Exposed in Mobile Safari on iPad but not on iPhone. |
6.02.0–6.0Theonupdate event handler property is not supported. |
updateend_event |
5331–53Theonupdateend event handler property is not supported. |
1712–17Theonupdateend event handler property is not supported. |
42 | 11Only works on Windows 8+. |
4018–40Theonupdateend event handler property is not supported. |
10.18–10.1Theonupdateend event handler property is not supported. |
534.4.3–53Theonupdateend event handler property is not supported. |
5331–53Theonupdateend event handler property is not supported. |
42 | 4118–41Theonupdateend event handler property is not supported. |
13Exposed in Mobile Safari on iPad but not on iPhone. |
6.02.0–6.0Theonupdateend event handler property is not supported. |
updatestart_event |
5331–53Theonupdatestart event handler property is not supported. |
1712–17Theonupdatestart event handler property is not supported. |
42 | 11Only works on Windows 8+. |
4018–40Theonupdatestart event handler property is not supported. |
10.18–10.1Theonupdatestart event handler property is not supported. |
534.4.3–53Theonupdatestart event handler property is not supported. |
5331–53Theonupdatestart event handler property is not supported. |
42 | 4118–41Theonupdatestart event handler property is not supported. |
13Exposed in Mobile Safari on iPad but not on iPhone. |
6.02.0–6.0Theonupdatestart event handler property is not supported. |
updating |
23 | 12 | 42 | 11Only works on Windows 8+. |
15 | 8 | 4.4.3 | 33 | 42 | 14 | 13Exposed in Mobile Safari on iPad but not on iPhone. |
3.0 |
videoTracks |
70 | 7912–79 | No | 11Only works on Windows 8+. |
57 | 8 | No | 70 | No | No | 13Exposed in Mobile Safari on iPad but not on iPhone. |
No |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/SourceBuffer