SourceBuffer
============

**`SourceBuffer`** インターフェイスは、`MediaSource` オブジェクトを介して `HTMLMediaElement` に渡されて再生されるメディアのチャンク（大きな塊）を表します。 これは、1 つまたは複数のメディアセグメントで構成できます。

EventTarget

SourceBufferインスタンスプロパティ
-----------

`SourceBuffer.appendWindowEnd`

追加ウィンドウの終わりのタイムスタンプを制御します。

`SourceBuffer.appendWindowStart`

追加ウィンドウ（append window）の始まりのタイムスタンプを制御します。 これは、`SourceBuffer` に追加されるメディアデータをフィルタリングするために使用できるタイムスタンプの範囲です。 この範囲内のタイムスタンプを持つコード化されたメディアフレームは追加されますが、範囲外のものは除外されます。

`SourceBuffer.audioTracks` 読取専用 

`SourceBuffer` 内に現在含まれている音声トラックのリスト。

`SourceBuffer.buffered` 読取専用 

`SourceBuffer` に現在バッファーされている時間範囲を返します。

`SourceBuffer.mode`

`SourceBuffer` 内のメディアセグメントの順序を、任意の順序で追加できるか、または厳密な順序で保持する必要があるかを制御します。

`SourceBuffer.textTracks` 読取専用  
Experimental

`SourceBuffer` 内に現在含まれているテキストトラックのリストです。

`SourceBuffer.timestampOffset`

その後 `SourceBuffer` に追加されるメディアセグメント内のタイムスタンプに適用されるオフセットを制御します。

`SourceBuffer.updating` 読取専用 

論理値で、`SourceBuffer` が現在更新されているかどうか、つまり `SourceBuffer.appendBuffer()` または `SourceBuffer.remove()` の操作が現在進行中かどうかを示します。

`SourceBuffer.videoTracks` 読取専用 

`SourceBuffer` 内に現在含まれている動画トラックのリストです。。

インスタンスメソッド
----------

*親インターフェイスである `EventTarget` からメソッドを継承しています。*

`SourceBuffer.abort()`

現在のセグメントを中止し、セグメントパーサーをリセットします。

`SourceBuffer.appendBuffer()`

`ArrayBuffer`、`TypedArray`、`DataView` のいずれかのオブジェクトからのメディアセグメントデータを `SourceBuffer` に追加します。

`SourceBuffer.appendBufferAsync()` 
Non-standard

Experimental

指定されたバッファーを `SourceBuffer` に非同期的に追加するプロセスを開始します。 バッファが追加されると満たされる `Promise` を返します。

`SourceBuffer.changeType()`

今後の `appendBuffer()` の呼び出しで、新しいデータが準拠することを期待する MIME タイプを変更します。

`SourceBuffer.remove()`

`SourceBuffer` から特定の時間範囲内のメディアセグメントを削除します。

`SourceBuffer.removeAsync()` 
Non-standard

Experimental

指定された範囲のメディアセグメントを `SourceBuffer` から非同期的に削除するプロセスを開始します。 一致するすべてのセグメントが削除されると満たされる `Promise` を返します。

イベント
----

`abort`

`SourceBuffer.appendBuffer()` または `SourceBuffer.appendStream()` が `SourceBuffer.abort()` の呼び出しによって終了するたびに発生します。 `SourceBuffer.updating` は `true` から `false` に変更されます。

`error`

`SourceBuffer.appendBuffer()` 中または `SourceBuffer.appendStream()` 中にエラーが発生するたびに発生します。 `SourceBuffer.updating` は `true` から `false` に変更されます。

`update`

`SourceBuffer.appendBuffer()` メソッドまたは `SourceBuffer.remove()` が完了するたびに発生します。 `SourceBuffer.updating` は `true` から `false` に変更されます。 このイベントは、`onupdateend` の前に発生します。

`updateend`

`SourceBuffer.appendBuffer()` メソッドまたは `SourceBuffer.remove()` が終了するたびに発生します。 このイベントは、`onupdate` の後に発生します。

`updatestart`

`SourceBuffer.updating` の値が `false` から `true` に遷移するたびに発生します。

例
-

次の簡単な例では、動画をチャンクごとに可能な限り高速でロードし、できるだけ早く再生します。 この例は Nick Desaulniers によって作成され、ここでライブで見ることができます（さらに調査するためにソースをダウンロードすることもできます）。


```js
const video = document.querySelector("video");

const assetURL = "frag\_bunny.mp4";
// Blink はコーデックに関して特定する必要がある
// ./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(
    `${mimeCodec} の MIME タイプまたはコーデックには対応していません`,
    mimeCodec,
  );
}

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);
  });
}

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();
}
```

仕様書
---

| Specification |
| --- |
| Media Source Extensions™ # sourcebuffer |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `MediaSource`
* `SourceBufferList`