appendbuffer.html

<html>
<meta charset=utf-8>
<button id="button">User gesture</button><br>
<video id="video" width="320" height="200" autoplay controls></video><br>
<div id="div"></div>
<script>
const console = { log: msg => div.innerHTML += msg + "<br>" };
  
button.onclick = async () => {
  try {
    const src = new MediaSource();
    video.src = URL.createObjectURL(src);
    await new Promise(r => src.onsourceopen = r);
    const sb = src.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
    sb.appendBuffer(await (await fetchOk('frag_bunny.mp4')).arrayBuffer());
    const p = await new Promise(r => sb.onupdateend = r);
    await video.play();
    await p;
    src.endOfStream();
    console.log(src.readyState); // ended
  } catch (e) {
    console.log(e);
  }
};

async function fetchOk(...args) {
  const res = await fetch(...args);
  if (!res.ok) throw new Error(await res.text());
  return res;
}

</script>
</html>