MediaSource: sourceended 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 sourceended được phát ra khi readyState của đối tượng MediaSource thay đổi thành "ended". Điều này cho biết ứng dụng đã hoàn tất việc gửi dữ liệu đến MediaSource. Khi ứng dụng đã hoàn tất việc thêm tất cả dữ liệu media vào các đối tượng SourceBuffer liên kết với một MediaSource, nó gọi phương thức MediaSource.endOfStream() trên MediaSource. Điều này khiến readyState chuyển sang "ended" và kích hoạt sự kiện sourceended.
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("sourceended", (event) => {})
onsourceended = (event) => {}
Loại sự kiện
Một Event chung.
Ví dụ
Xử lý sự kiện sourceended
Ví dụ này minh họa cách thiết lập một video element để phát lại và xử lý sự kiện sourceended để quản lý tài nguyên đúng cách. Code thiết lập một MediaSource, khởi tạo phát lại bằng cách lấy và đệm dữ liệu video, sau đó sử dụng sự kiện sourceended để thực hiện các tác vụ dọn dẹp như xóa các trình xử lý sự kiện và thông báo cho người dùng khi phát lại hoàn tất.
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);
sourceBuffer.addEventListener("updateend", () => {
mediaSource.endOfStream();
});
});
});
mediaSource.addEventListener("sourceended", (event) => {
console.log("MediaSource sourceended:", event);
URL.revokeObjectURL(video.src);
// Perform cleanup
// Remove event listeners from SourceBuffer and MediaSource
sourceBuffer.removeEventListener("updateend", () => {});
mediaSource.removeEventListener("sourceopen", () => {});
// Notify user (e.g., display a "Playback finished" message)
const messageElement = document.createElement("p");
messageElement.textContent = "Playback finished.";
document.body.appendChild(messageElement);
});
Thông số kỹ thuật
| Specification |
|---|
| Media Source Extensions™ # dfn-sourceended |
Tương thích trình duyệt
Xem thêm
MediaSource.endOfStream()