SourceBuffer

This translation is incomplete. この記事の翻訳にご協力ください

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

プロパティ

SourceBuffer.appendWindowEnd
追加ウィンドウの終わりのタイムスタンプを制御します。
SourceBuffer.appendWindowStart
追加ウィンドウ(append window)の始まりのタイムスタンプを制御します。 これは、SourceBuffer に追加されるメディアデータをフィルタリングするために使用できるタイムスタンプの範囲です。 この範囲内のタイムスタンプを持つコード化されたメディアフレームは追加されますが、範囲外のものは除外されます。
SourceBuffer.audioTracks 読取専用
SourceBuffer 内に現在含まれている音声トラックのリスト。
SourceBuffer.buffered 読取専用
SourceBuffer に現在バッファされている時間範囲を返します。
SourceBuffer.mode
SourceBuffer 内のメディアセグメントの順序を、任意の順序で追加できるか、または厳密な順序で保持する必要があるかを制御します。
SourceBuffer.textTracks 読取専用
SourceBuffer 内に現在含まれているテキストトラックのリスト。
SourceBuffer.timestampOffset
その後 SourceBuffer に追加されるメディアセグメント内のタイムスタンプに適用されるオフセットを制御します。
SourceBuffer.trackDefaults
SourceBuffer に追加されるメディアの初期化セグメント(initialization segment)で、種類、ラベル、言語情報が利用できない場合に使用するデフォルト値を指定します。
SourceBuffer.updating 読取専用
SourceBuffer が現在更新されているかどうか、つまり SourceBuffer.appendBuffer()SourceBuffer.appendStream()、または SourceBuffer.remove() の操作が現在進行中かどうかを示すブール値。
SourceBuffer.videoTracks 読取専用
SourceBuffer 内に現在含まれている動画トラックのリスト。

イベントハンドラ

SourceBuffer.onabort
SourceBuffer.appendBuffer() または SourceBuffer.appendStream()SourceBuffer.abort() の呼び出しによって終了するたびに発生します。 SourceBuffer.updatingtrue から false に変更されます。
SourceBuffer.onerror
SourceBuffer.appendBuffer() 中または SourceBuffer.appendStream() 中にエラーが発生するたびに発生します。 SourceBuffer.updatingtrue から false に変更されます。
SourceBuffer.onupdate
SourceBuffer.appendBuffer() メソッドまたは SourceBuffer.remove() が完了するたびに発生します。 SourceBuffer.updatingtrue から false に変更されます。 このイベントは、onupdateend の前に発生します。
SourceBuffer.onupdateend
SourceBuffer.appendBuffer() メソッドまたは SourceBuffer.remove() が終了するたびに発生します。 このイベントは、onupdate の後に発生します。
SourceBuffer.onupdatestart
SourceBuffer.updating の値が false から true に遷移するたびに発生します。

メソッド

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

SourceBuffer.abort()
現在のセグメントを中止し、セグメントパーサーをリセットします。
SourceBuffer.appendBuffer()
ArrayBuffer または ArrayBufferView オブジェクトからのメディアセグメントデータを SourceBuffer に追加します。
SourceBuffer.appendBufferAsync()
指定されたバッファを SourceBuffer に非同期的に追加するプロセスを開始します。 バッファが追加されると満たされる Promise を返します。
SourceBuffer.appendStream()
ReadableStream オブジェクトからのメディアセグメントデータを SourceBuffer に追加します。
SourceBuffer.changeType()
今後の appendBuffer() の呼び出しで、新しいデータが準拠することを期待する MIME タイプを変更します。
SourceBuffer.remove()
SourceBuffer から特定の時間範囲内のメディアセグメントを削除します。
SourceBuffer.removeAsync()
指定された範囲のメディアセグメントを SourceBuffer から非同期的に削除するプロセスを開始します。 一致するすべてのセグメントが削除されると満たされる Promise を返します。

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

var video = document.querySelector('video');

var assetURL = 'frag_bunny.mp4';
// Blink はコーデックに関して特定する必要がある
// ./mp4info frag_bunny.mp4 | grep Codec
var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';

if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
  var mediaSource = new MediaSource();
  //console.log(mediaSource.readyState); // closed
  video.src = URL.createObjectURL(mediaSource);
  mediaSource.addEventListener('sourceopen', sourceOpen);
} else {
  console.error('サポートされていない MIME タイプまたはコーデック: ', mimeCodec);
}

