MENU


Media Source Extensions

Media Source Extensions (MSE) let JavaScript feed bytes to a <video> instead of a URL: the basis of adaptive streaming, ad insertion and live time-shifting. Attach a MediaSource through a blob URL and append fragmented MP4 or WebM segments to a SourceBuffer, one at a time.

Appending an init segment and five media segments with fetch()JavaScript
const ms = new (window.ManagedMediaSource ?? window.MediaSource)();
video.disableRemotePlayback = true;                          // required by ManagedMediaSource
video.src = URL.createObjectURL(ms);
await new Promise((resolve) => ms.addEventListener('sourceopen', resolve, { once: true }));
const buffer = ms.addSourceBuffer('video/mp4; codecs="avc1.4d401f"');
for (const url of [`${base}init.mp4`, ...[0, 1, 2, 3, 4].map((i) => `${base}segment_${i}.m4s`)]) {
  buffer.appendBuffer(await (await fetch(url)).arrayBuffer());
  await new Promise((resolve) => buffer.addEventListener('updateend', resolve, { once: true }));
}
ms.endOfStream();                                            // video.buffered: 0-20.1 s

iPhone Safari 10 offers only ManagedMediaSource (iOS 17.1+), which may evict buffered data to save memory and fires startstreaming and endstreaming to say when to download.