ManagedSourceBuffer: sự kiện bufferedchange
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.
Sự kiện bufferedchange của giao diện ManagedSourceBuffer được kích hoạt khi vùng đệm của ManagedSourceBuffer thay đổi. Điều này có thể xảy ra sau khi gọi appendBuffer(), 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ớ.
Sự kiện này rất quan trọng đối với các ứng dụng sử dụng ManagedMediaSource, vì tác nhân người dùng có thể xóa nội dung đã đệm bất kỳ lúc nào. Bằng cách lắng nghe sự kiện này, các ứng dụng có thể phát hiện khi dữ liệu đệm bị xóa và phản ứng bằng cách tải các phân đoạn thay thế để tránh phát lại bị gián đoạn.
Cú pháp
Sử dụng tên sự kiện trong các phương thức như addEventListener(), hoặc đặt thuộc tính trình xử lý sự kiện.
addEventListener("bufferedchange", (event) => {});
onbufferedchange = (event) => {};
Kiểu sự kiện
Một BufferedChangeEvent. Kế thừa từ Event.
Thuộc tính sự kiện
Ngoài các thuộc tính được liệt kê bên dưới, các thuộc tính từ giao diện cha Event cũng có sẵn.
addedRangesRead only-
Một đối tượng
TimeRangesđại diện cho các phạm vi thời gian được thêm vào bộ đệm. removedRangesRead only-
Một đối tượng
TimeRangesđại diện cho các phạm vi thời gian bị xóa khỏi bộ đệm.
Ví dụ
Theo dõi các thay đổi vùng đệm
Ví dụ này thiết lập một ManagedMediaSource, thêm bộ đệm nguồn, 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`,
);
}
for (let i = 0; i < event.removedRanges.length; i++) {
console.log(
`Removed: ${event.removedRanges.start(i)}s - ${event.removedRanges.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™ # dfn-bufferedchange |