GeezerVison is showing developer.mozilla.org — HTMLMediaElement: abort event - Web APIs | MDN
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.
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
html
<video controls width="250"></video>
<button id="loadAndAbort">Load and abort video</button>
<pre id="log"></pre>
CSS
css
video,
button,
pre {
display: block;
margin-block: 1rem;
}
JavaScript
js
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