From 2b3217f75f030067c78270eba67522d99741664d Mon Sep 17 00:00:00 2001
From: wbamberg <will@bootbonnet.ca>
Date: Mon, 20 Nov 2023 21:13:52 -0800
Subject: [PATCH] De-XHRify SourceBuffer example

---
 files/en-us/web/api/sourcebuffer/index.md | 52 +++++++++++------------
 1 file changed, 24 insertions(+), 28 deletions(-)

diff --git a/files/en-us/web/api/sourcebuffer/index.md b/files/en-us/web/api/sourcebuffer/index.md
index c61aebd05428cb5..688790b19932e94 100644
--- a/files/en-us/web/api/sourcebuffer/index.md
+++ b/files/en-us/web/api/sourcebuffer/index.md
@@ -64,49 +64,45 @@ _Inherits methods from its parent interface, {{domxref("EventTarget")}}._
 
 ## Examples
 
-The following simple example loads a video chunk by chunk as fast as possible, playing it as soon as it can. This example was written by Nick Desaulniers and can be [viewed live here](https://nickdesaulniers.github.io/netfix/demo/bufferAll.html) (you can also [download the source](https://github.com/nickdesaulniers/netfix/blob/gh-pages/demo/bufferAll.html) for further investigation).
+### Loading a video chunk by chunk
+
+The following example loads a video chunk by chunk as fast as possible, playing it as soon as it can.
+
+It is adapted from the demo at <https://github.com/nickdesaulniers/netfix/blob/gh-pages/demo/bufferAll.html>.
 
 ```js
 const video = document.querySelector("video");
 
 const assetURL = "frag_bunny.mp4";
 // Need to be specific for Blink regarding codecs
-// ./mp4info frag_bunny.mp4 | grep Codec
 const mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
 
-if ("MediaSource" in window && MediaSource.isTypeSupported(mimeCodec)) {
-  const mediaSource = new MediaSource();
-  console.log(mediaSource.readyState); // closed
-  video.src = URL.createObjectURL(mediaSource);
-  mediaSource.addEventListener("sourceopen", sourceOpen);
-} else {
-  console.error(`Unsupported MIME type or codec: ${mimeCodec}`);
+function loadVideo() {
+  if (MediaSource.isTypeSupported(mimeCodec)) {
+    const mediaSource = new MediaSource();
+    console.log(mediaSource.readyState); // closed
+    video.src = URL.createObjectURL(mediaSource);
+    mediaSource.addEventListener("sourceopen", sourceOpen);
+  } else {
+    console.error("Unsupported MIME type or codec: ", mimeCodec);
+  }
 }
-
-function sourceOpen() {
+async function sourceOpen() {
   console.log(this.readyState); // open
   const mediaSource = this;
   const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
-  fetchAB(assetURL, (buf) => {
-    sourceBuffer.addEventListener("updateend", () => {
-      mediaSource.endOfStream();
-      video.play();
-      console.log(mediaSource.readyState); // ended
-    });
-    sourceBuffer.appendBuffer(buf);
+  const response = await fetch(assetURL);
+  const buffer = await response.arrayBuffer();
+  sourceBuffer.addEventListener("updateend", () => {
+    mediaSource.endOfStream();
+    video.play();
+    console.log(mediaSource.readyState); // ended
   });
+  sourceBuffer.appendBuffer(buffer);
 }
 
-function fetchAB(url, cb) {
-  console.log(url);
-  const xhr = new XMLHttpRequest();
-  xhr.open("get", url);
-  xhr.responseType = "arraybuffer";
-  xhr.onload = () => {
-    cb(xhr.response);
-  };
-  xhr.send();
-}
+const load = document.querySelector("#load");
+load.addEventListener("click", loadVideo);
 ```
 
 ## Specifications