function sourceOpen (_) {
  //console.log(this.readyState); // open
  var mediaSource = this;
  var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
  fetchAB(assetURL, function (buf) {
    sourceBuffer.addEventListener('updateend', function (_) {
      mediaSource.endOfStream();
      video.play();
      //console.log(mediaSource.readyState); // ended
    });
    sourceBuffer.appendBuffer(buf);
  });
}

function fetchAB (url, cb) {
  console.log(url);
  var xhr = new XMLHttpRequest;
  xhr.open('get', url);
  xhr.responseType = 'arraybuffer';
  xhr.onload = function () {
    cb(xhr.response);
  };
  xhr.send();
}

仕様

仕様 状態 コメント
Media Source Extensions
SourceBuffer の定義
勧告 初期定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
SourceBufferChrome 完全対応 31
完全対応 31
未対応 23 — 31
接頭辞付き
接頭辞付き WebKit のベンダー接頭辞が必要
Edge 完全対応 ありFirefox 完全対応 42
完全対応 42
未対応 25 — 42
補足 無効
補足 Limited support to a whitelist of sites, for example YouTube, Netflix, and other popular streaming sites. The whitelist was removed when Media Source Extensions was enabled by default in Firefox 42.
無効 From version 25 until version 42 (exclusive): this feature is behind the media.mediasource.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 完全対応 11
補足
完全対応 11
補足
補足 Only works on Windows 8+.
Opera 完全対応 18
完全対応 18
未対応 15 — 18
接頭辞付き
接頭辞付き WebKit のベンダー接頭辞が必要
Safari 完全対応 8WebView Android 完全対応 4.4.3Chrome Android 完全対応 31
完全対応 31
未対応 25 — 31
接頭辞付き
接頭辞付き WebKit のベンダー接頭辞が必要
Firefox Android 未対応 なしOpera Android 完全対応 18
完全対応 18
未対応 14 — 18
接頭辞付き
接頭辞付き WebKit のベンダー接頭辞が必要
Safari iOS 未対応 なしSamsung Internet Android 完全対応 3.0
完全対応 3.0
未対応 2.0 — 3.0
接頭辞付き
接頭辞付き WebKit のベンダー接頭辞が必要
abortChrome 完全対応 23Edge 完全対応 12Firefox 完全対応 42
完全対応 42
未対応 25 — 42
補足 無効
補足 Limited support to a whitelist of sites, for example YouTube, Netflix, and other popular streaming sites. The whitelist was removed when Media Source Extensions was enabled by default in Firefox 42.
無効 From version 25 until version 42 (exclusive): this feature is behind the media.mediasource.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 完全対応 11
補足
完全対応 11
補足
補足 Only works on Windows 8+.
Opera 完全対応 15Safari 完全対応 8WebView Android 完全対応 4.4.3Chrome Android 完全対応 25Firefox Android 未対応 なしOpera Android 完全対応 14Safari iOS 未対応 なしSamsung Internet Android 完全対応 2.0
appendBufferChrome 完全対応 23Edge 完全対応 12Firefox 完全対応 42
完全対応 42
未対応 25 — 42
補足 無効
補足 Limited support to a whitelist of sites, for example YouTube, Netflix, and other popular streaming sites. The whitelist was removed when Media Source Extensions was enabled by default in Firefox 42.
無効 From version 25 until version 42 (exclusive): this feature is behind the media.mediasource.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 完全対応 11
補足
完全対応 11
補足
補足 Only works on Windows 8+.
Opera 完全対応 15Safari 完全対応 8WebView Android 完全対応 4.4.3Chrome Android 完全対応 33Firefox Android 未対応 なしOpera Android 完全対応 14Safari iOS 未対応 なしSamsung Internet Android 完全対応 3.0
appendBufferAsyncChrome 未対応 なしEdge 未対応 なしFirefox 完全対応 62
無効
完全対応 62
無効
無効 From version 62: this feature is behind the media.mediasource.experimental.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 完全対応 ありFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 完全対応 あり
appendStreamChrome 未対応 なしEdge 完全対応 12Firefox 未対応 なしIE ? Opera 未対応 なしSafari ? WebView Android ? Chrome Android ? Firefox Android 未対応 なしOpera Android ? Safari iOS 未対応 なしSamsung Internet Android ?
appendWindowEndChrome 完全対応 23Edge 完全対応 12Firefox 完全対応 42
完全対応 42
未対応 25 — 42
補足 無効
補足 Limited support to a whitelist of sites, for example YouTube, Netflix, and other popular streaming sites. The whitelist was removed when Media Source Extensions was enabled by default in Firefox 42.
無効 From version 25 until version 42 (exclusive): this feature is behind the media.mediasource.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 完全対応 11
補足
完全対応 11
補足
補足 Only works on Windows 8+.
Opera 完全対応 15Safari 完全対応 8WebView Android 完全対応 4.4.3Chrome Android 完全対応 33Firefox Android 未対応 なしOpera Android 完全対応 14Safari iOS 未対応 なしSamsung Internet Android 完全対応 3.0
appendWindowStartChrome 完全対応 23Edge 完全対応 12Firefox 完全対応 42
完全対応 42
未対応 25 — 42
補足 無効
補足 Limited support to a whitelist of sites, for example YouTube, Netflix, and other popular streaming sites. The whitelist was removed when Media Source Extensions was enabled by default in Firefox 42.
無効 From version 25 until version 42 (exclusive): this feature is behind the media.mediasource.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 完全対応 11
補足
完全対応 11
補足
補足 Only works on Windows 8+.
Opera 完全対応 15Safari 完全対応 8WebView Android 完全対応 4.4.3Chrome Android 完全対応 33Firefox Android 未対応 なしOpera Android 完全対応 14Safari iOS 未対応 なしSamsung Internet Android 完全対応 3.0
audioTracksChrome 完全対応 23Edge 完全対応 12Firefox 完全対応 42
完全対応 42
未対応 25 — 42
補足 無効
補足 Limited support to a whitelist of sites, for example YouTube, Netflix, and other popular streaming sites. The whitelist was removed when Media Source Extensions was enabled by default in Firefox 42.
無効 From version 25 until version 42 (exclusive): this feature is behind the media.mediasource.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 完全対応 11
補足
完全対応 11
補足
補足 Only works on Windows 8+.
Opera 完全対応 15Safari 完全対応 8WebView Android 完全対応 4.4.3Chrome Android 完全対応 33Firefox Android 未対応 なしOpera Android 完全対応 14Safari iOS 未対応 なしSamsung Internet Android 完全対応 3.0
bufferedChrome 完全対応 23Edge 完全対応 12Firefox 完全対応 42
完全対応 42
未対応 25 — 42
補足 無効
補足 Limited support to a whitelist of sites, for example YouTube, Netflix, and other popular streaming sites. The whitelist was removed when Media Source Extensions was enabled by default in Firefox 42.
無効 From version 25 until version 42 (exclusive): this feature is behind the media.mediasource.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 完全対応 11
補足
完全対応 11
補足
補足 Only works on Windows 8+.
Opera 完全対応 15Safari 完全対応 8WebView Android 完全対応 4.4.3Chrome Android 完全対応 33Firefox Android 未対応 なしOpera Android 完全対応 14Safari iOS 未対応 なしSamsung Internet Android 完全対応 3.0
changeTypeChrome 完全対応 70
完全対応 70
未対応 69 — 70
無効
無効 From version 69 until version 70 (exclusive): this feature is behind the MediaSourceExperimental preference (needs to be set to true). To change preferences in Chrome, visit chrome://flags.
Edge 未対応 なしFirefox 完全対応 63
完全対応 63
未対応 61 — 63
無効
無効 From version 61 until version 63 (exclusive): this feature is behind the media.mediasource.experimental.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE ? Opera ? Safari ? WebView Android 完全対応 70Chrome Android 完全対応 70
完全対応 70
未対応 69 — 70
無効
無効 From version 69 until version 70 (exclusive): this feature is behind the MediaSourceExperimental preference (needs to be set to true). To change preferences in Chrome, visit chrome://flags.
Firefox Android 未対応 なしOpera Android ? Safari iOS 未対応 なしSamsung Internet Android 完全対応 10.0
modeChrome 完全対応 23Edge 完全対応 12Firefox 完全対応 42
完全対応 42
未対応 25 — 42
補足 無効
補足 Limited support to a whitelist of sites, for example YouTube, Netflix, and other popular streaming sites. The whitelist was removed when Media Source Extensions was enabled by default in Firefox 42.
無効 From version 25 until version 42 (exclusive): this feature is behind the media.mediasource.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 完全対応 11
補足
完全対応 11
補足
補足 Only works on Windows 8+.
Opera 完全対応 15Safari 完全対応 8WebView Android 完全対応 4.4.3Chrome Android 完全対応 33Firefox Android 未対応 なしOpera Android 完全対応 14Safari iOS 未対応 なしSamsung Internet Android 完全対応 3.0
onabortChrome 完全対応 53Edge 完全対応 17Firefox 完全対応 42
完全対応 42
未対応 25 — 42
補足 無効
補足 Limited support to a whitelist of sites, for example YouTube, Netflix, and other popular streaming sites. The whitelist was removed when Media Source Extensions was enabled by default in Firefox 42.
無効 From version 25 until version 42 (exclusive): this feature is behind the media.mediasource.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 完全対応 11
補足
完全対応 11
補足
補足 Only works on Windows 8+.
Opera 完全対応 15Safari 完全対応 8WebView Android 完全対応 4.4.3Chrome Android ? Firefox Android 未対応 なしOpera Android 完全対応 14Safari iOS 未対応 なしSamsung Internet Android ?
onerrorChrome 完全対応 53Edge 完全対応 17Firefox 完全対応 42
完全対応 42
未対応 25 — 42
補足 無効
補足 Limited support to a whitelist of sites, for example YouTube, Netflix, and other popular streaming sites. The whitelist was removed when Media Source Extensions was enabled by default in Firefox 42.
無効 From version 25 until version 42 (exclusive): this feature is behind the media.mediasource.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 完全対応 11
補足
完全対応 11
補足
補足 Only works on Windows 8+.
Opera 完全対応 15Safari 完全対応 8WebView Android 完全対応 4.4.3Chrome Android ? Firefox Android 未対応 なしOpera Android 完全対応 14Safari iOS 未対応 なしSamsung Internet Android ?
onupdateChrome 完全対応 53Edge 完全対応 17Firefox 完全対応 42
完全対応 42
未対応 25 — 42
補足 無効
補足 Limited support to a whitelist of sites, for example YouTube, Netflix, and other popular streaming sites. The whitelist was removed when Media Source Extensions was enabled by default in Firefox 42.
無効 From version 25 until version 42 (exclusive): this feature is behind the media.mediasource.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 完全対応 11
補足
完全対応 11
補足
補足 Only works on Windows 8+.
Opera 完全対応 15Safari 完全対応 8WebView Android 完全対応 4.4.3Chrome Android ? Firefox Android 未対応 なしOpera Android 完全対応 14Safari iOS 未対応 なしSamsung Internet Android ?
onupdateendChrome 完全対応 53Edge 完全対応 17Firefox 完全対応 42
完全対応 42
未対応 25 — 42
補足 無効
補足 Limited support to a whitelist of sites, for example YouTube, Netflix, and other popular streaming sites. The whitelist was removed when Media Source Extensions was enabled by default in Firefox 42.
無効 From version 25 until version 42 (exclusive): this feature is behind the media.mediasource.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 完全対応 11
補足
完全対応 11
補足
補足 Only works on Windows 8+.
Opera 完全対応 15Safari 完全対応 8WebView Android 完全対応 4.4.3Chrome Android ? Firefox Android 未対応 なしOpera Android 完全対応 14Safari iOS 未対応 なしSamsung Internet Android ?
onupdatestartChrome 完全対応 53Edge 完全対応 17Firefox 完全対応 42
完全対応 42
未対応 25 — 42
補足 無効
補足 Limited support to a whitelist of sites, for example YouTube, Netflix, and other popular streaming sites. The whitelist was removed when Media Source Extensions was enabled by default in Firefox 42.
無効 From version 25 until version 42 (exclusive): this feature is behind the media.mediasource.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 完全対応 11
補足
完全対応 11
補足
補足 Only works on Windows 8+.
Opera 完全対応 15Safari 完全対応 8WebView Android 完全対応 4.4.3Chrome Android ? Firefox Android 未対応 なしOpera Android 完全対応 14Safari iOS 未対応 なしSamsung Internet Android ?
removeChrome 完全対応 23Edge 完全対応 12Firefox 完全対応 42
完全対応 42
未対応 25 — 42
補足 無効
補足 Limited support to a whitelist of sites, for example YouTube, Netflix, and other popular streaming sites. The whitelist was removed when Media Source Extensions was enabled by default in Firefox 42.
無効 From version 25 until version 42 (exclusive): this feature is behind the media.mediasource.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 完全対応 11
補足
完全対応 11
補足
補足 Only works on Windows 8+.
Opera 完全対応 15Safari 完全対応 8WebView Android 完全対応 4.4.3Chrome Android 完全対応 33Firefox Android 未対応 なしOpera Android 完全対応 14Safari iOS 未対応 なしSamsung Internet Android 完全対応 3.0
removeAsyncChrome 未対応 なしEdge 未対応 なしFirefox 完全対応 62
無効
完全対応 62
無効
無効 From version 62: this feature is behind the media.mediasource.experimental.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 完全対応 ありFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 完全対応 あり
textTracksChrome 完全対応 23Edge 完全対応 18Firefox 完全対応 42
完全対応 42
未対応 25 — 42
補足 無効
補足 Limited support to a whitelist of sites, for example YouTube, Netflix, and other popular streaming sites. The whitelist was removed when Media Source Extensions was enabled by default in Firefox 42.
無効 From version 25 until version 42 (exclusive): this feature is behind the media.mediasource.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 完全対応 11
補足
完全対応 11
補足
補足 Only works on Windows 8+.
Opera 完全対応 15Safari 完全対応 8WebView Android 完全対応 4.4.3Chrome Android 完全対応 33Firefox Android 未対応 なしOpera Android 完全対応 14Safari iOS 未対応 なしSamsung Internet Android 完全対応 3.0
timestampOffsetChrome 完全対応 23Edge 完全対応 12Firefox 完全対応 42
完全対応 42
未対応 25 — 42
補足 無効
補足 Limited support to a whitelist of sites, for example YouTube, Netflix, and other popular streaming sites. The whitelist was removed when Media Source Extensions was enabled by default in Firefox 42.
無効 From version 25 until version 42 (exclusive): this feature is behind the media.mediasource.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 完全対応 11
補足
完全対応 11
補足
補足 Only works on Windows 8+.
Opera 完全対応 15Safari 完全対応 8WebView Android 完全対応 4.4.3Chrome Android 完全対応 33Firefox Android 未対応 なしOpera Android 完全対応 14Safari iOS 未対応 なしSamsung Internet Android 完全対応 3.0
trackDefaultsChrome ? Edge ? Firefox 未対応 なしIE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android 未対応 なしOpera Android ? Safari iOS 未対応 なしSamsung Internet Android ?
updatingChrome 完全対応 23Edge 完全対応 12Firefox 完全対応 42
完全対応 42
未対応 25 — 42
補足 無効
補足 Limited support to a whitelist of sites, for example YouTube, Netflix, and other popular streaming sites. The whitelist was removed when Media Source Extensions was enabled by default in Firefox 42.
無効 From version 25 until version 42 (exclusive): this feature is behind the media.mediasource.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 完全対応 11
補足
完全対応 11
補足
補足 Only works on Windows 8+.
Opera 完全対応 15Safari 完全対応 8WebView Android 完全対応 4.4.3Chrome Android 完全対応 33Firefox Android 未対応 なしOpera Android 完全対応 14Safari iOS 未対応 なしSamsung Internet Android 完全対応 3.0
videoTracksChrome 完全対応 23Edge 完全対応 12Firefox 完全対応 42
完全対応 42
未対応 25 — 42
補足 無効
補足 Limited support to a whitelist of sites, for example YouTube, Netflix, and other popular streaming sites. The whitelist was removed when Media Source Extensions was enabled by default in Firefox 42.
無効 From version 25 until version 42 (exclusive): this feature is behind the media.mediasource.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 完全対応 11
補足
完全対応 11
補足
補足 Only works on Windows 8+.
Opera 完全対応 15Safari 完全対応 8WebView Android 完全対応 4.4.3Chrome Android 完全対応 33Firefox Android 未対応 なしOpera Android 完全対応 14Safari iOS 未対応 なしSamsung Internet Android 完全対応 3.0

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報