Limited availability
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".
Use the event name in methods like addEventListener(), or set an event handler property.
addEventListener("sourceopen", (event) => {});
onsourceopen = (event) => {};
A generic 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);
});
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4