MediaSource: sourceclose event

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.

Sự kiện sourceclose được phát ra khi readyState của đối tượng MediaSource thay đổi thành "closed". Điều này cho biết MediaSource đã bị tách khỏi media element.

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 xử lý sự kiện.

addEventListener("sourceclose", (event) => { })

onsourceclose = (event) => { }

Ví dụ này minh họa cách tách một media element khỏi MediaSource và xử lý sự kiện sourceclose để quản lý tài nguyên đúng cách. Code thiết lập một MediaSource, gắn nó vào một video element, và lắng nghe sự kiện sourceclose. Khi sự kiện được phát ra, nó thực hiện các tác vụ dọn dẹp (revokeObjectURL).

const video = document.getElementById("myVideo");
const mediaSource = new MediaSource();

video.src = URL.createObjectURL(mediaSource);

mediaSource.addEventListener("sourceopen", (event) => {
  const sourceBuffer = mediaSource.addSourceBuffer(
    'video/mp4; codecs="avc1.42E01E"',
  );
  fetch("video-data.mp4")
    .then((response) => response.arrayBuffer())
    .then((data) => {
      sourceBuffer.appendBuffer(data);
    });
});

function detachMediaSource() {
  video.src = null; // Detach the MediaSource
}

mediaSource.addEventListener("sourceclose", (event) => {
  console.log("MediaSource sourceclose:", event);
  // Perform cleanup tasks here, e.g., release resources, update UI
  URL.revokeObjectURL(video.src); // Clean up the object URL
});

// Call detachMediaSource() when appropriate, e.g., on a button click
document
  .getElementById("detachButton")
  .addEventListener("click", detachMediaSource);