关于Safari中ManagedMediaSource API无法正常渲染内容的问询

主流浏览器均支持window.MediaSource API，但苹果出于续航考虑，从未在移动设备中采用该API。2023年苹果发布了window.ManagedMediaSource规范，该API与MediaSource接口一致，但赋予用户代理更多控制权以降低功耗。根据caniuse显示，该API已在iOS和桌面端Safari中上线。

然而，我发现ManagedMediaSource API在Safari 18.1.11及MobileSafari 18.0.1中并未实际可用且无法正常工作。以下是我的测试示例：

使用MediaSource的index.html（可正常运行） #

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>MSE Demo</title>
  </head>
  <body>
    <h1>MSE Demo</h1>
    <div>
      <video controls width="80%"></video>
    </div>

    <script type="text/javascript">
      (function () {
        var baseUrl =
          "https://bitdash-a.akamaihd.net/content/MI201109210084_1/video/720_2400000/dash/";
        var initUrl = baseUrl + "init.mp4";
        var templateUrl = baseUrl + "segment_$Number$.m4s";
        var sourceBuffer;
        var index = 0;
        var numberOfChunks = 52;
        var video = document.querySelector("video");

        if (!window.MediaSource) {
          console.error("No Media Source API available");
          return;
        }

        var ms = new MediaSource();
        video.src = window.URL.createObjectURL(ms);
        ms.addEventListener("sourceopen", onMediaSourceOpen);

        function onMediaSourceOpen() {
          sourceBuffer = ms.addSourceBuffer('video/mp4; codecs="avc1.4d401f"');
          sourceBuffer.addEventListener("updateend", nextSegment);

          GET(initUrl, appendToBuffer);

          video.play();
        }

        function nextSegment() {
          var url = templateUrl.replace("$Number$", index);
          GET(url, appendToBuffer);
          index++;
          if (index > numberOfChunks) {
            sourceBuffer.removeEventListener("updateend", nextSegment);
          }
        }

        function appendToBuffer(videoChunk) {
          if (videoChunk) {
            sourceBuffer.appendBuffer(new Uint8Array(videoChunk));
          }
        }

        function GET(url, callback) {
          var xhr = new XMLHttpRequest();
          xhr.open("GET", url);
          xhr.responseType = "arraybuffer";

          xhr.onload = function (e) {
            if (xhr.status != 200) {
              console.warn(
                "Unexpected status code " + xhr.status + " for " + url,
              );
              return false;
            }
            callback(xhr.response);
          };

          xhr.send();
        }
      })();
    </script>
  </body>
</html>

使用ManagedMediaSource的index.html（无法运行） #

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>MSE Demo</title>
  </head>
  <body>
    <h1>MSE Demo</h1>
    <div>
      <video controls width="80%"></video>
    </div>

    <script type="text/javascript">
      (function () {
        var baseUrl =
          "https://bitdash-a.akamaihd.net/content/MI201109210084_1/video/720_2400000/dash/";
        var initUrl = baseUrl + "init.mp4";
        var templateUrl = baseUrl + "segment_$Number$.m4s";
        var sourceBuffer;
        var index = 0;
        var numberOfChunks = 52;
        var video = document.querySelector("video");

        if (!window.ManagedMediaSource) {
          console.error("No Media Source API available");
          return;
        }

        var ms = new ManagedMediaSource();
        video.src = window.URL.createObjectURL(ms);
        ms.addEventListener("sourceopen", onMediaSourceOpen);

        function onMediaSourceOpen() {
          sourceBuffer = ms.addSourceBuffer('video/mp4; codecs="avc1.4d401f"');
          sourceBuffer.addEventListener("updateend", nextSegment);

          GET(initUrl, appendToBuffer);

          video.play();
        }

        function nextSegment() {
          var url = templateUrl.replace("$Number$", index);
          GET(url, appendToBuffer);
          index++;
          if (index > numberOfChunks) {
            sourceBuffer.removeEventListener("updateend", nextSegment);
          }
        }

        function appendToBuffer(videoChunk) {
          if (videoChunk) {
            sourceBuffer.appendBuffer(new Uint8Array(videoChunk));
          }
        }

        function GET(url, callback) {
          var xhr = new XMLHttpRequest();
          xhr.open("GET", url);
          xhr.responseType = "arraybuffer";

          xhr.onload = function (e) {
            if (xhr.status != 200) {
              console.warn(
                "Unexpected status code " + xhr.status + " for " + url,
              );
              return false;
            }
            callback(xhr.response);
          };

          xhr.send();
        }
      })();
    </script>
  </body>
</html>

恳请各位帮忙澄清该问题的原因，或是指出我可能遗漏的要点！🙏

内容的提问来源于stack exchange，提问作者Dan Rasmuson