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 |
浏览器兼容性
加载中…