MediaSource: sourceclose 事件
注意：此功能在 專用 Web Workers 中可用。
當 MediaSource 物件的 readyState 變為 "closed" 時，會觸發 sourceclose 事件。這表明 MediaSource 已從媒體元素中分離。
語法
在諸如 addEventListener() 之類的方法中使用事件名稱，或設定事件處理程式屬性。
js
addEventListener("sourceclose", (event) => { })
onsourceclose = (event) => { }
事件型別
一個通用的 Event。
示例
處理 sourceclose 事件
此示例演示如何將媒體元素與 MediaSource 分離，並處理 sourceclose 事件以進行適當的資源管理。程式碼設定一個 MediaSource，將其附加到影片元素，並偵聽 sourceclose 事件。當事件觸發時，它會執行清理任務（revokeObjectURL）。
js
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);
規範
| 規範 |
|---|
| Media Source Extensions™ # dfn-sourceclose |
瀏覽器相容性
載入中…