MediaSource: sourceended 事件
注意：此功能在 专用 Web Workers 中可用。
当 MediaSource 对象的 readyState 变为 "ended" 时，会触发 sourceended 事件。这表明应用程序已完成向 MediaSource 发送数据。当应用程序完成将所有媒体数据附加到与 MediaSource 关联的 SourceBuffer 对象后，它会在 MediaSource 上调用 MediaSource.endOfStream() 方法。这将导致 readyState 转换为 "ended" 并触发 sourceended 事件。
语法
在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。
js
addEventListener("sourceended", (event) => {})
onsourceended = (event) => {}
事件类型
一个通用的 Event。
示例
处理 sourceopen 事件
此示例演示了如何设置视频元素以进行播放，以及如何处理 sourceended 事件以进行适当的资源管理。代码设置一个 MediaSource，通过获取和缓冲视频数据来启动播放，然后使用 sourceended 事件执行清理任务，例如移除事件监听器并在播放完成后通知用户。
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);
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);
});
规范
| 规范 |
|---|
| Media Source Extensions™ # dfn-sourceended |
浏览器兼容性
加载中…
另见
MediaSource.endOfStream()