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 inDedicated Web Workers.
Thesourceopen event is fired when aMediaSource object'sreadyState changes to"open".This indicates that theMediaSource is ready to receive data fromSourceBuffer objects. This can occur either when theMediaSource object is first attached to a media element or when thereadyState changes from"ended" back to"open".
Syntax
Use the event name in methods likeaddEventListener(), or set an event handler property.
addEventListener("sourceopen", (event) => {});onsourceopen = (event) => {};Event type
A genericEvent.
Examples
Handling the sourceopen event
This example sets up aMediaSource, connects it to a video element, and listens for thesourceopen event. When the event fires, it adds aSourceBuffer 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 |