BufferedChangeEvent: thuộc tính removedRanges

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.

Thuộc tính chỉ đọc removedRanges của giao diện BufferedChangeEvent trả về một đối tượng TimeRanges biểu diễn các khoảng thời gian đã bị xóa khỏi ManagedSourceBuffer liên kết. Đây là các khoảng bị xóa giữa các sự kiện updatestart và updateend gần nhất, trong lần chạy gần đây nhất của thuật toán loại bỏ coded frame hoặc đẩy coded frame ra ngoài, hoặc là hệ quả của việc user agent chạy thuật toán dọn dẹp bộ nhớ.

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) => {
      const removed = event.removedRanges;
      for (let i = 0; i < removed.length; i++) {
        console.log(`Removed range: ${removed.start(i)}s - ${removed.end(i)}s`);
      }
    });

    const response = await fetch(videoUrl);
    const data = await response.arrayBuffer();
    sourceBuffer.appendBuffer(data);

    // Sau khi thêm xong, xóa 5 giây đầu tiên để kích hoạt removedRanges
    sourceBuffer.addEventListener(
      "updateend",
      () => {
        sourceBuffer.remove(0, 5);
      },
      { once: true },
    );
  });
}