SourceBuffer

可用性有限

此特性不是基線特性，因為它在一些最廣泛使用的瀏覽器中不起作用。

注意：此功能在專用 Web Workers 中可用。

SourceBuffer 介面代表要透過 MediaSource 物件傳遞給 HTMLMediaElement 並播放的媒體塊。這可以由一個或多個媒體片段組成。

例項屬性

SourceBuffer.appendWindowEnd: 控制追加視窗的結束時間戳。
SourceBuffer.appendWindowStart: 控制追加視窗的開始時間戳。這是一個時間戳範圍，可用於過濾要追加到 SourceBuffer 的媒體資料。時間戳在此範圍內的編碼媒體幀將被追加，而範圍外的將被過濾掉。
SourceBuffer.audioTracks 只讀: 當前包含在 SourceBuffer 中的音訊軌列表。
SourceBuffer.buffered 只讀: 返回當前在 SourceBuffer 中緩衝的時間範圍。
SourceBuffer.mode: 控制 SourceBuffer 中媒體片段的排序方式，即它們是否可以按任意順序追加，還是必須保持嚴格的順序。
SourceBuffer.textTracks 只讀實驗性: 當前包含在 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() 非標準實驗性: 開始非同步將指定緩衝區追加到 SourceBuffer 的過程。返回一個 Promise，該 Promise 在緩衝區被追加後 fulfilled。
SourceBuffer.changeType(): 更改未來對 appendBuffer() 的呼叫所期望的新資料遵循的 MIME 型別。
SourceBuffer.remove(): 從 SourceBuffer 中刪除特定時間範圍內的媒體片段。
SourceBuffer.removeAsync() 非標準實驗性: 開始非同步從 SourceBuffer 中刪除指定範圍內媒體片段的過程。返回一個 Promise，該 Promise 在所有匹配的片段都被刪除後 fulfilled。

事件

abort: 當緩衝區追加被中止時觸發，因為在 SourceBuffer.appendBuffer() 演算法仍在執行時呼叫了 SourceBuffer.abort() 或 MediaSource.removeSourceBuffer() 方法。SourceBuffer.updating 從 true 變為 false。
error: 當在處理 appendBuffer() 操作時發生錯誤時觸發。SourceBuffer.updating 從 true 變為 false。
update: 每當 SourceBuffer.appendBuffer() 或 SourceBuffer.remove() 完成時觸發。SourceBuffer.updating 從 true 變為 false。
updateend: 在 appendBuffer() 或 remove() 操作（無論是否成功）完成之後觸發。此事件在 update、error 或 abort 事件之後觸發。
updatestart: 當 appendBuffer() 或 remove() 操作開始時觸發。updating 從 false 變為 true。

示例

分塊載入影片

以下示例以儘可能快的速度分塊載入影片，並在能夠播放時立即播放。

您可以在 https://github.com/mdn/dom-examples/tree/main/sourcebuffer 找到完整的程式碼，並在 https://mdn.github.io/dom-examples/sourcebuffer/ 現場試用演示。

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

const assetURL = "frag_bunny.mp4";
// Need to be specific for Blink regarding codecs
const mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';

function loadVideo() {
  if (MediaSource.isTypeSupported(mimeCodec)) {
    const mediaSource = new MediaSource();
    console.log(mediaSource.readyState); // closed
    video.src = URL.createObjectURL(mediaSource);
    mediaSource.addEventListener("sourceopen", sourceOpen);
  } else {
    console.error("Unsupported MIME type or codec: ", mimeCodec);
  }
}

async function sourceOpen() {
  console.log(this.readyState); // open
  const sourceBuffer = this.addSourceBuffer(mimeCodec);
  const response = await fetch(assetURL);
  const buffer = await response.arrayBuffer();
  sourceBuffer.addEventListener("updateend", () => {
    this.endOfStream();
    video.play();
    console.log(this.readyState); // ended
  });
  sourceBuffer.appendBuffer(buffer);
}

const load = document.querySelector("#load");
load.addEventListener("click", loadVideo);

規範

規範
Media Source Extensions™ # sourcebuffer

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 ⁨2025年9月29日⁩ 17:26:44，由 MDN 貢獻者進行了編輯。

在 GitHub 上檢視此頁面 • 報告此內容的某個問題