Editorial: modernize example (#339)

marcoscaceres · chrisn · web-flow · commit 6f69e59f2e4e · 2023-12-04T15:40:55.000+11:00
Co-authored-by: Chris Needham &lt;chris.needham@bbc.co.uk&gt;
diff --git a/media-source-respec.html b/media-source-respec.html
@@ -3042,22 +3042,31 @@ <h2><dfn data-export="">Byte Stream Formats</dfn></h2>
 
     <section id="examples">
       <h2>Examples</h2>
-      <p>Example use of the Media Source Extensions</p>
-      <div class="block">
-        <div class="blockContent">
-          <pre class="code">&lt;script&gt;
-  function onSourceOpen(videoTag, e) {
-    var mediaSource = e.target;
+      <p>Example use of the Media Source Extensions.</p>
+      <pre class="example html">
+&lt;video id="v" autoplay&gt;&lt;/video&gt;
+&lt;script&gt;
+const video = document.getElementById("v");
+const mediaSource = new MediaSource();
+mediaSource.addEventListener("sourceopen", onSourceOpen);
+video.src = window.URL.createObjectURL(mediaSource);
+
+async function onSourceOpen(e) {
+  const mediaSource = e.target;
 
-    if (mediaSource.sourceBuffers.length &gt; 0)
-        return;
+  if (mediaSource.sourceBuffers.length > 0) return;
 
-    var sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');
+  const sourceBuffer = mediaSource.addSourceBuffer(
+    'video/webm; codecs="vorbis,vp8"',
+  );
 
-    videoTag.addEventListener('seeking', onSeeking.bind(videoTag, mediaSource));
-    videoTag.addEventListener('progress', onProgress.bind(videoTag, mediaSource));
+  video.addEventListener("seeking", (e) => onSeeking(mediaSource, e.target));
+  video.addEventListener("progress", () =>
+    appendNextMediaSegment(mediaSource),
+  );
 
-    var initSegment = GetInitializationSegment();
+  try {
+    const initSegment = await getInitializationSegment();
 
     if (initSegment == null) {
       // Error fetching the initialization segment. Signal end of stream with an error.
@@ -3066,77 +3075,92 @@ <h2>Examples</h2>
     }
 
     // Append the initialization segment.
-    var firstAppendHandler = function(e) {
-      var sourceBuffer = e.target;
-      sourceBuffer.removeEventListener('updateend', firstAppendHandler);
+    sourceBuffer.addEventListener("updateend", function firstAppendHandler() {
+      sourceBuffer.removeEventListener("updateend", firstAppendHandler);
 
       // Append some initial media data.
       appendNextMediaSegment(mediaSource);
-    };
-    sourceBuffer.addEventListener('updateend', firstAppendHandler);
+    });
+
     sourceBuffer.appendBuffer(initSegment);
+  } catch (error) {
+    // Handle errors that might occur during initialization segment fetching.
+    console.error("Error fetching initialization segment:", error);
+    mediaSource.endOfStream("network");
+  }
+}
+
+async function appendNextMediaSegment(mediaSource) {
+  if (
+    mediaSource.readyState === "closed" ||
+    mediaSource.sourceBuffers[0].updating
+  )
+    return;
+
+  // If we have run out of stream data, then signal end of stream.
+  if (!haveMoreMediaSegments()) {
+    mediaSource.endOfStream();
+    return;
   }
 
-  function appendNextMediaSegment(mediaSource) {
-    if (mediaSource.readyState == "closed")
-      return;
-
-    // If we have run out of stream data, then signal end of stream.
-    if (!HaveMoreMediaSegments()) {
-      mediaSource.endOfStream();
-      return;
-    }
-
-    // Make sure the previous append is not still pending.
-    if (mediaSource.sourceBuffers[0].updating)
-        return;
-
-    var mediaSegment = GetNextMediaSegment();
+  try {
+    const mediaSegment = await getNextMediaSegment();
 
-    if (!mediaSegment) {
-      // Error fetching the next media segment.
-      mediaSource.endOfStream("network");
-      return;
-    }
-
-    // NOTE: If mediaSource.readyState == “ended”, this appendBuffer() call will
+    // NOTE: If mediaSource.readyState == "ended", this appendBuffer() call will
     // cause mediaSource.readyState to transition to "open". The web application
-    // should be prepared to handle multiple “sourceopen” events.
+    // should be prepared to handle multiple "sourceopen" events.
     mediaSource.sourceBuffers[0].appendBuffer(mediaSegment);
   }
-
-  function onSeeking(mediaSource, e) {
-    var video = e.target;
-
-    if (mediaSource.readyState == "open") {
-      // Abort current segment append.
-      mediaSource.sourceBuffers[0].abort();
-    }
-
-    // Notify the media segment loading code to start fetching data at the
-    // new playback position.
-    SeekToMediaSegmentAt(video.currentTime);
-
-    // Append a media segment from the new playback position.
-    appendNextMediaSegment(mediaSource);
+  catch (error) {
+    // Handle errors that might occur during media segment fetching.
+    console.error("Error fetching media segment:", error);
+    mediaSource.endOfStream("network");
   }
+}
 
-  function onProgress(mediaSource, e) {
-    appendNextMediaSegment(mediaSource);
+function onSeeking(mediaSource, video) {
+  if (mediaSource.readyState === "open") {
+    // Abort current segment append.
+    mediaSource.sourceBuffers[0].abort();
   }
-&lt;/script&gt;
-
-&lt;video id="v" autoplay&gt; &lt;/video&gt;
 
-&lt;script&gt;
-  var video = document.getElementById('v');
-  var mediaSource = new MediaSource();
-  mediaSource.addEventListener('sourceopen', onSourceOpen.bind(this, video));
-  video.src = window.URL.createObjectURL(mediaSource);
+  // Notify the media segment loading code to start fetching data at the
+  // new playback position.
+  seekToMediaSegmentAt(video.currentTime);
+
+  // Append a media segment from the new playback position.
+  appendNextMediaSegment(mediaSource);
+}
+
+function onProgress(mediaSource, e) {
+  appendNextMediaSegment(mediaSource);
+}
+
+// Example of async function for getting initialization segment
+async function getInitializationSegment() {
+  // Implement fetching of the initialization segment
+  // This is just a placeholder function
+}
+
+// Example function for checking if there are more media segments
+function haveMoreMediaSegments() {
+  // Implement logic to determine if there are more media segments
+  // This is just a placeholder function
+}
+
+// Example function for getting the next media segment
+async function getNextMediaSegment() {
+  // Implement fetching of the next media segment
+  // This is just a placeholder function
+}
+
+// Example function for seeking to a specific media segment
+function seekToMediaSegmentAt(currentTime) {
+  // Implement seeking logic
+  // This is just a placeholder function
+}
 &lt;/script&gt;
-          </pre>
-        </div>
-      </div>
+      </pre>
     </section>
 
 
