SourceBuffer: appendBuffer() 方法
注意：此功能在 專用 Web Workers 中可用。
SourceBuffer 介面的 appendBuffer() 方法會從 ArrayBuffer、TypedArray 或 DataView 物件中追加媒體片段資料到 SourceBuffer。
語法
js
appendBuffer(source)
引數
source-
包含您想新增到
SourceBuffer中的媒體片段資料的ArrayBuffer、TypedArray或DataView物件。
返回值
無（undefined）。
異常
InvalidStateErrorDOMException-
在以下情況之一中丟擲
SourceBuffer物件的updating屬性為true。您必須等待任何之前的追加、更新或刪除操作完成（由updateend事件指示）後，才能再次呼叫appendBuffer()。SourceBuffer已從父媒體源的sourceBuffers屬性中移除。HTMLMediaElement的error屬性不為null。
QuotaExceededError-
緩衝區已滿，無法再追加資料。這可能發生在
SourceBuffer達到瀏覽器定義的已緩衝資料量限制時。
此外，在 updatestart 事件觸發且 appendBuffer() 方法返回後，也可能發生錯誤：例如，因為緩衝區包含格式不正確的位元組。在這種情況下，error 事件將在此 SourceBuffer 例項上觸發。
示例
基本用法
此示例演示瞭如何將影片資料新增到 video 元素中進行播放。MediaSource 提供影片資料，SourceBuffer 新增這些資料。該示例會獲取影片片段資料，將其追加到 SourceBuffer，並在完成後結束流。
js
const mediaSource = new MediaSource();
const video = document.querySelector("video");
video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener("sourceopen", async () => {
const sourceBuffer = mediaSource.addSourceBuffer(
'video/mp4; codecs="avc1.42E01E, mp4a.40.2"',
);
const buffer = await fetch("/my-video-segment.mp4").then((res) =>
res.arrayBuffer(),
);
sourceBuffer.appendBuffer(buffer);
sourceBuffer.addEventListener("updateend", () => {
if (mediaSource.readyState === "open") {
mediaSource.endOfStream();
}
});
});
處理錯誤
此示例演示瞭如何處理呼叫 appendBuffer() 時可能發生的錯誤。
它在 try...catch 塊中呼叫 appendBuffer()，以捕獲和處理該方法同步丟擲的異常。它還監聽 error 事件，以處理在 appendBuffer() 返回後、緩衝區非同步更新時發生的錯誤。
js
sourceBuffer.addEventListener("error", (e) => {
console.error("Error appending buffer:", e);
// Handle the error appropriately, e.g., show a message to the user,
// try a different source, or stop playback.
});
try {
sourceBuffer.appendBuffer(data);
} catch (e) {
if (e.name === "InvalidStateError") {
console.error(
"InvalidStateError: The SourceBuffer is in an invalid state.",
);
} else if (e.name === "QuotaExceededError") {
console.error("QuotaExceededError: The buffer is full.");
} else {
console.error("An unexpected error occurred:", e);
}
}
規範
| 規範 |
|---|
| Media Source Extensions™ # dom-sourcebuffer-appendbuffer |
瀏覽器相容性
載入中…