ManagedSourceBuffer
Khả dụng hạn chế
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Note: This feature is available in Dedicated Web Workers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
Giao diện ManagedSourceBuffer của Media Source Extensions API là một SourceBuffer được tạo bởi ManagedMediaSource khi gọi addSourceBuffer(). Nó kế thừa tất cả các thuộc tính và phương thức của SourceBuffer, và ngoài ra còn kích hoạt sự kiện bufferedchange mỗi khi vùng đệm thay đổi, kể cả khi tác nhân người dùng xóa nội dung như một phần của thuật toán dọn dẹp bộ nhớ.
Các ứng dụng nên lắng nghe sự kiện bufferedchange để theo dõi các thay đổi đối với dữ liệu đã đệm, vì ManagedMediaSource có thể xóa nội dung bất kỳ lúc nào do giới hạn bộ nhớ hoặc phần cứng.
Thuộc tính phiên bản
Kế thừa các thuộc tính từ giao diện cha SourceBuffer.
Phương thức phiên bản
Kế thừa các phương thức từ giao diện cha SourceBuffer.
Sự kiện
Cũng kế thừa các sự kiện từ giao diện cha SourceBuffer.
bufferedchangeThử nghiệm-
Được kích hoạt khi vùng đệm của
ManagedSourceBufferthay đổi, sau khi gọiappendBuffer(),remove(),endOfStream(), hoặc do tác nhân người dùng chạy thuật toán dọn dẹp bộ nhớ.
Ví dụ
Lắng nghe các thay đổi vùng đệm
Ví dụ này thiết lập một ManagedMediaSource, thêm ManagedSourceBuffer, tải tệp MP4 phân mảnh, và lắng nghe sự kiện bufferedchange để ghi lại mọi thay đổi về vùng đệm.
const videoUrl =
"https://mdn.github.io/shared-assets/videos/flower-fragmented.mp4";
const mediaType = 'video/mp4; codecs="avc1.64001F, mp4a.40.2"';
if (ManagedMediaSource.isTypeSupported(mediaType)) {
const source = new ManagedMediaSource();
const video = document.createElement("video");
video.controls = true;
video.disableRemotePlayback = true;
video.src = URL.createObjectURL(source);
document.body.appendChild(video);
source.addEventListener("sourceopen", async () => {
const sourceBuffer = source.addSourceBuffer(mediaType);
sourceBuffer.addEventListener("bufferedchange", (event) => {
for (let i = 0; i < event.addedRanges.length; i++) {
console.log(
`Added: ${event.addedRanges.start(i)}s - ${event.addedRanges.end(i)}s`,
);
}
});
const response = await fetch(videoUrl);
const data = await response.arrayBuffer();
sourceBuffer.appendBuffer(data);
});
}
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| Media Source Extensions™ # dom-managedsourcebuffer |