BufferedChangeEvent
Limited availability
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 BufferedChangeEvent của Media Source Extensions API biểu diễn đối tượng sự kiện cho sự kiện bufferedchange được kích hoạt trên một ManagedSourceBuffer. Sự kiện này được kích hoạt bất cứ khi nào các khoảng đã đệm của ManagedSourceBuffer thay đổi, chẳng hạn do các lệnh gọi appendBuffer(), remove() hoặc endOfStream(), hoặc khi user agent chạy thuật toán dọn dẹp bộ nhớ.
Hàm tạo
BufferedChangeEvent()Experimental-
Tạo và trả về một đối tượng
BufferedChangeEventmới.
Thuộc tính thực thể
Cũng kế thừa các thuộc tính từ giao diện cha của nó, Event.
BufferedChangeEvent.addedRangesRead only Experimental-
Một đối tượng
TimeRangesbiểu diễn các khoảng thời gian đã được thêm vào bộ đệm củaManagedSourceBuffer. BufferedChangeEvent.removedRangesRead only Experimental-
Một đối tượng
TimeRangesbiểu diễn các khoảng thời gian đã bị xóa khỏi bộ đệm củaManagedSourceBuffer.
Ví dụ
Xử lý thay đổi các khoảng đã đệm
Ví dụ này tạo một ManagedMediaSource, gắn nó với một phần tử <video>, tìm nạp một tệp MP4 phân mảnh và lắng nghe sự kiện bufferedchange. Khi sự kiện được kích hoạt, ví dụ sẽ ghi nhật ký các khoảng thời gian đã được thêm vào.
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 video = document.createElement("video");
const source = new ManagedMediaSource();
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 range: ${event.addedRanges.start(i)} - ${event.addedRanges.end(i)}`,
);
}
});
const response = await fetch(videoUrl);
const data = await response.arrayBuffer();
sourceBuffer.appendBuffer(data);
});
}
Các đặc tả
| Specification |
|---|
| Media Source Extensions™ # dom-bufferedchangeevent |