diff --git a/files/en-us/web/api/htmlmediaelement/abort_event/index.md b/files/en-us/web/api/htmlmediaelement/abort_event/index.md index a6e009e2f0d3ec8..e9261322e444715 100644 --- a/files/en-us/web/api/htmlmediaelement/abort_event/index.md +++ b/files/en-us/web/api/htmlmediaelement/abort_event/index.md @@ -8,7 +8,8 @@ browser-compat: api.HTMLMediaElement.abort_event {{APIRef("HTML DOM")}} -The **`abort`** event is fired when the resource was not fully loaded, but not as the result of an error. +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. @@ -28,21 +29,62 @@ A generic {{domxref("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 + +```html + + + + +

+```
+
+#### CSS
+
+```css
+video,
+button,
+pre {
+  display: block;
+  margin-block: 1rem;
+}
+```
+
+#### JavaScript
+
 ```js
 const video = document.querySelector("video");
-const videoSrc = "https://example.org/path/to/video.webm";
+const loadAndAbortButton = document.querySelector("#loadAndAbort");
+const log = document.querySelector("#log");
 
 video.addEventListener("abort", () => {
-  console.log(`Abort loading: ${videoSrc}`);
+  log.textContent += "Video loading aborted\n";
 });
 
-const source = document.createElement("source");
-source.setAttribute("src", videoSrc);
-source.setAttribute("type", "video/webm");
+loadAndAbortButton.addEventListener("click", () => {
+  log.textContent = "Loading video...\n";
+
+  video.src = `/shared-assets/videos/flower.webm?nocache=${Date.now()}`;
+  video.load();
 
-video.appendChild(source);
+  setTimeout(() => {
+    video.removeAttribute("src");
+    video.load();
+  }, 50);
+});
 ```
 
+#### Result
+
+{{EmbedLiveSample("Abort_loading_a_media_resource", "100%", 300)}}
+
 ## Specifications
 
 {{Specifications}}