Media Source Extensions™

Media Source Extensions™
Media Source Extensions™
W3C Editor's Draft
04 November 2025
More details about this document
This version:
Latest published version:
Latest editor's draft:
History:
Commit history
Latest Recommendation:
Editors:
Jean-Yves Avenard
Apple Inc.
Mark Watson
Netflix Inc.
Former editors:
Matthew Wolenetz
W3C Invited Expert
) - Until
01 February 2024
Jerry Smith
Microsoft Corporation
) - Until
01 September 2017
Aaron Colwell
Google Inc.
) - Until
01 April 2015
Adrian Bateman
Microsoft Corporation
) - Until
01 April 2015
Feedback:
GitHub w3c/media-source
pull requests
new issue
open issues
public-media-wg@w3.org
with subject line
[media-source-2]
… message topic …
archives
Browser support:
caniuse.com
2025
World Wide Web Consortium
W3C
liability
trademark
and
permissive document license
rules apply.
Abstract
This specification extends
HTMLMediaElement
HTML
] to allow JavaScript to generate
media streams for playback. Allowing JavaScript to generate streams facilitates a variety of
use cases like adaptive streaming and time shifting live streams.
Status of This Document
This section describes the status of this
document at the time of its publication. A list of current
W3C
publications and the latest revision of this technical report can be found
in the
W3C
standards and drafts index
On top of editorial updates, substantive changes since publication as a
W3C
Recommendation
in
November 2016
are:
the addition of a
changeType
()
method to switch among codecs or
bytestreams
the possibility to create and use
MediaSource
objects off the main thread in
dedicated workers
the removal of the
createObjectURL
()
extension to the
URL
object following
its integration in the File API [
FILEAPI
the addition of
ManagedMediaSource
ManagedSourceBuffer
, and
BufferedChangeEvent
interfaces supporting power-efficient streaming and active buffered
media cleanup by the user agent
For a full list of changes made since the previous version, see the
commits
The working group maintains
a list of
all bug reports that the editors have not yet tried to address
Implementors should be aware that this specification is not stable.
Implementors
who are not taking part in the discussions are likely to find the specification changing
out from under them in incompatible ways.
Vendors interested in implementing this
specification before it eventually reaches the Candidate Recommendation stage should track
the
GitHub repository
and take part in
the discussions.
This document was published by the
Media Working Group
as
an Editor's Draft.
Publication as an Editor's Draft does not
imply endorsement by
W3C
and its Members.
This is a draft document and may be updated, replaced, or obsoleted by other
documents at any time. It is inappropriate to cite this document as other
than a work in progress.
This document was produced by a group
operating under the
W3C
Patent
Policy
W3C
maintains a
public list of any patent disclosures
made in connection with the deliverables of
the group; that page also includes
instructions for disclosing a patent. An individual who has actual
knowledge of a patent that the individual believes contains
Essential Claim(s)
must disclose the information in accordance with
section 6 of the
W3C
Patent Policy
This document is governed by the
18 August 2025
W3C
Process Document
1.
Introduction
This section is non-normative.
This specification allows JavaScript to dynamically construct media streams for

video.
addEventListener
"seeking"
) =>
onSeeking
(mediaSource, e.
target
));
video.
addEventListener
"progress"
() =>
appendNextMediaSegment
(mediaSource),
);
try
const
initSegment =
await
getInitializationSegment
();
if
(initSegment ==
null
) {
// Error fetching the initialization segment. Signal end of stream with an error.
mediaSource.
endOfStream
"network"
);
return
// Append the initialization segment.
sourceBuffer.
addEventListener
"updateend"
function
firstAppendHandler
) {
sourceBuffer.
removeEventListener
"updateend"
, firstAppendHandler);
// Append some initial media data.
appendNextMediaSegment
(mediaSource);
});

sourceBuffer.
appendBuffer
(initSegment);
catch
(error) {
// Handle errors that might occur during initialization segment fetching.
console
error
"Error fetching initialization segment:"
, error);
mediaSource.
endOfStream
"network"
);
async
function
appendNextMediaSegment
mediaSource
) {
if
mediaSource.
readyState
===
"closed"
||
mediaSource.
sourceBuffers
].
updating
return
// If we have run out of stream data, then signal end of stream.
if
(!
haveMoreMediaSegments
()) {
mediaSource.
endOfStream
();
return
try
const
mediaSegment =
await
getNextMediaSegment
();
//
NOTE:
If mediaSource.readyState == "ended", this appendBuffer() call will
// cause mediaSource.readyState to transition to "open". The web application
// should be prepared to handle multiple "sourceopen" events.
mediaSource.
sourceBuffers
].
appendBuffer
(mediaSegment);
catch
(error) {
// Handle errors that might occur during media segment fetching.
console
error
"Error fetching media segment:"
, error);
mediaSource.
endOfStream
"network"
);
function
onSeeking
mediaSource, video
) {
if
(mediaSource.
readyState
===
"open"
) {
// Abort current segment append.
mediaSource.
sourceBuffers
].
abort
();
// Notify the media segment loading code to start fetching data at the
// new playback position.
seekToMediaSegmentAt
(video.
currentTime
);
// Append a media segment from the new playback position.
appendNextMediaSegment
(mediaSource);
function
onProgress
mediaSource, e
) {
appendNextMediaSegment
(mediaSource);
// Example of async function for getting initialization segment
async
function
getInitializationSegment
) {
// Implement fetching of the initialization segment
// This is just a placeholder function
// Example function for checking if there are more media segments
function
haveMoreMediaSegments
) {
// Implement logic to determine if there are more media segments
// This is just a placeholder function
// Example function for getting the next media segment
async
function
getNextMediaSegment
) {
// Implement fetching of the next media segment
// This is just a placeholder function
// Example function for seeking to a specific media segment
function
seekToMediaSegmentAt
currentTime
) {
// Implement seeking logic
// This is just a placeholder function
script
16.2
Using a Managed Media Source
Example
script
async
function
setUpVideoStream
) {
// Specific video format and codec
const
mediaType =
'video/mp4; codecs="mp4a.40.2,avc1.4d4015"'
// Check if the type of video format / codec is supported.
if
(!
window
ManagedMediaSource
?.
isTypeSupported
(mediaType)) {
return
// Not supported, do something else.
// Set up video and its managed source.
const
video =
document
createElement
"video"
);
const
source =
new
ManagedMediaSource
();

video.
controls
true
await
new
Promise
resolve
) =>
video.
src
URL
createObjectURL
(source);
source.
addEventListener
"sourceopen"
, resolve, {
once
true
});
document
body
appendChild
(video);
});
const
sourceBuffer = source.
addSourceBuffer
(mediaType);
// Set up the event handlers
sourceBuffer.
onbufferedchange
) =>
console
log
"onbufferedchange event fired."
);
console
log
`Added Ranges:
${timeRangesToString(e.addedRanges)}
);
console
log
`Removed Ranges:
${timeRangesToString(e.removedRanges)}
);
};

source.
onstartstreaming
async
() => {
const
response =
await
fetch
"./videos/bipbop.mp4"
);
const
buffer =
await
response.
arrayBuffer
();
await
new
Promise
resolve
) =>
sourceBuffer.
addEventListener
"updateend"
, resolve, {
once
true
});
sourceBuffer.
appendBuffer
(buffer);
});
};