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 |
浏览器兼容性
加载中…