demo · v138

MediaSource async-during-remove deprecation

Click "try deprecated pattern". The page opens a MediaSource, starts SourceBuffer.remove() and immediately calls appendBuffer() — the long-standing footgun. Pre-138 quietly queued the second op; 138 surfaces a deprecation warning. Then click the replacement pattern to see how to migrate.

checking support…

deprecated (logs warning in 138)

sb.remove(0, 5);
sb.appendBuffer(buf);  // ← throws InvalidStateError in 138+ if remove still running

replacement

sb.remove(0, 5);
await new Promise(r => sb.addEventListener("updateend", r, { once: true }));
sb.appendBuffer(buf);

migration

// Always wait for the previous SourceBuffer op to finish:
async function safeRemoveAndAppend(sb, start, end, buf) {
  if (sb.updating) await wait(sb, "updateend");
  sb.remove(start, end);
  await wait(sb, "updateend");
  sb.appendBuffer(buf);
  await wait(sb, "updateend");
}
function wait(t, e) { return new Promise(r => t.addEventListener(e, r, { once: true })); }

see also