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()