SourceBuffer

SourceBufferは、MediaSourceオブジェクトに再生可能なメディアセグメントを送信する方法である.

const sourceBuffer = mediaSource.addSourceBuffer(mimeType);

に示すように、addSourceBuffer()メソッドでは、パラメータとしてmimeTypeが使用されて作成される.
このmimeTypeの情報に基づいて復号する.
では、これからは、sourceBufferを使用してMidea Segmentを作成する方法について説明します.

純粋に私なりの方法なので、参考にするのがおすすめです。

mediaSource.addEventListener('sourceopen', sourceOpen);

      function sourceOpen() {
        const sourceBuffer = mediaSource.addSourceBuffer(mimeType);
        // request(sourceBuffer);
        fetch('url', {})
          .then(res => res.arrayBuffer())
          .then(res => sourceBuffer.appendBuffer(res));

全体の流れは上と同じです.
接続media srcおよびmedia tagmediaSourceの場合、sourceopenイベントが発生します.

mediaSource.addEventListener('sourceopen', sourceOpen);

sourceopenの発生時に実行されるsourceOpen()関数を表示します.

  const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);

sourceOpen()関数では、まずsourceBufferオブジェクトを作成します.

fetch('url', {})

その後、fetchを介して必要なセグメントまたはブロックを要求する.

then(res => res.arrayBuffer())

ダウンロードを要求する応答は、arrayBuffer()によってbyte arrayに加工される.

.then(res => sourceBuffer.appendBuffer(res));

appendBuffer()法によりarrayBuffer中のメディアセグメントが抽出され、SourceBufferに提供される.
その後、SourceBufferは、メディアセグメントをメディアソースオブジェクトに渡し、私たちの画面にメディアを出力します.
これは、メディアの再生をいくつかの段階に分けるだけで、各プロセスで詳細な制御を行うことができます.