HTMLMediaElement: abort event
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The abort event is fired when media resource loading is stopped before completion, but not as the result of an error.
This is usually achieved by removing the src attribute or setting it to the empty string (""), then calling load().
This event is not cancelable and does not bubble.
Syntax
Use the event name in methods like addEventListener(), or set an event handler property.
addEventListener("abort", (event) => { })
onabort = (event) => { }
Event type
A generic Event.
Examples
Abort loading a media resource
The following example demonstrates how to abort a video.
When you press the button it starts loading a video resource.
After a short timeout it aborts the load by removing the src attribute and calling the load() method.
If the video resource is still loading when load() is called, the abort event fires.
HTML
<video controls width="250"></video>
<button id="loadAndAbort">Load and abort video</button>
<pre id="log"></pre>
CSS
video,
button,
pre {
display: block;
margin-block: 1rem;
}
JavaScript
const video = document.querySelector("video");
const loadAndAbortButton = document.querySelector("#loadAndAbort");
const log = document.querySelector("#log");
video.addEventListener("abort", () => {
log.textContent += "Video loading aborted\n";
});
loadAndAbortButton.addEventListener("click", () => {
log.textContent = "Loading video...\n";
video.src = `/shared-assets/videos/flower.webm?nocache=${Date.now()}`;
video.load();
setTimeout(() => {
video.removeAttribute("src");
video.load();
}, 50);
});
Result
Specifications
| Specification |
|---|
| HTML # event-media-abort |
| HTML # handler-onabort |