MediaSource: sourceopen event
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Note: This feature is available in Dedicated Web Workers.
The sourceopen event is fired when a MediaSource object's readyState changes to "open".
This indicates that the MediaSource is ready to receive data from SourceBuffer objects. This can occur either when the MediaSource object is first attached to a media element or when the readyState changes from "ended" back to "open".
Syntax
Use the event name in methods like addEventListener(), or set an event handler property.
addEventListener("sourceopen", (event) => {});
onsourceopen = (event) => {};
Event type
A generic Event.
Examples
Handling the sourceopen event
This example sets up a MediaSource, connects it to a video element, and listens for the sourceopen event. When the event fires, it adds a SourceBuffer to handle the video data, fetches the data, appends it to the buffer, and finally revokes the object URL when the source ends.
const video = document.getElementById("myVideo");
const mediaSource = new MediaSource();
video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener("sourceopen", (event) => {
console.log("MediaSource sourceopen:", event);
// Add source buffers and begin adding media data.
const sourceBuffer = mediaSource.addSourceBuffer(
'video/mp4; codecs="avc1.42E01E"',
);
fetch("video-data.mp4")
.then((response) => response.arrayBuffer())
.then((data) => {
sourceBuffer.appendBuffer(data);
});
});
mediaSource.addEventListener("sourceended", () => {
URL.revokeObjectURL(video.src);
});
Specifications
| Specification |
|---|
| Media Source Extensions™ # dfn-sourceopen |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
sourceopen event
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
- No support
- No support
- Has more compatibility info.